Scramble Text

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

Dependenciesmotion

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#

Prop	Type	Default	Description
`text` The text to decode. Required.	`string`	—	The text to decode. Required.
`trigger` When the text decodes: on load, or once it scrolls into view.	`"mount" \| "inView"`	"inView"	When the text decodes: on load, or once it scrolls into view.
`scrambleOnHover` Decode again each time the pointer enters the text.	`boolean`	false	Decode again each time the pointer enters the text.
`duration` Duration of the decoding, in milliseconds.	`number`	800	Duration of the decoding, in milliseconds.
`characters` Characters drawn while the text is scrambled.	`string`	"A–Z 0–9"	Characters drawn while the text is scrambled.