Text Scramble
A GSAP ScrambleText-powered component that randomises characters into the final string, either on mount or on hover.
TextScramble wraps a <span> (optionally inside an <a>) and uses the GSAP ScrambleTextPlugin to animate characters from random noise into the final text. Set onHover to false (default) for a one-shot mount animation, or true to replay on every pointer enter and focus event. Respects prefers-reduced-motion.
Installation
npx shadcn@latest add @adv/text-scrambleUsage
import { TextScramble } from '@/components/ui/TextScramble';
{/* Auto-scrambles on mount */}
<TextScramble text="ADVENTURELAND" />
{/* Scrambles on hover */}
<TextScramble text="Hover over me" onHover className="cursor-pointer" />
{/* As a link */}
<TextScramble
text="Open docs"
href="https://example.com"
target="_blank"
onHover
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The final text the scramble resolves to. |
href | string | — | When provided, the component renders an <a> tag instead of a <div>. |
ariaLabel | string | — | Accessible label for the link; falls back to text when omitted. |
className | string | "fluid" | Class applied to the root element. |
randomChars | boolean | true | Use random chars from charSet during scramble. When false, only chars from the target text are used. |
duration | number | 0.8 | GSAP tween duration in seconds. |
speed | number | 2 | ScrambleText speed multiplier (higher = faster character resolution). |
charSet | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZabcde..." | Pool of characters used during scramble. |
target | "_blank" | "_self" | "_parent" | "_top" | "_blank" | Link target attribute (only applies when href is set). |
rel | string | "noopener noreferrer" | Link rel attribute. |
onHover | boolean | false | When true, the animation replays on every pointerenter and focus event instead of only once on mount. |
onComplete | () => void | — | Callback fired when the scramble animation finishes. |
upperCaseOnly | boolean | false | When true, strips lowercase letters from charSet (uppercase + digits only). When false, strips uppercase letters (lowercase + digits only). |