← All effects
Text Scramble
-- fps
prefers-reduced-motion detected — clean text shown, no scrambling
X-ray · layers
resolves left to right
scrambling letters glow
fires every 3 s (or hover it)
Parameters
Your text
Resolve speed25 ch/s
Scramble window6
Flip rate30 /s
your version · updates as you tinker
How this effect works
Scramble text is a moving frontier across the string. One number — progress — grows at SPEED letters per second. Everything behind the frontier shows its real letter; the next few letters (the scramble window) flip through random characters; everything beyond waits, dimmed. The "hacking" look is just those three zones sliding rightward.
The random characters don't change every frame — that would be an unreadable blur. They flip on their own clock (FLIP_RATE per second), which is what gives the mechanical, split-flap-display feel. Turn off the sweep layer and letters resolve in random order instead — same math, completely different personality.
Production notes: respects prefers-reduced-motion (clean text, no animation) · effectively free — one string rebuild per frame · classic use: headlines on load, nav links on hover, terminal-style intros · the copied snippet is self-contained HTML + CSS + JS.