Scramble Text

Letters start scrambled and settle from left to right. The final text keeps its width, so nothing around it moves.

Dependenciesmotion
SYSTEMS NOMINAL

Installation#

pnpm dlx shadcn@latest add @balick/scramble-text

Or pass the full URL: https://ui.balick.me/r/scramble-text.json

Usage#

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

export function Status() {
  return <ScrambleText text="SYSTEMS NOMINAL" scrambleOnHover className="font-mono" />
}

Props#

PropTypeDefault
text

The text to decode. Required.

string—
trigger

When the text decodes: on load, or once it scrolls into view.

"mount" | "inView""inView"
scrambleOnHover

Decode again each time the pointer enters the text.

booleanfalse
duration

Duration of the decoding, in milliseconds.

number800
characters

Characters drawn while the text is scrambled.

string"A–Z 0–9"