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.
License
MIT © react-scatter-graphy. See LICENSE for details.