ComponentsDistort
Glitch text
A controlled digital glitch on cue.
Installation
$ npx shadcn@latest add @textlab/glitch-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { GlitchText } from "@/components/textlab/glitch-text/glitch-text";
<GlitchText text="Signal lost" trigger="hover" />Variants
sliceshiftscanProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "slice" | "shift" | "scan" | "slice" | Tear bands sideways, jolt the word, or roll a bright scan band through it. |
| trigger | "interval" | "hover" | "mount" | "interval" | When it glitches. |
| every | number | 3.5 | Seconds between bursts for interval. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Gaming, music and cyber themes.
- Error and 404 pages with personality.
Skip it
- Serious or high-trust contexts like payments.
- More than one glitch on screen.
Accessibility and motion
Accessibility
- Bursts are 500 ms with at least 3 s between them by default, well under flash thresholds.
- The readable text only jolts by a few hundredths of an em, and only during a burst.
Motion
- Hard steps, not tweens, so it looks digital.
- Long rests between bursts keep it intentional.
Reduced motion. No glitching; plain text.
Performance
- CSS keyframes on clip-path and transform; idle between bursts.