Text scramblePro
A decode effect for headings and code names on a 40 ms tick, with every character cell fixed.
On this page
ProA heading that decodes on mount and model names that decode on hover or focus.
Installation
Usage
import { TextScramble } from "@/components/ui/chatcn/pro/text-scramble"
<TextScramble as="h2" text="Release notes, week 44" />Never use it on streamed answers or on anything a person is waiting to read. It is for names and headings that arrive once.
Examples
Glyph sets
ProLetters, code glyphs and blocks, a slow decode and a long line that keeps its wrap.
Props
| Prop | Type | Notes |
|---|---|---|
text | string | The final text; a change scrambles into it |
trigger | "mount" | "hover" | "manual" | Default mount |
playKey | unknown | Change to replay with manual |
glyphs | "alnum" | "code" | "blocks" | string | Default alnum |
tick, ticks | number | Ms per tick (40) and ticks to the end (18) |
as | "span" | "h1" | "h2" | "h3" | "p" | "code" | Default span |
Accessibility
- The final text is always in the DOM and is what assistive tech reads; the scramble is hidden from it.
- With
trigger="hover"it also plays on keyboard focus.
Motion
Characters lock in from the reading start with a little jitter, about 0.7 s in all. Each cell is sized by its final glyph, so a wide scramble glyph is clipped instead of pushing its neighbors. Reduced motion shows the final text only.