react-scatter-graphy v0.4.3
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
Maintainers
This project is maintained by Geonyeol Ryu.
- Github
- rjsduf0503@gmail.com
License
MIT © react-scatter-graphy. See LICENSE for details.
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago