Text Scramble / Decode Effects

When to use this

• Adding a "decoding" reveal to headlines, hero text, or navigation items.
• Building a hacker/terminal aesthetic with character-by-character resolution.
• Creating glitch effects where text flickers between random characters.
• Implementing matrix-rain or waterfall text animations.
• Do NOT use this for general hover effects on links/buttons; see hover-microinteraction-catalog which includes a simpler scramble recipe.

Mental model

A text scramble replaces each character with random characters from a set, then resolves them one at a time (usually left-to-right) back to the original text. The effect works through three phases per character position:

1. Idle: showing the original character (pre-animation).
2. Scrambling: cycling through random characters at a fixed frame rate.
3. Resolved: locked to the final character.

Each character index has a resolveAt frame number. On each animation tick, if currentFrame >= resolveAt[i], that position shows its final character. Otherwise, it shows a random character from the set. The resolve times are staggered left-to-right with some randomness to avoid a perfectly mechanical sweep.

The visual trick that makes this work is monospace width locking. If the font is proportional, characters have different widths, and the text visibly reflows every frame as characters change. This looks broken. Either use a monospace font, or lock each character into a fixed-width <span> with display: inline-block; width: 0.6em (adjusted per font).