spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/text-fx/text-scramble-decode.html7  Desc   : Letters cycle through random glyphs, then lock into place8  ============================================================9-->10<!--svgarden11title: Scramble decode12slug: text-scramble-decode13category: text-fx14tags: [text, scramble, decode, js]15difficulty: advanced16techniques: [minimal-js, setInterval-render-loop, prefers-reduced-motion, monospace-stability]17how_it_works: >18  A single interval re-renders the string every 40 ms: characters left of a19  "locked" cursor show the real message, everything to the right is drawn fresh20  from a pool of glitch glyphs, and the cursor advances a fraction of a letter21  per frame so the decode sweeps left to right. The font must be monospace —22  with proportional glyphs the line would jitter horizontally on every frame.23  The script checks prefers-reduced-motion and, when set, skips the scramble24  entirely so motion-sensitive visitors just see the final text; the markup25  also contains the real sentence, so nothing breaks with JavaScript disabled.26customizable:27  - { var: "--sg-color", label: "Color",     type: color, default: "#7F77DD" }28  - { var: "--sg-size",  label: "Font size", type: range, min: 12, max: 40, default: 22, unit: px }29created: 2026-08-1030-->31<div class="sg-text-scramble-decode" style="--sg-color:#7F77DD; --sg-size:22px;">32  <span class="sg-text-scramble-decode-txt">ACCESS GRANTED_</span>33</div>34<script>35  document.querySelectorAll('.sg-text-scramble-decode:not([data-sg-init])').forEach(function (root) {36    root.setAttribute('data-sg-init', '');37    var el = root.querySelector('.sg-text-scramble-decode-txt');38    var goal = el.textContent;39    var pool = '!<>-_\\/[]{}=+*^?#@$%&';40    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;41    (function play() {42      var locked = 0;43      var timer = setInterval(function () {44        var out = goal.slice(0, Math.floor(locked));45        for (var i = out.length; i < goal.length; i++) {46          out += goal[i] === ' ' ? ' ' : pool[(Math.random() * pool.length) | 0];47        }48        el.textContent = out;49        locked += 0.4;50        if (locked >= goal.length + 1) {51          clearInterval(timer);52          el.textContent = goal;53          setTimeout(play, 2400);54        }55      }, 40);56    })();57  });58</script>59<style>60  .sg-text-scramble-decode {61    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;62    font-size: var(--sg-size);63    font-weight: 600;64    color: var(--sg-color);65    letter-spacing: 0.06em;66  }67</style>68