Animations/Glitch Text
Glitch Text
A cyberpunk-inspired text scramble animation. Randomly swaps characters over a configurable duration, then resolves back to the original string — triggered on hover, mount, or both.
import { GlitchText } from "@animui/ui"Basic
SYSTEM ERROR
Speed
The speed prop controls the interval between character swaps in ms. Hover each label to compare.
Fast scramble
speed=20
Default speed
speed=40 (default)
Slow scramble
speed=80
Trigger
The triggerOn prop controls when the scramble animation fires.
Hover to glitch
triggerOn="hover" — plays on mouse enter
Glitches on mount
triggerOn="mount" — plays once when component mounts
Glitches on mount and hover
triggerOn="both" — plays on mount, then again on every hover
Scramble Duration
The scrambleDuration prop sets the total animation length in ms. Hover each label to compare.
Short burst
scrambleDuration=400
Default duration
scrambleDuration=800 (default)
Long scramble
scrambleDuration=1600
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | The text to apply the glitch scramble effect to. |
speed | number | 40 | Interval speed in ms between each character swap during the scramble animation. Lower values scramble faster. |
scrambleDuration | number | 800 | Total duration of the scramble animation in ms. Controls how long the glitch effect runs before resolving. |
triggerOn | "hover" | "mount" | "both" | "hover" | When to trigger the scramble animation. "hover" plays on mouse enter, "mount" plays once on mount, "both" plays on mount and on every hover. |
className | string | — | Additional CSS classes applied to the element. |