Scramble Text

<!-- Scramble Text — scrambles through random chars before resolving -->
<span class="nuda-scramble" data-nuda-scramble="SCRAMBLE">SCRAMBLE</span>

/* ── Scramble Text ───────────────────────────────────────────
   The effect is JS-driven; CSS handles the base styling.
   Customize:
     --nuda-scr-font   : font family (monospace recommended)
     --nuda-scr-size   : font size
   ──────────────────────────────────────────────────────────── */
.nuda-scramble {
  --nuda-scr-font: monospace;
  --nuda-scr-size: 1.8rem;

  font-family: var(--nuda-scr-font);
  font-size: var(--nuda-scr-size);
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
}

/* ── Scramble Text — vanilla JS ──────────────────────────────
   Scrambles each character through random glyphs before
   resolving to the final text. Respects reduced-motion.
   ──────────────────────────────────────────────────────────── */
;(function () {
  /* Bail out if the user prefers reduced motion */
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*";

  document.querySelectorAll("[data-nuda-scramble]").forEach(function (el) {
    var finalText = el.getAttribute("data-nuda-scramble") || el.textContent;
    var iterations = 0;
    var speed = 40;      /* ms per frame */
    var resolveAt = 3;   /* frames per character before it locks */

    var interval = setInterval(function () {
      el.textContent = finalText
        .split("")
        .map(function (char, i) {
          if (i < Math.floor(iterations / resolveAt)) return finalText[i];
          return chars[Math.floor(Math.random() * chars.length)];
        })
        .join("");

      iterations++;
      if (iterations >= finalText.length * resolveAt) clearInterval(interval);
    }, speed);
  });
})();