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

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

GitHub

View Github