#301
Text scramble
A line of monospace text that decodes from random glyphs, locking one letter every 55ms from left to right. It re-runs on every loop and again on hover or focus.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Text scramble" pattern (@codeatlasdev/ui demo #301, motion/text) in my app.
Call get_demo({ ids: ["#301"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Security and crypto screens, a status label that just changed, a hacker-style heading or any short label that should feel like it is resolving.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `label="Scramble: a line of text decodes from random glyphs"` and `loop={2800}`
- `const STEP = 40` redraws the random glyphs every 40ms; `const SETTLE = 55` locks the next letter every 55ms
- `aria-label={target}` on the button keeps the real sentence as the accessible name; the flickering glyphs sit in a `<span` with `aria-hidden="true"`, as decoration
- `onpointerenter` and `onfocus` call `decode()` again: hover or keyboard focus is the takeover
- The autoplay attachment reads the stage cycle through `const { cycle, reduced } = m`, so each stage loop decodes again
- Under reduced motion the attachment sets `text = target` and `decode()` is never started
Exact motion (do not approximate):
- text content (random glyphs resolving to the final letters, left to right): 55ms per letter, linear, stagger 40ms
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `label="Scramble: a line of text decodes from random glyphs"` and `loop={2800}`
- `const STEP = 40` redraws the random glyphs every 40ms; `const SETTLE = 55` locks the next letter every 55ms
- `aria-label={target}` on the button keeps the real sentence as the accessible name; the flickering glyphs sit in a `<span` with `aria-hidden="true"`, as decoration
- `onpointerenter` and `onfocus` call `decode()` again: hover or keyboard focus is the takeover
- The autoplay attachment reads the stage cycle through `const { cycle, reduced } = m`, so each stage loop decodes again
- Under reduced motion the attachment sets `text = target` and `decode()` is never started
Related
Loading source.