Jiggle cursor dot

Build "Jiggle cursor dot" for my site using the Enrichr Library element at https://enrichr.dev/elements/jiggle-cursor-dot.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/jiggle-cursor-dot.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:
- color: #e6ff55
- opacity: 0.6
- size: 20
- jiggle: 20
- spin: 0.3
- blend: lighten
- idle: on
- background: #0c1e18

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

<div class="ef-jcd" role="img" aria-label="A lime dot that follows the pointer and wobbles like jelly when it moves fast">
  <div class="ef-jcd__dot" aria-hidden="true"></div>
  <svg class="ef-jcd__defs" width="0" height="0" aria-hidden="true" focusable="false"><defs><filter><feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="1" result="noise"></feTurbulence><feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap></filter></defs></svg>
</div>

/* Enrichr Library · https://enrichr.dev */
.ef-jcd { position: relative; width: 100%; height: 100%; min-height: 24rem; overflow: hidden; border-radius: 1rem; background: #0c1e18; touch-action: pan-y; }
.ef-jcd .ef-jcd__dot { position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #e6ff55; opacity: 0.6; mix-blend-mode: lighten; box-shadow: 0 0 10px #e6ff5588; pointer-events: none; will-change: transform; transform: translate(-50%, -50%); }
.ef-jcd .ef-jcd__defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

// Enrichr Library · https://enrichr.dev
// Jiggle cursor dot: a soft, see-through dot sits exactly on the pointer and spins slowly (0.3 degrees a frame). It wears
// an SVG filter: low-frequency fractal noise (feTurbulence) drives a displacement map, so when the scale is above zero the
// dot's edge warps like jelly. The scale is the distance the pointer moved since the last frame times the jiggle amount,
// capped at 600, eased in at 0.05 per frame, so a quick flick makes the dot wobble and break up, then it calms back to a
// clean circle. With idle on, a virtual pointer darts between random spots while no one is pointing. Reduced motion keeps
// the dot on the pointer but drops the wobble, the spin and the idle darts. The loop pauses off screen and in hidden tabs.
// mount(root, { color, opacity, size (px), jiggle (wobble per pixel moved), spin (degrees per frame),
//               blend (CSS blend mode), idle (on | off), background })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var wrap = root.querySelector(".ef-jcd");
  var dot = root.querySelector(".ef-jcd__dot");
  var filter = root.querySelector(".ef-jcd__defs filter");
  var disp = root.querySelector(".ef-jcd__defs feDisplacementMap");
  var uid = "ef-jcd-" + Math.random().toString(36).slice(2, 8);
  var opts = {}, raf = 0, visible = true, io = null, ro = null, destroyed = false, last = 0;
  var W = 1, H = 1, mouseX = 0, mouseY = 0, lastX = 0, lastY = 0, moved = false;
  var currentScale = 0, targetScale = 0, rotationAngle = 0, shownScale = -1;
  var inside = false, lastReal = -1e9, dart = null, rest = 0.8;

  function num(v, d) { v = Number(v); return isFinite(v) ? v : d; }
  filter.id = uid;
  filter.setAttribute("x", "-10%"); filter.setAttribute("y", "-10%"); filter.setAttribute("width", "120%"); filter.setAttribute("height", "120%");

  function place() {
    dot.style.transform = "translate(calc(" + mouseX + "px - 50%), calc(" + mouseY + "px - 50%)) rotate(" + rotationAngle + "deg)";
  }
  function setScale(s) {
    // skip the attribute write (and the filter repaint) when nothing visible changed
    if (Math.abs(s - shownScale) < 0.01) return;
    shownScale = s; disp.setAttribute("scale", s);
  }

  // idle demo: dart to a random spot on a sine in-out curve, rest, repeat
  function idle(now, dt) {
    if (opts.idle !== "on" || inside || now - lastReal < 1500) { dart = null; return; }
    if (!dart) {
      rest -= dt;
      if (rest > 0) return;
      dart = { t: 0, d: 0.5 + Math.random() * 0.45, x0: mouseX, y0: mouseY, x1: W * (0.15 + Math.random() * 0.7), y1: H * (0.15 + Math.random() * 0.7) };
    }
    dart.t += dt / dart.d;
    var p = Math.min(1, dart.t), e = (1 - Math.cos(Math.PI * p)) / 2;
    mouseX = dart.x0 + (dart.x1 - dart.x0) * e; mouseY = dart.y0 + (dart.y1 - dart.y0) * e;
    if (p >= 1) { dart = null; rest = 0.4 + Math.random() * 0.9; }
  }

  function loop(now) {
    raf = requestAnimationFrame(loop);
    var dt = Math.min(0.1, (now - last) / 1000 || 0); last = now;
    if (!visible || document.hidden) return;
    idle(now, dt);
    rotationAngle += opts.spin;
    place();
    var dx = mouseX - lastX, dy = mouseY - lastY;
    var velocity = Math.sqrt(dx * dx + dy * dy);
    targetScale = Math.min(velocity * opts.jiggle, 600);
    currentScale += (targetScale - currentScale) * 0.05;
    setScale(currentScale);
    lastX = mouseX; lastY = mouseY;
  }

  function onMove(e) {
    var r = wrap.getBoundingClientRect();
    inside = true; lastReal = performance.now(); moved = true; dart = null;
    mouseX = e.clientX - r.left; mouseY = e.clientY - r.top;
    if (reduce) place();
  }
  function onEnter() { inside = true; lastReal = performance.now(); }
  function onLeave() { inside = false; lastReal = performance.now(); }

  function size() {
    W = Math.max(1, wrap.clientWidth); H = Math.max(1, wrap.clientHeight);
    if (!moved) { mouseX = lastX = W / 2; mouseY = lastY = H / 2; } // the original starts in the middle of the page
    else { mouseX = Math.min(mouseX, W); mouseY = Math.min(mouseY, H); }
    place();
  }
  function update(partial) {
    opts = Object.assign({ color: "#e6ff55", opacity: 0.6, size: 20, jiggle: 20, spin: 0.3, blend: "lighten", idle: "on", background: "#0c1e18" }, opts, partial || {});
    opts.opacity = Math.min(1, Math.max(0, num(opts.opacity, 0.6))); opts.size = Math.max(1, num(opts.size, 20));
    opts.jiggle = Math.max(0, num(opts.jiggle, 20)); opts.spin = num(opts.spin, 0.3);
    var c = /^#[0-9a-f]{6}$/i.test(opts.color) ? opts.color : "#e6ff55";
    dot.style.background = c;
    dot.style.boxShadow = "0 0 10px " + c + "88";
    dot.style.opacity = opts.opacity;
    dot.style.width = dot.style.height = opts.size + "px";
    dot.style.mixBlendMode = opts.blend;
    dot.style.filter = reduce ? "none" : "url(#" + uid + ")";
    wrap.style.background = opts.background;
    if (!destroyed) place();
  }

  update(o);
  size();
  wrap.addEventListener("pointermove", onMove, { passive: true });
  wrap.addEventListener("pointerdown", onMove, { passive: true });
  wrap.addEventListener("pointerenter", onEnter);
  wrap.addEventListener("pointerleave", onLeave);
  if (!reduce) {
    if ("IntersectionObserver" in window) { io = new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }); io.observe(wrap); }
    last = performance.now(); lastReal = last - 700; // a short pause before the first idle dart
    raf = requestAnimationFrame(loop);
  }
  if ("ResizeObserver" in window) { ro = new ResizeObserver(function () { if (!destroyed) size(); }); ro.observe(wrap); }
  return {
    update: update,
    destroy: function () {
      destroyed = true; cancelAnimationFrame(raf);
      wrap.removeEventListener("pointermove", onMove);
      wrap.removeEventListener("pointerdown", onMove);
      wrap.removeEventListener("pointerenter", onEnter);
      wrap.removeEventListener("pointerleave", onLeave);
      if (io) io.disconnect();
      if (ro) ro.disconnect();
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"color":"#e6ff55","opacity":0.6,"size":20,"jiggle":20,"spin":0.3,"blend":"lighten","idle":"on","background":"#0c1e18"});