Loading…
Live component · try it
Freetext · hover · dark
Character Scramble
A headline that resolves out of noise: on load (and again on hover) every character cycles through random glyphs before locking into place from left to right, so the word appears to be decoded. Locked characters stop changing, which is what makes it read as resolution rather than flicker.
The mechanic
Lock frame for index i = i × 2 + random(0..6) frames at 30 fps; before the lock the slot draws a glyph from `!<>-_\\/[]{}—=+*^?#`, dimmed to 60 % so noise reads lighter than text. The loop ends when every slot is locked. Hover restarts it; spaces lock instantly.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
