ComponentsTyping
Scramble text
Letters decode into place.
Installation
$ npx shadcn@latest add @textlab/scramble-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { ScrambleText } from "@/components/textlab/scramble-text/scramble-text";
<ScrambleText text="Access granted" variant="symbols" />Variants
randomsymbolsbinaryProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "random" | "symbols" | "binary" | "random" | Which glyphs flicker before each letter settles. |
| charset | string | – | Custom glyphs; overrides the variant. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| active | boolean | false | Drives trigger="manual". |
| once | boolean | true | In view: play once instead of on every entry. |
| delay | number | 0 | Seconds before the first part moves. |
| duration | number | 1.2 | Seconds each part takes. |
| tick | number | 45 | Milliseconds between glyph changes. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
| onComplete | () => void | – | Called when a one-shot animation finishes. |
When to use it
Reach for it
- Tech, security and launch moments.
- Short labels that should feel computed.
Skip it
- Body copy.
- Anything that must be read during the first second.
Accessibility and motion
Accessibility
- Screen readers only ever hear the real text.
- The real text reserves layout, so lines never jump.
Motion
- Settles left to right with a short lead, so the end of the word stays alive longest.
- Whitespace never scrambles, keeping word shapes.
Reduced motion. Shows the real text, no glyphs.
Performance
- One rAF loop while running; idle after it settles.
- Glyphs change every 45 ms, not every frame.