Text Glitch
A chromatic clip-path glitch for headlines, CSS-only and entirely GPU-friendly.
textglitchheadlineanimationtypographychromatic
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The string to render. |
as | keyof React.JSX.IntrinsicElements | "span" | Tag rendered as the outer element. |
duration | number | 2.4 | Base glitch cycle in seconds. Channel layers desync automatically. |
offset | number | 5 | Horizontal slice offset in CSS pixels. |
enableShadows | boolean | true | Chromatic aberration text-shadows on the slice layers. |
leftColor | string | theme | Left-channel shadow color. Omit for theme cyan. |
rightColor | string | theme | Right-channel shadow color. Omit for theme rose. |
surfaceColor | string | theme | Opaque mask behind each slice. Omit for theme surface (#fafafa / #0a0a0b). |
trigger | "always" | "hover" | "always" | When to run the loop. |
paused | boolean | - | Force the loop paused. When omitted, auto-pauses off-screen or when the tab is hidden. |