Scramble text

Installation

Usage

Copyimport { ScrambleText } from "@/components/dithercn/scramble-text";
 
export function Title() {
  return <ScrambleText as="h2">Every frame accounted for</ScrambleText>;
}

Each character resolves on its own, a few milliseconds after the one before it. In the default dither mode a block in the accent colour thickens through the levels of a 4×4 Bayer matrix, a few glyphs flicker, and the letter lands, fading from the accent colour to the text colour. blocks skips the glyphs and glyphs skips the blocks.

The glyphs come from the text itself, so a headline scrambles in its own typeface instead of falling back to a terminal font. Pass characters for a specific set: SCRAMBLE_MONO and SCRAMBLE_HEX are exported.

Change children and only the characters that differ scramble, from the old text to the new one. In the demo above, the last words change every few seconds.

Every placeholder sits in the slot of the character it becomes, and the real text stays underneath, so the width never changes and nothing around it moves.

Examples

Hero reveal

mode="blocks" with a colour: each letter fills in from a sparse dither to solid before it appears. The paragraph uses a short duration and a small stagger so a long line still resolves quickly.

Nav links on hover

With trigger="hover", the text replays whenever the closest link or button is hovered or receives keyboard focus. mode="glyphs" and a short duration keep it quick enough for something people hover often.

Status that changes

trigger="change" never plays on its own; it plays when the text changes. The status label scrambles only the letters that differ and picks up the colour of each state, with a caret while it resolves. The detail line uses hex glyphs.

Props

Notes

• The final text is always in the page as real text. While the effect plays it turns transparent and an overlay hidden from assistive technology draws the blocks and glyphs on top, so screen readers, search engines and copy and paste only ever see the final text. For a status that changes, add aria-live="polite" yourself.
• With mount or in-view, the text waits hidden until it plays. Without JavaScript it shows normally.
• With reduced motion turned on, the text never scrambles and the caret does not blink.
• The overlay exists only while the effect plays (or while an always caret is shown), and the frame loop stops as soon as every character settles.