react-scatter-graphy

Image src based retro typography with scattering animation.

When you hover the mouse cursor over the scattered pixels, it is animated as the original image.

You can also use react-scatter-graphy not only typography image but also normal image

example-instagram

example-kakao

Features

  • Convert images to pixels
  • Automated optimization for large number of pixels
  • Automated pixel color
  • Automated resize
  • Supports JPEG, PNG images format

Installing

Using npm:

$ npm install react-scatter-graphy

Using yarn:

$ yarn add react-scatter-graphy

Example

import { ScatterGraphy } from 'react-scatter-graphy';

function App() {
  return (
    <div style={{ width: '50%' }}>
      <ScatterGraphy
        src={yourImage}
        size={pixelSize}
        duration={animationDuration}
        color={pixelColor}
        resizeDelay={delayWhenResize}
      />
    </div>
  );
}

export default App;

Props

Prop Type Default Required Description
src string Image src.
size number 1 Number to multiply automatically calculated pixel size. In most cases, 1 is the optimal size.
duration number 500 Pixel animation duration.
color color Image pixel color Image pixel color. The default value is set to the pixel color of the image.
resizeDelay number 500 Delay when screen resize event occurs.

Development

$ yarn
$ yarn storybook

Maintainers

This project is maintained by Geonyeol Ryu.

License

MIT © react-scatter-graphy. See LICENSE for details.

GitHub

View Github