Text trail on mousemove

Build "Text trail on mousemove" for my site using the Enrichr Library element at https://enrichr.dev/elements/text-trail-mousemove.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/text-trail-mousemove.json (markup, CSS, JavaScript, parameters).
Requirements: vanilla JavaScript and CSS, no new dependencies; keep the behaviour of the source unchanged; respect prefers-reduced-motion; work on touch screens; keep it accessible.

Settings:
- accent: #e6ff55
- words: Make,Move,Motion,Trail
- spacing: 46
- life: 1400
- size: 44

Verify: reduced motion shows no movement, it works at 375px wide, there are no console errors, and scrolling stays smooth.

<div class="ef-ttm">
  <div class="ef-ttm__stage" tabindex="0">
    <p class="ef-ttm__hint">Move your pointer</p>
    <div class="ef-ttm__layer" aria-hidden="true"></div>
  </div>
</div>

/* Enrichr Library · https://enrichr.dev */
.ef-ttm { width: 100%; }
.ef-ttm__stage { position: relative; box-sizing: border-box; width: 100%; min-height: 20rem; border-radius: 1rem; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: pan-y; cursor: crosshair; outline: none; }
.ef-ttm__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--ef-acc, #e6ff55); }
.ef-ttm__hint { margin: 0; position: relative; z-index: 0; color: #fbf8f1; opacity: 0.35; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; pointer-events: none; transition: opacity 300ms; }
.ef-ttm__layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ef-ttm__w { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--ef-acc, #e6ff55); opacity: 0; will-change: transform, opacity; }
.ef-ttm__w.is-alt { color: #fbf8f1; }

// Enrichr Library · https://enrichr.dev
// Text trail on mousemove: words spawn along the pointer path, spin as they drift and fade out. Spawns are spaced by distance travelled, not time, so fast and slow moves are evenly dotted.
// A pooled set of spans is recycled by one rAF loop that only runs while words are alive or the idle demo is playing. When the pointer is idle (or the stage has keyboard focus) a gentle demo path plays. Reduced motion: no trail, only a static word.
// mount(root, { background, accent, words (comma list), spacing (px), life (ms), size (px), rotate (deg) })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var stage = root.querySelector(".ef-ttm__stage");
  var layer = root.querySelector(".ef-ttm__layer");
  var hint = root.querySelector(".ef-ttm__hint");
  var opts = {}, pool = [], live = [], list = ["Move"], wi = 0, raf = 0, dead = false;
  var lastX = null, lastY = null, acc = 0, lastMove = 0, focused = false, MAX = 40, IDLE = 1800;

  function make() {
    var s = document.createElement("span"); s.className = "ef-ttm__w"; layer.appendChild(s);
    return { el: s, x: 0, y: 0, r: 0, spin: 0, born: 0, dx: 0, dy: 0 };
  }
  function spawn(x, y, ux, uy) {
    var w = pool.pop() || (live.length < MAX ? make() : live.shift());
    wi++;
    w.el.textContent = list[wi % list.length];
    w.el.classList.toggle("is-alt", wi % 4 === 0);
    w.el.style.fontSize = opts.size + "px";
    w.x = x; w.y = y; w.born = performance.now();
    w.r = (Math.random() * 2 - 1) * opts.rotate * 0.4;
    w.spin = (Math.random() < 0.5 ? -1 : 1) * opts.rotate * (0.5 + Math.random() * 0.5);
    w.dx = ux * 18; w.dy = uy * 18 - 14;
    live.push(w);
  }
  function move(x, y) {
    if (lastX !== null) {
      var dx = x - lastX, dy = y - lastY, d = Math.sqrt(dx * dx + dy * dy);
      acc += d;
      if (acc >= opts.spacing) { spawn(x, y, dx / (d || 1), dy / (d || 1)); acc = 0; }
    }
    lastX = x; lastY = y;
  }
  function tick(now) {
    raf = 0;
    if (dead) return;
    if (now - lastMove > IDLE || focused) {
      var r = stage.getBoundingClientRect(), t = now / 900;
      move(r.width / 2 + Math.cos(t) * r.width * 0.32, r.height / 2 + Math.sin(t * 1.7) * r.height * 0.28);
    }
    for (var i = live.length - 1; i >= 0; i--) {
      var w = live[i], p = (now - w.born) / opts.life;
      if (p >= 1) { w.el.style.opacity = "0"; live.splice(i, 1); pool.push(w); continue; }
      var e = 1 - Math.pow(1 - p, 3), a = p < 0.12 ? p / 0.12 : 1 - (p - 0.12) / 0.88;
      w.el.style.opacity = a.toFixed(3);
      w.el.style.transform = "translate(" + (w.x + w.dx * e).toFixed(1) + "px," + (w.y + w.dy * e).toFixed(1) + "px) translate(-50%,-50%) rotate(" + (w.r + w.spin * e).toFixed(1) + "deg) scale(" + (0.7 + 0.5 * Math.min(1, p * 3)).toFixed(3) + ")";
    }
    raf = requestAnimationFrame(tick);
  }
  function onMove(e) {
    var r = stage.getBoundingClientRect(), now = performance.now();
    if (now - lastMove > IDLE) { lastX = null; acc = 0; }
    lastMove = now;
    hint.style.opacity = "0";
    move(e.clientX - r.left, e.clientY - r.top);
  }
  function onLeave() { lastX = null; acc = 0; lastMove = performance.now() - IDLE + 400; }
  function onFocus() { focused = true; lastX = null; }
  function onBlur() { focused = false; lastX = null; }
  function update(next) {
    opts = Object.assign({ background: "#0c1e18", accent: "#e6ff55", words: "Make,Move,Motion,Trail", spacing: 46, life: 1400, size: 44, rotate: 60 }, opts, next || {});
    stage.style.background = opts.background;
    stage.style.setProperty("--ef-acc", opts.accent);
    list = String(opts.words).split(",").map(function (s) { return s.trim(); }).filter(Boolean);
    if (!list.length) list = ["Move"];
    if (reduce) hint.textContent = list[0];
  }
  update(o);
  if (!reduce) {
    stage.addEventListener("pointermove", onMove);
    stage.addEventListener("pointerleave", onLeave);
    stage.addEventListener("focus", onFocus);
    stage.addEventListener("blur", onBlur);
    lastMove = performance.now() - IDLE;
    raf = requestAnimationFrame(tick);
  } else {
    hint.style.opacity = "0.8"; hint.style.fontSize = opts.size + "px"; hint.style.textTransform = "none"; hint.style.letterSpacing = "-0.02em"; hint.style.fontWeight = "800";
  }
  return {
    update: function (n) { update(n); if (reduce) hint.style.fontSize = opts.size + "px"; },
    destroy: function () {
      dead = true;
      if (raf) cancelAnimationFrame(raf); raf = 0;
      stage.removeEventListener("pointermove", onMove); stage.removeEventListener("pointerleave", onLeave);
      stage.removeEventListener("focus", onFocus); stage.removeEventListener("blur", onBlur);
      layer.textContent = ""; pool = []; live = [];
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"accent":"#e6ff55","words":"Make,Move,Motion,Trail","spacing":46,"life":1400,"size":44});