Text scramble

<h2 class="scramble" data-phrases='["Decoding the message","Hello, world","Ship it today"]'>Decoding the message</h2>
<button class="scramble-next" type="button">Next phrase</button>

.scramble {
  margin: 0 0 18px;
  min-height: 1.2em;
  font: 700 32px/1.2 ui-monospace, Menlo, monospace;
  letter-spacing: -0.02em;
  text-align: center;
}
.scramble .noise { color: var(--brand); opacity: 0.75; } /* letters that haven't settled yet */
.scramble-next {
  border: 0;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 10px;
  font: 600 14px system-ui, sans-serif;
  color: var(--fg);
  background: var(--surface-2);
}

// Text scramble: every frame, letters that haven't "locked in" yet show a
// random character. Each letter locks in at its own time, left to right.

const noiseCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+<>';
const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
// How quickly letters lock in (higher = faster). Reduced motion gets a much shorter scramble.
const lettersPerFrame = prefersReducedMotion ? 1.5 : 0.4;

const randomCharacter = () => noiseCharacters[Math.floor(Math.random() * noiseCharacters.length)];

function scrambleTo(element, finalText) {
  // Screen readers should hear the real text, not the noise.
  element.setAttribute('aria-label', finalText);

  cancelAnimationFrame(element.scrambleFrame);
  // Each letter gets a frame number when it locks in, with a little randomness.
  const jitter = prefersReducedMotion ? 3 : 10; // random extra frames per letter
  const lockAt = [...finalText].map((_, index) => Math.floor(index / lettersPerFrame + Math.random() * jitter));
  let frameCount = 0;

  function drawFrame() {
    let html = '';
    let lettersDone = 0;
    [...finalText].forEach((letter, index) => {
      if (letter === ' ' || frameCount >= lockAt[index]) {
        html += letter === '<' ? '&lt;' : letter === '&' ? '&amp;' : letter;
        lettersDone += 1;
      } else {
        html += `<span class="noise">${randomCharacter()}</span>`;
      }
    });
    element.innerHTML = html; // safe: every character comes from our own phrase list or noise set

    frameCount += 1;
    if (lettersDone < finalText.length) element.scrambleFrame = requestAnimationFrame(drawFrame);
  }
  drawFrame();
}

document.querySelectorAll('.scramble').forEach((heading) => {
  const phrases = JSON.parse(heading.dataset.phrases);
  let current = 0;
  scrambleTo(heading, phrases[current]);

  document.querySelector('.scramble-next').addEventListener('click', () => {
    current = (current + 1) % phrases.length;
    scrambleTo(heading, phrases[current]);
  });
});