react-scatter-graphy

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

Currently, PNG formats are more effective than JPEG formats.

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}
        shape={pixelShape}
        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.
shape	'circle | square'	square		Pixel shape.
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

Cautions

If you are using vite, you have to remove below code in vite.config.js.

define: {
  global: 'window',
},

Maintainers

This project is maintained by Geonyeol Ryu.

• Github
• rjsduf0503@gmail.com

License

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