A React component that add a glitch animation to any text.
Use the package manager npm to install .
npm install react-glitch-animationimport React from 'react';
import ReactDOM from 'react-dom';
import { GlitchAnimation } from 'react-glitch-animation';
ReactDOM.render(
<GlitchAnimation isActive={true} animationDurationMS={5000} text="Glitch effect"/>,
document.getElementById('root'),
);| props | default value | info |
|---|---|---|
| isActive | true | Is animation active |
| animationDurationMS | 0 | Animation Duration in MS, 0 = infinite |
| text | "Glitch Animation Effect" | Text to apply the animation on it |
You can overwrite those css varible:
| var | default value |
|---|---|
| --react-glitch-font-size | 72px |
| --react-glitch-font-size | 72px |
| --react-glitch-font-family | fantasy |
| --react-glitch-text-color | white |
| --react-glitch-text-background-color | #101518 |
| --react-glitch-text-glitch-color-1 | #49fc00 |
| --react-glitch-text-glitch-color-2 | #b300fc |
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.