Text Scramble Reveal

A decipher-style text reveal where aria-hidden scramble glyphs clear away while the final live DOM phrase remains selectable and readable.

Duration: 2s
Resolution: 1440×900
Format: CSS

text-scrambledeciphertypewriterstepsaccessibility

Decipher Text / Steps Reveal

Text Scramble Reveal

A scramble overlay ticks through symbol-like glyphs while the real destination text remains present, selectable, and readable.

terminal decipher decipher reveal - 2.2s cycle · 1.00 intensity

ACCESS GRANTED

Mono symbols · hard steps

Terminal Decipher

A monospace decipher pass hides the noise layer as the destination phrase resolves.

The overlay width and opacity tick on a fixed cadence, then clear to the stable phrase.

Pattern Matched

Short label · quick settle

Search Result

A shorter scramble makes a search result feel processed without delaying comprehension.

Noise opacity decays before the final frame so the result is never fully hidden for the whole cycle.

Decoded Motion

Wide title · slow reveal

Editorial Cipher

A slower editorial version lets the cipher layer feel intentional without becoming unreadable.

The mask clears in staged bands while the underlying word never moves.

ACCESS GRANTED

Motion contract: The overlay width and opacity tick on a fixed cadence, then clear to the stable phrase.
Accessibility: The final phrase is the real DOM text; the scramble glyphs are aria-hidden decoration.

Cycle duration2.2s

Motion intensity1.00

Use steps timing for the overlay and never rely on random JavaScript ticks for the final accessible text.

.scramble-word {
  position: relative;
}

.scramble-word__noise {
  position: absolute;
  inset: 0;
  color: #34d399;
  pointer-events: none;
  animation: scrambleClear 2.20s steps(12, end) infinite;
}

.scramble-word__real {
  color: #dcfce7;
}