Scramble decode

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/text-fx/text-scramble-decode.html
  Desc   : Letters cycle through random glyphs, then lock into place
  ============================================================
-->
<div class="sg-text-scramble-decode" style="--sg-color:#7F77DD; --sg-size:22px;">
  <span class="sg-text-scramble-decode-txt">ACCESS GRANTED_</span>
</div>
<script>
  document.querySelectorAll('.sg-text-scramble-decode:not([data-sg-init])').forEach(function (root) {
    root.setAttribute('data-sg-init', '');
    var el = root.querySelector('.sg-text-scramble-decode-txt');
    var goal = el.textContent;
    var pool = '!<>-_\\/[]{}=+*^?#@$%&';
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    (function play() {
      var locked = 0;
      var timer = setInterval(function () {
        var out = goal.slice(0, Math.floor(locked));
        for (var i = out.length; i < goal.length; i++) {
          out += goal[i] === ' ' ? ' ' : pool[(Math.random() * pool.length) | 0];
        }
        el.textContent = out;
        locked += 0.4;
        if (locked >= goal.length + 1) {
          clearInterval(timer);
          el.textContent = goal;
          setTimeout(play, 2400);
        }
      }, 40);
    })();
  });
</script>
<style>
  .sg-text-scramble-decode {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--sg-size);
    font-weight: 600;
    color: var(--sg-color);
    letter-spacing: 0.06em;
  }
</style>