AW-Flow — Hover ScrambleAW-Flow — Hover Scramble

<!-- AW-Flow — Hover Scramble · класс элемента: awf-text-hover-scramble -->
<style>
.awf-text-hover-scramble {
  --awf-duration: 380ms;
  --awf-stagger: 24ms;
  --awf-noise: #7c5cff;
}
.awf-text-hover-scramble .awf-w { display: inline-block; white-space: nowrap; }
.awf-text-hover-scramble .awf-p { display: inline-block; text-align: center; }
.awf-text-hover-scramble .awf-p.awf-noise { color: var(--awf-noise); }
</style>
<script>
(function () {
  var CLS = 'awf-text-hover-scramble';
  var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
  var SET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  function rnd() { return SET.charAt(Math.floor(Math.random() * SET.length)); }
  function num(el, name) { return parseFloat(getComputedStyle(el).getPropertyValue(name)) || 0; }
  function split(el, mode) {
    var root = el.querySelector('.tn-atom') || el;
    var parts = [];
    (function walk(node) {
      [].slice.call(node.childNodes).forEach(function (n) {
        if (n.nodeType === 1) { if (n.tagName !== 'BR') walk(n); return; }
        if (n.nodeType !== 3 || !n.textContent.trim()) return;
        var frag = document.createDocumentFragment();
        n.textContent.split(/(\s+)/).forEach(function (chunk) {
          if (!chunk) return;
          if (/^\s+$/.test(chunk)) { frag.appendChild(document.createTextNode(chunk)); return; }
          var w = document.createElement('span');
          w.className = 'awf-w';
          if (mode === 'chars') {
            Array.from(chunk).forEach(function (ch) {
              var c = document.createElement('span');
              c.className = 'awf-p'; c.textContent = ch; c._ch = ch;
              w.appendChild(c); parts.push(c);
            });
          } else if (mode === 'mask') {
            var inner = document.createElement('span');
            inner.className = 'awf-p'; inner.textContent = chunk;
            w.appendChild(inner); parts.push(inner);
          } else {
            w.className += ' awf-p'; w.textContent = chunk; parts.push(w);
          }
          frag.appendChild(w);
        });
        node.replaceChild(frag, n);
      });
    })(root);
    parts.forEach(function (p, i) { p.style.setProperty('--i', i); });
    return parts;
  }
  function measure(parts) {
    parts.forEach(function (p) { p.style.width = ''; });
    parts.forEach(function (p) { p.style.width = p.getBoundingClientRect().width + 'px'; });
  }
  function run(el) {
    if (el._raf) return;
    var parts = el._parts, dur = num(el, '--awf-duration'), step = num(el, '--awf-stagger');
    var start = performance.now(), last = 0;
    (function tick(now) {
      var t = now - start, done = true, swap = now - last > 50;
      if (swap) last = now;
      parts.forEach(function (p, i) {
        if (t < i * step + dur) {
          done = false;
          p.classList.add('awf-noise');
          if (swap) p.textContent = rnd();
        } else if (p.classList.contains('awf-noise')) {
          p.classList.remove('awf-noise');
          p.textContent = p._ch;
        }
      });
      el._raf = done ? 0 : requestAnimationFrame(tick);
    })(start);
  }
  function init() {
    if (reduce) return;
    [].forEach.call(document.querySelectorAll('.' + CLS), function (el) {
      if (el.getAttribute('data-awf')) return;
      el.setAttribute('data-awf', '1');
      el._parts = split(el, 'chars');
      measure(el._parts);
      el.addEventListener('mouseenter', function () { run(el); });
      var t;
      window.addEventListener('resize', function () { clearTimeout(t); t = setTimeout(function () { if (!el._raf) measure(el._parts); }, 150); });
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>