0.2.2 • Published 4 years ago
theme-ui-glitch-text v0.2.2
Theme-UI Glitch Text
React component for adding glitch text effect. Component won't be animated if prefers-reduced-motion media query is set to reduce.
API
| Prop | Default | Description |
|---|---|---|
text | "" | ::before and ::after text |
duration | 5000ms | Animation duration |
limit | 0.5 | Amount of glitch effect |
keyframesNum | 20 | Number of keyframes |
position | [-5, 5] | Amount of left and right offset |
shadow | [-2, 2] | Amount of left and right text-shadow |
colors | ['red', 'green', 'blue'] | Text shadow colors |
backgroundColor | #fff | Background color |
Example
<GlitchText
text="Theme-UI Glitch Text"
duration="5000ms"
keyframesNum={30}
limit={1}
colors={['pink', 'orange', 'purple']}
position={[-2, 2]}
shadow={[-1, 1]}
backgroundColor="background"
>
Theme-UI Glitch Text
</GlitchText>