react-scatter-graphy
TypeScript icon, indicating that this package has built-in type declarations

0.4.3 • Public • Published

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.

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}
        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.

License

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

Package Sidebar

Install

npm i react-scatter-graphy

Weekly Downloads

5

Version

0.4.3

License

MIT

Unpacked Size

54.7 kB

Total Files

21

Last publish

Collaborators

  • geonyeol_ryu