Text Scramble

<span class="scramble font-mono text-xl font-semibold text-gray-900 dark:text-gray-100" data-text="DECRYPTING SIGNAL">DECRYPTING SIGNAL</span>

<script>
  (function () {
    var el = document.querySelector('.scramble');
    if (!el) return;
    var text = el.getAttribute('data-text') || '';
    var chars = '!<>-_\\/[]{}-=+*^?#';
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { el.textContent = text; return; }
    var revealed = 0, frame = 0;
    var id = setInterval(function () {
      frame++;
      if (frame % 3 === 0) revealed++;
      var out = '';
      for (var i = 0; i < text.length; i++) {
        out += i < revealed || text[i] === ' ' ? text[i] : chars[Math.floor(Math.random() * chars.length)];
      }
      el.textContent = out;
      if (revealed >= text.length) clearInterval(id);
    }, 40);
  })();
</script>