Each character flickers through a glyph pool then locks into place, left to right — the unresolved glyphs glow in the accent color until they settle. When the text changes, only the characters that differ re-scramble. The demo below swaps words on a timer.
pnpm dlx shadcn@latest add "https://godui.design/r/text-scramble.json"
Each position is given a staggered start and end frame; before its start it
shows the previous character, between them a random glyph from the charset, and
after, the resolved character. Changing text animates from the current string
to the next, so only the differing characters move.
import { TextScramble } from "@/components/godui/text-scramble";
<TextScramble text="Decrypting…" />
Choose alphanumeric, symbols, katakana, or binary — or pass your own
string of glyphs.
<TextScramble text="01001000" charset="binary" />
<TextScramble text="アクセス" charset="アイウエオカキクケコ" />
mount runs once on load, in-view waits until scrolled into view, and hover
runs on pointer enter.
<TextScramble text="Hover me" trigger="hover" />
speed is the ms per frame (lower is faster); spread is how widely the
per-character stagger is spread.
<TextScramble text="Loading" speed={20} spread={40} />
The resolved text is always present as a visually hidden, selectable string, so
assistive tech and copy/paste get clean text while the animated glyphs are
aria-hidden. When prefers-reduced-motion is set, the text is shown resolved
with no scramble.
| Prop | Type | Default | Description |
|---|
text | string | — | The resolved text; changing it re-scrambles the diff. |
trigger | "mount" | "in-view" | "hover" | "mount" | When the first scramble runs. |
charset | "alphanumeric" | "symbols" | "katakana" | "binary" | string | "alphanumeric" | Glyph pool used while unresolved. |
speed | number | 28 | Milliseconds per frame — lower is faster. |
spread | number | 28 | Max stagger spread, in frames. |
TextScramble also forwards every standard <span> attribute to the root element.