Scramble Text

Link the stylesheet and the script once, then mark any element holding plain text:

<link rel="stylesheet" href="scramble-text.css" />
<script src="scramble-text.js" defer></script>

<h1 data-scramble>Text that decodes itself</h1>
<a href="/docs" data-scramble="hover" data-scramble-charset="binary">Docs</a>
<span data-scramble-rotate data-scramble-phrases="Build faster | Ship cleaner | Pay nothing">Build faster</span>

data-scramble picks the trigger: empty or reveal decodes the first time the element scrolls into view (it waits as frozen glyphs until then), hover re-scrambles on every hover and focus — of the link or button around it, if there is one — and manual waits for you. data-scramble-rotate morphs from phrase to phrase (| between them) every data-scramble-interval ms (default 2200), keeping the width of the widest; it pauses while hovered or focused.

Options as data attributes, on either:

Attribute	Default	What it does
data-scramble-charset	glyphs	glyphs, binary, hex, katakana, blocks — or the characters themselves, e.g. ✦✧★
data-scramble-order	ltr	ltr, rtl, random or center (from the middle out)
data-scramble-duration	1000	ms from the first character locking to the last
data-scramble-speed	45	ms between glyph changes (lower flickers faster)
data-scramble-stagger	0.85	0–1: 1 locks one after another, 0 all at once at the end
data-scramble-delay	0	ms of pure noise before the first character locks
data-scramble-seed	—	Any number or word: the same seed plays the same scramble, frame for frame
data-scramble-preserve	space	space, punctuation (spaces too) or none: what stays still
data-scramble-mono	—	Every character the same width, in --scramble-mono-font
data-scramble-label	—	What screen readers read instead (rotation: every phrase, by default)

From your own code:

await ScrambleText.scramble(element, { text: "Access granted", charset: "hex", order: "center" });
ScrambleText.rotator(element).pause(); // or .play(), .next()

scramble decodes any element into new text (or re-scrambles its own), with any option above for that call only; changedOnly: true scrambles just the characters that differ. It resolves when the last character locks, and the element fires a bubbling scrambleend event. Elements added after the page loads: ScrambleText.init(container) — it returns a function that undoes it. ScrambleText.create(element, options) and ScrambleText.createRotate(element, { phrases }) give you a controller directly.

Copy ScrambleText.tsx, scramble-text.css and the core folder into your project:

import { ScrambleRotate, ScrambleText, useScramble } from "./ScrambleText";

<ScrambleText as="h1" text="Text that decodes itself" />
<ScrambleText as="a" href="/docs" text="Docs" trigger="hover" charset="binary" />
<ScrambleText text={status} trigger="manual" order="center" />   {/* decodes whenever status changes */}
<ScrambleRotate phrases={["Build faster", "Ship cleaner"]} interval={2400} paused={paused} mono />

function DeployButton() {
  const { ref, scramble } = useScramble({ trigger: "manual", charset: "hex" });
  return <button ref={ref} onClick={() => scramble({ text: "Deployed" })}>Deploy</button>;
}

Every option above is a prop (charset, order, duration, speed, stagger, delay, seed, preserve, label, mono); as picks the element (span by default) and every other prop goes to it. The text is rendered on the server too, so the page reads right before any script runs. With useScramble, keep the element's own text static and change it through scramble({ text }). React 18 or 19.

The file starts with "use client", so use it from any page or server component. With the App Router nothing else is needed. With the Pages Router, move the CSS import into pages/_app.

The text keeps your font, size and colour (gradient text works too). Set these on the text, or on any element around it — a button, a card, :root:

Property	What it changes
--scramble-glyph, --scramble-glyph-glow, --scramble-glyph-opacity	The flickering glyphs: colour, glow, strength
--scramble-flash, --scramble-flash-duration	The flash as a character locks
--scramble-mono-font	The font of data-scramble-mono / mono
--scramble-align	Where a rotating phrase sits in the room of the widest (start, center, end)

Colours use light-dark(): they follow color-scheme on your page. With prefers-reduced-motion every scramble is instant — the text simply appears — and rotating phrases swap without one.