TextScramble

Text that animates in by rapidly cycling through random-looking characters before resolving, left-to-right, into the real final text — a "decrypt" reveal effect.

Installation

npx dafink-ui add text-scramble

Demo

Props

Name	Type	Default	Description
text	string	-	Required. The final text to resolve to.
duration	number	800	Total milliseconds for the scramble-to-resolve animation.
characters	string	'!<>-_\\/[]{}—=+*^?#'	Charset used for scrambling filler characters.
className	string	''	Additional CSS classes.

Accessibility

TextScramble checks prefers-reduced-motion on mount inside a useEffect; when it matches, the requestAnimationFrame scramble loop never starts and the final text renders immediately and statically. The outer span's aria-label is always the correct final text from the first render onward, while the inner span holding the animated scrambling glyphs is aria-hidden, so screen readers never hear scramble noise regardless of animation state. It renders plain text with no interactive children, so there's no keyboard behavior to preserve or alter.