ScrambleText

Text that decodes from random characters into its final form, on view, on hover, or on mount.

ACCESS GRANTED

bash
npx shadcn@latest add https://www.rad-ui.com/r/scramble-text.json

React
import ScrambleText from "@/components/fx/scramble-text"

<ScrambleText as="h2" text="ACCESS GRANTED" />

Hover the code: RAD-UI-FX-2026

React
<ScrambleText trigger="hover" text="RAD-UI-FX-2026" />

Screen readers only ever get the final text (visually hidden); the scrambling copy is aria-hidden.
Server render shows the final text, so content is readable before hydration.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) skips scrambling entirely.

Prop	Type	Default	Description
text	string	—	Final text. Screen readers only ever get this.
as	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4'	'span'	Element to render.
duration	number	1100	Milliseconds to settle.
characters	string	A–Z, 0–9, symbols	Characters used while scrambling.
trigger	'inView' \| 'hover' \| 'mount'	'inView'	When to scramble.