Text Scramble / Matrix Decode

Code

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #050910;
  color: #f2f6ff;
  font-family: "Courier New", Courier, monospace;
  cursor: default;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}

.scramble-text {
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #38bdf8;
  min-height: 1.2em;
  text-shadow: 0 0 30px rgba(56, 189, 248, 0.3);
}

.scramble-hint {
  font-size: 0.75rem;
  color: #334155;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

(function () {
  "use strict";

  const CHARS = "!<>-_\\/[]{}—=+*^?#________";

  const PHRASES = [
    "Steal This →",
    "Build bold motion.",
    "Design with rhythm.",
    "Ship original work.",
    "Open source. Free.",
  ];

  class TextScramble {
    constructor(el) {
      this.el = el;
      this.queue = [];
      this.frame = 0;
      this.frameReq = null;
      this.resolve = null;
      this.update = this.update.bind(this);
    }

    setText(newText) {
      const oldText = this.el.textContent;
      const len = Math.max(oldText.length, newText.length);
      this.queue = [];

      for (let i = 0; i < len; i++) {
        const from = oldText[i] || "";
        const to = newText[i] || "";
        const start = Math.floor(Math.random() * 18);
        const end = start + Math.floor(Math.random() * 18) + 4;
        this.queue.push({ from, to, start, end, char: "" });
      }

      cancelAnimationFrame(this.frameReq);
      this.frame = 0;
      return new Promise((resolve) => {
        this.resolve = resolve;
        this.update();
      });
    }

    update() {
      let output = "";
      let complete = 0;

      for (let i = 0, n = this.queue.length; i < n; i++) {
        const { from, to, start, end } = this.queue[i];
        let { char } = this.queue[i];

        if (this.frame >= end) {
          complete++;
          output += to;
        } else if (this.frame >= start) {
          if (!char || Math.random() < 0.28) {
            char = CHARS[Math.floor(Math.random() * CHARS.length)];
            this.queue[i].char = char;
          }
          output += `<span class="scramble-char">${char}</span>`;
        } else {
          output += from;
        }
      }

      this.el.innerHTML = output;
      this.frame++;

      if (complete === this.queue.length) {
        this.resolve && this.resolve();
      } else {
        this.frameReq = requestAnimationFrame(this.update);
      }
    }
  }

  const el = document.getElementById("scramble");
  if (!el) return;

  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const fx = new TextScramble(el);

  if (reduced) {
    el.textContent = PHRASES[0];
    return;
  }

  let idx = 0;
  const cycle = () => {
    fx.setText(PHRASES[idx]).then(() => {
      setTimeout(cycle, 2800);
    });
    idx = (idx + 1) % PHRASES.length;
  };

  cycle();

  // Hover to re-scramble current phrase
  el.addEventListener("mouseenter", () => {
    cancelAnimationFrame(fx.frameReq);
    fx.setText(PHRASES[(idx - 1 + PHRASES.length) % PHRASES.length]);
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Text Scramble</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main>
    <p class="scramble-text" id="scramble" aria-live="polite">Initializing...</p>
    <p class="scramble-hint">hover to scramble again</p>
  </main>
  <script src="script.js"></script>
</body>
</html>

Text Scramble / Matrix Decode

The classic hacker-movie text effect — characters scramble through a random pool before each letter resolves to its final value. Zero dependencies, pure vanilla JS with requestAnimationFrame.

How it works

A TextScramble class maintains a queue of characters to resolve. Each frame:

For each character position, if it hasn’t resolved yet, pick a random char from the chars pool
Once a character’s frame counter reaches its threshold, lock it to the final value
Build the full string from resolved + scrambling characters and set el.innerHTML

chars = "!<>-_\\/[]{}—=+*^?#________";

The ________ padding biases toward blank space — slowing visible scrambling near the end for a natural feel.

Trigger modes

Auto-plays on load
Hover to re-trigger
Cycles through multiple phrases with a delay