Text Scramble

Letters churn through random glyphs and lock into place one by one, like a decoder cracking a message. Cycle through phrases or replay it on hover.

How to use it

Paste the snippet just before </head>.
Add data-text-scramble to a heading, or give it phrases separated by | to cycle through.

Options

Add any of these attributes to the same element.

`data-text-scramble="A\|B\|C"`	Phrases to scramble between in turn.
`data-trigger="hover"`	Scramble when the pointer arrives instead of on scroll.
`data-duration`	Time to resolve the text. Default 1200 ms.
`data-hold`	How long each phrase stays. Default 1800 ms.
`data-chars`	Glyphs to churn through. Default symbols and digits.

Looks best in a monospaced font, where the width doesn’t change while it churns.

1 · Snippet

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundles/anime.umd.min.js"></script>
<script>
  (function () {
    // Text Scramble: letters churn through random glyphs and lock into place one
    // by one, like a decoder cracking the message.
    // Usage: <h1 data-text-scramble>Access granted</h1>
    //    or: <h1 data-text-scramble="Decode|Decrypt|Deliver"></h1>  (cycles phrases)
    // Optional: data-trigger="hover" (scramble when the pointer arrives),
    // data-duration (ms), data-hold (ms per phrase), data-chars (glyphs to use).
    var DEFAULTS = { duration: 1200, hold: 1800, chars: '!<>-_\\/[]{}=+*^?#%&@01' };

    var css = '.tsx-glyph{opacity:.45}';
    var style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);

    function escapeHtml(s) {
      return s.replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; });
    }

    function setup(el) {
      var list = el.getAttribute('data-text-scramble');
      var phrases = (list ? list.split('|') : [el.textContent]).map(function (p) { return p.replace(/\s+/g, ' ').trim(); }).filter(Boolean);
      el.setAttribute('aria-label', phrases.join(', '));
      var out = document.createElement('span');
      out.setAttribute('aria-hidden', 'true');
      out.textContent = phrases[0];
      el.textContent = '';
      el.appendChild(out);
      return { el: el, out: out, phrases: phrases, current: phrases[0], anim: null };
    }

    // Scramble from whatever is showing to `to`.
    function scramble(s, to, done) {
      var d = s.el.dataset;
      var chars = d.chars || DEFAULTS.chars;
      var from = s.current;
      var len = Math.max(from.length, to.length);
      var plan = [];
      for (var i = 0; i < len; i++) {
        // Each letter starts churning a bit after the one before and locks a
        // random moment later, so it resolves roughly left to right.
        var start = (i / len) * 0.45 + Math.random() * 0.15;
        plan.push({ from: from[i] || '', to: to[i] || '', start: start, end: start + 0.25 + Math.random() * 0.3 });
      }
      if (s.anim) s.anim.pause();
      var state = { p: 0 };
      s.anim = anime.animate(state, {
        p: 1,
        duration: +d.duration || DEFAULTS.duration,
        ease: 'linear',
        onUpdate: function () {
          var html = '';
          plan.forEach(function (c) {
            if (state.p >= c.end) html += escapeHtml(c.to);
            else if (state.p >= c.start && c.to !== ' ') html += '<span class="tsx-glyph">' + escapeHtml(chars[Math.floor(Math.random() * chars.length)]) + '</span>';
            else html += escapeHtml(c.from);
          });
          s.out.innerHTML = html;
        },
        onComplete: function () {
          s.out.textContent = to;
          s.current = to;
          if (done) done();
        }
      });
    }

    function init() {
      var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
          if (!e.isIntersecting) return;
          io.unobserve(e.target);
          var s = e.target._tsx;
          var i = 0;
          var hold = +s.el.dataset.hold || DEFAULTS.hold;
          s.current = '';
          (function next() {
            scramble(s, s.phrases[i], s.phrases.length > 1 ? function () {
              i = (i + 1) % s.phrases.length;
              setTimeout(next, hold);
            } : null);
          })();
        });
      }, { threshold: 0.4 });
      document.querySelectorAll('[data-text-scramble]').forEach(function (el) {
        if (el._tsx) return;
        var s = (el._tsx = setup(el));
        if (reduced) return;
        if (el.dataset.trigger === 'hover') {
          el.addEventListener('mouseenter', function () { s.current = s.phrases[0]; scramble(s, s.phrases[0]); });
        } else {
          s.out.textContent = '';
          io.observe(el);
        }
      });
    }

    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
    else init();
  })();
</script>

2 · Your HTML

<h1 data-text-scramble>Access granted</h1>

<!-- on hover, e.g. a nav link: -->
<a href="/work" data-text-scramble data-trigger="hover">Work</a>