MotionAnimated
Scramble Text
Decoding text effect with GSAP ScrambleText.
Scramble Text resolves a word like a terminal decoding a signal, on mount, on scroll or on hover. The real text is rendered on the server, so it is indexed and readable without JavaScript.
Preview
SIGNAL ACQUIRED
Hover to decode: cuelark.com
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/scramble-text.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/scramble-text.
Builds on: motion
Usage
import { ScrambleText } from "@/components/ui/scramble-text";
<ScrambleText text="SIGNAL ACQUIRED" trigger="inView" />Motion
How it moves
GSAP ScrambleTextPlugin with a delayed reveal for a decode-left-to-right feel.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
ScrambleText
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Final text. |
| trigger | "mount" | "inView" | "hover" | "inView" | When to scramble. |
| chars | string | "upperCase" | Scramble characters. |
| duration | number | 0.9 | Seconds. |
Accessibility
- Screen readers get the final text.
- No effect with reduced motion.
FAQ
Also searched as: text scramble effect · gsap scramble text · decoding text animation · hacker text effect react · glitch text