A scroll-triggered text decode effect. Headlines start as random characters and resolve one-by-one into their final text — like a terminal decrypting, a hacker breaking in, or a signal coming through the static.
Six preset styles you can switch between live on the canvas:
Decrypt — punctuation scramble, classic cipher look
Glitch — geometric glyphs and shaded blocks
Static — pure block characters, signal-noise aesthetic
Binary — just 0s and 1s
Hex — hexadecimal digits
Mixed — alphanumeric with glitch glyphs
Cycle through multiple lines in the same slot. Each line scrambles in, holds, then the next replaces it. Loop forever or freeze on the last line. Perfect for hero sections that need to communicate more than one idea.
Full timing control
Master Speed multiplier (0.25× to 4×)
Per-character Duration
Stagger between characters
Resolve Order: random, left-to-right, or right-to-left
Polish details
Scrambling characters render in a separate dimmed color so locked characters pop visually
Letter Spacing control for hero-sized headlines
Custom character set support
Respects prefers-reduced-motion automatically
Works with any monospace font
In-canvas controller — a pill-style tab bar to try every preset live on the canvas without opening the property panel. Hidden automatically on published sites.
Best for hero headlines, section dividers, loading states, 404 pages, and anything that wants to read as technical, cyberpunk, or decrypted.
Tips
Use a monospace font for stable text width during scramble
Keep Duration short (0.2–0.4s) for snappy, readable animation
For light backgrounds, change Scramble color to a dimmed dark tone
Glyphs and Blocks presets give the strongest visual impact
Jaffer Sathick
