Special/TextScramble

TextScramble

Matrix-style character scramble that resolves character by character to the final string. Trigger on mount or hover. Configurable charset, speed, and reveal rate.

import { TextScramble } from "@animui/ui"

Mount trigger

Scrambles on page load — great for hero headings.

Hover trigger

Hover to scramble

Binary charset

Props

Prop	Type	Default	Description
`text`	`string`	—	The final text to reveal.
`trigger`	`"mount" \| "hover"`	`"mount"`	"mount" runs on load; "hover" runs each time the cursor enters.
`speed`	`number`	`40`	Milliseconds between each scramble frame.
`delay`	`number`	`0`	Milliseconds to wait before starting the scramble.
`revealSpeed`	`number`	`0.3`	Characters revealed per frame (higher = faster left-to-right reveal).
`charset`	`string`	`ABCDEF…0123456789!@#…`	Characters used during the scramble phase.
`as`	`"span" \| "p" \| "h1" \| "h2" \| "h3" \| "div"`	`"span"`	HTML element to render.
`onComplete`	`() => void`	—	Called when the scramble finishes.
`className`	`string`	—	Additional classes.