Animations & Motion
Glitch Layers
RGB chromatic aberration layers create glitch effect on hover.
textanimationglitchrgbchromatic
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | GLITCH | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
baseTextColor | string | text-white | Base color of the text |
layer1Color | string | text-red-500 | Color of the first glitch layer |
layer2Color | string | text-cyan-500 | Color of the second glitch layer |
textSize | string | text-9xl | Size of the text |
glitchAmplitude | number | 5 | Amplitude of glitch movement |
animationDuration | number | 0.2 | Animation duration in seconds |
repeatDelay1 | number | 0.1 | Repeat delay for first layer |
repeatDelay2 | number | 0.2 | Repeat delay for second layer |
className | string | Additional CSS classes |