Text Scramble

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.

Installation

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.

Usage

import { TextScramble } from "@/components/godui/text-scramble";

<TextScramble text="Decrypting…" />

Charsets

Choose alphanumeric, symbols, katakana, or binary — or pass your own string of glyphs.

<TextScramble text="01001000" charset="binary" />
<TextScramble text="アクセス" charset="アイウエオカキクケコ" />

Triggers

mount runs once on load, in-view waits until scrolled into view, and hover runs on pointer enter.

<TextScramble text="Hover me" trigger="hover" />

Tuning

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} />

Accessibility

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.

Props

TextScramble also forwards every standard <span> attribute to the root element.