Text Animations
Scramble Text
Ciphered glyphs boiling out of noise and resolving into words — a decode cascade that settles character by character, a hover that re-scrambles on demand, or a continuous low glitch that keeps the type restless, each freshly-resolved letter flashing accent before it cools to ink.
Install
# ScrambleText needs no npm packagesProps
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "decode-on-mount" | "scramble-on-hover" | "continuous-glitch" | "decode-on-mount" | Decode once on mount, re-scramble on hover, or glitch forever. |
| charset | "symbols" | "alphanumeric" | "katakana" | "binary" | "blocks" | "symbols" | Pool of cipher glyphs shown before a character settles. |
| duration | number | 900 | Total time for the full decode cascade to resolve. |
| stagger | number | 40 | Per-character offset of the settle deadline across the string. |
| speed | number | 45 | How often unsettled glyphs re-roll to new noise. |
| glitchInterval | number | 3 | Seconds between glitch bursts (continuous-glitch mode only). |
| flashColor | string (hex) | "#a855f7" | Accent tint a character flashes as it resolves. |
What It Demonstrates
- Text morph
- Text that animates character by character when it changes, drawing attention to the new value.
- Stepped animation
- An animation that is divided into discrete steps, like a countdown timer.
- Hover effect
- Visual change when the cursor moves over an element.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
Related Components
Neon
A neon sign, with everything that is wrong with a neon sign. Tubes strike one at a time rather than together, each settling at its own moment inside the ignition; the steady state carries a mains hum; and every so often one tube gives up for a third of a second and comes back. The glow is baked once per letter into a sprite, so a frame is a handful of draws no matter how wide the word — and the word itself never stops being a real, selectable text node underneath.
Split Flap
A Solari departure board. Every column walks the charset one flap at a time until it reaches its letter, so the word is never revealed — it is arrived at, with a real hinged half falling away as the next one seats behind it.
Morphing Text
A gooey blur-morph that cross-dissolves between a list of words.
Variable Proximity
Text whose letters interpolate font weight by cursor proximity.
Letters Pull
A per-letter pull-up reveal — letters rise, sharpen from a blur, and fade in with a stagger.
Lumen
Copy that lights up as you read it — words ahead sit dim and unfocused, and stay lit once you pass them.