← Back to gallery
CSS

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.

text-scrambledeciphertypewriterstepsaccessibility

Decipher reveal · steps cadence

Text Scramble Reveal

A scramble overlay ticks through symbol-like glyphs while the real destination phrase remains present, selectable, and screen-reader-readable underneath. Three variants demonstrate a terminal-style binary decipher, a mixed-symbol search result settle, and a hex editorial cipher.

Mono · binary cipher

Terminal Decipher

A monospace terminal-style decipher pass. The noise overlay cycles through binary glyphs (0/1) before clearing to reveal the destination phrase. Steps timing on the overlay; the underlying phrase is real DOM text the whole time.

  • terminal
  • binary
  • steps timing

Mixed glyphs · quick settle

Search Result

A shorter mixed-symbol scramble for search results — makes the result feel processed without delaying comprehension. The destination phrase is visible enough underneath that the effect does not block reading.

  • quick settle
  • mixed glyphs
  • result label

Hex · slow editorial reveal

Editorial Cipher

A slower editorial cipher using hex glyphs (0-9 / A-F). Lets the cipher layer feel intentional without becoming unreadable; the phrase stays moderate length so scramble noise doesn't become visual clutter.

  • headline
  • hex
  • editorial

Scramble inspector

Terminal Decipher

  • terminal
  • binary
  • steps timing

A monospace terminal-style decipher pass. The noise overlay cycles through binary glyphs (0/1) before clearing to reveal the destination phrase. Steps timing on the overlay; the underlying phrase is real DOM text the whole time.

.scramble-word {
  position: relative;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.scramble-word__real {
  /* Real DOM text — stays selectable / readable / accessible. */
  position: relative;
  z-index: 1;
  color: #dcfce7;
}

.scramble-word__noise {
  /* Decorative overlay layered above the real text and cleared
     left-to-right with a clip-path inset. */
  position: absolute;
  inset: 0;
  z-index: 2;
  display: inline-flex;
  justify-content: center;
  color: #34d399;
  pointer-events: none;
  animation: scramble-clear 2.40s steps(12, end) infinite;
}

.scramble-word__noise span {
  /* Each cell ticks on its own short cycle, staggered by index so
     the overlay reads as a flickering cipher row. */
  display: inline-block;
  animation: scramble-tick 0.42s steps(2, end) infinite;
  animation-delay: calc(var(--scramble-index, 0) * -48ms);
}

@keyframes scramble-clear {
  0%, 52%   { opacity: 0.88; clip-path: inset(0 0 0 0); }
  100%      { opacity: 0;    clip-path: inset(0 0 0 100%); }
}

@keyframes scramble-tick {
  50% { transform: translateY(-0.05em); }
}

@media (prefers-reduced-motion: reduce) {
  .scramble-word__noise,
  .scramble-word__noise span {
    animation: none;
    opacity: 0;
  }
}