Dual Scramble
Two-phase text scramble: text scrambles through a brand-accent color, then resolves to its final foreground. Five triggers: scroll (default), hover, click, load, manual. Group wrapper staggers multiple elements with a shared trigger. Zero layout shift via stacked-span DOM. Screen readers get the real text. Reduced-motion resolves instantly.
On mobile
Can't copy on a phone? Get the free Starter Pack instead.
Three production-grade components in React, Vue and HTML/CSS/JS, in your inbox, ready when you're back at your desk.
Where this component came from.
We built it for good-fella.com, our own site, and kept it in the library once it earned its place. The same code runs in production today.
What you'll need.
Install
- GSAP
- ScrambleTextPlugin
- ScrollTrigger
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
