Text Scramble Decode
Cipher-style text animation that scrambles characters and decodes to reveal content. Scroll-triggered, hover, and auto-play modes with custom timing.
About This Effect
A cipher-style text animation that scrambles characters through random glyphs before revealing the final content. Inspired by sci-fi terminal interfaces and hacker movie aesthetics, this effect supports multiple trigger modes including scroll-triggered reveals, hover interactions, click events, and auto-play sequences. Each character resolves independently with configurable timing and direction.
What's Included
- Four trigger modes: scroll, hover, click, and auto-play
- Five decode directions: left-to-right, right-to-left, center-out, edges-in, and random
- Configurable scramble speed with fast, normal, and slow presets
- Custom character sets for the scramble animation
- ScrollTrigger integration with automatic viewport detection
- Group mode for staggered multi-element reveals
- Lightweight implementation with no heavy dependencies
- Accessible — respects prefers-reduced-motion
Perfect For
- Hero headline reveals and landing page intros
- Section titles that decode as users scroll
- Interactive hover effects on navigation or menu items
- Loading states and transition screens
- Cyberpunk or tech-themed website headers
How It Works
The effect captures the original text content, then replaces each character with random glyphs from a configurable character set. A GSAP tween controls the reveal progress — as each character's threshold is reached, it transitions from random characters to the final letter. The direction parameter controls which characters resolve first, creating different visual patterns.