# 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.
Canonical: https://gsapvault.com/effects/text-decode
Live demo: https://gsapvault.com/demos/text-decode/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | text-animation, scramble, scroll-reveal, hover-effect |
| Uses Lenis | No |
## Overview
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.
## Features
- 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
- Global replay control and start/complete custom events
- Lightweight requestAnimationFrame implementation
- Accessible — respects prefers-reduced-motion
## Use Cases
- 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
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## How It Works
The effect captures each element's original text and builds a per-character queue with randomized start and completion thresholds. requestAnimationFrame cycles unresolved positions through the configured glyph set until each threshold resolves to the final character. Direction options change how thresholds are distributed, while GSAP coordinates delayed sequences, repeating playback, and optional ScrollTrigger activation.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add data attributes to text in your ``:**
```html
SIGNAL UNLOCKED
```
**3. Add before the closing `` tag:**
```html
```
### Triggers
| Attribute | Behavior |
|---|---|
| `data-scramble-auto` | Decodes after load |
| `data-scramble-scroll` | Decodes on viewport entry and resets above the trigger |
| `data-scramble-hover` | Replays on pointer hover, keyboard focus, or touch |
| `data-scramble-click` | Replays when the element is clicked |
| `data-scramble-replay` | Button that replays every initialized scramble instance |
### Options
| Attribute | Values | Default | Description |
|---|---|---|---|
| `data-scramble-speed` | `fast`, `normal`, `slow` | `normal` | Frame ranges used during decoding |
| `data-scramble-direction` | `left`, `right`, `center`, `edges`, `random` | `random` | Character-resolution order |
| `data-scramble-chars` | Any string | Symbols | Glyph set used while scrambling |
| `data-scramble-delay` | Milliseconds | `0` | Initial auto-play or group delay |
| `data-scramble-repeat` | Milliseconds | `0` | Delay after completion before auto replay |
### Accessibility
- Hover triggers also respond to keyboard focus and touch.
- Reduced motion leaves the original text visible and skips decoding.
- For large animated headings, put the readable phrase in an `aria-label` on the parent and set the changing glyph span to `aria-hidden="true"`. This prevents every random character from being announced.
- Use a real `