Scramble text

Letters that decode into place. Change the text and only the characters that changed scramble, each through its own kind, so capitals flicker through capitals and digits through digits. Then they land in reading order and glow for a beat. A long text lands more letters at a time, so it never drags.

SYSTEM ONLINE

Installation

Terminalbash

npx @neelshha/ui@latest add scramble-text

Usage

page.tsxtsx

import { ScrambleText } from "@/components/ui/scramble-text";

<ScrambleText>{status}</ScrambleText>

The real text is on the page the whole time, for screen readers and for copying. The scrambling copy sits on top of it and is hidden from assistive tech. Mono type keeps the width steady while it runs.

Only what changed

A balance going up scrambles the digits that changed. The currency sign and the separators stay put.

$12,480.35

page.tsxtsx

<ScrambleText>{usd.format(balance)}</ScrambleText>

On hover

With replayOnHover, pointing at the link or tabbing to it decodes its label again.

page.tsxtsx

<a href="/work">
  <ScrambleText replayOnHover>WORK</ScrambleText>
</a>

On first view

With appear, the text decodes once, the first time it scrolls into view. Glyphs picks what it scrambles through.

TRANSMISSION RECEIVED

page.tsxtsx

<ScrambleText appear glyphs="01">TRANSMISSION RECEIVED</ScrambleText>

API

Other props go to the outer span. However long the text, a run takes at most about four --duration-spring. With reduced motion, new text appears at once.

Prop	Type	Default	Description
`children`	`string`		The text. A new value decodes from the old one, and only the characters that changed scramble.
`glyphs`	`string`		Characters to scramble through. Leave it out and each letter scrambles through its own kind: capitals, lower case, or digits.
`appear`	`boolean`	`false`	Decodes the whole text the first time it scrolls into view.
`replayOnHover`	`boolean`	`false`	Decodes the whole text again on hover and on focus, of the link or button it sits in or of the text itself.
`--ns-scramble-glyph`	`color`	`var(--text-sub)`	Letters still scrambling.
`--ns-scramble-fresh`	`color`	`var(--accent-ink)`	A letter for a moment after it lands.