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>