Ripple invert cursor

Build "Ripple invert cursor" for my site using the Enrichr Library element at https://enrichr.dev/elements/invert-ripple-cursor.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/invert-ripple-cursor.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:
- title: Invert
- subtitle: Move the pointer fast to ripple
- size: 200
- ripple: 600
- smoothing: 1
- spin: 0.3
- background: #ffffff
- textColor: #000000

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

<div class="ef-irc"><div class="ef-irc__zone"><h2 class="ef-irc__t"></h2><p class="ef-irc__s"></p><div class="ef-irc__blob" aria-hidden="true"></div></div></div>

/* Enrichr Library · https://enrichr.dev */
.ef-irc__zone { position: relative; isolation: isolate; overflow: hidden; min-height: 20rem; padding: 2rem 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 1rem; touch-action: pan-y; container-type: inline-size; }
.ef-irc .ef-irc__t { margin: 0; font-size: clamp(2.6rem, 13vw, 8rem); font-size: clamp(2.6rem, 17cqi, 8rem); font-weight: 900; line-height: 1; letter-spacing: -0.05em; text-transform: uppercase; overflow-wrap: anywhere; }
.ef-irc .ef-irc__s { margin: 1rem 0 0; opacity: 1; font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: 500; }
.ef-irc__blob { position: absolute; left: 0; top: 0; z-index: 2; width: var(--ef-size, 200px); height: var(--ef-size, 200px); border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; will-change: transform; }

// Enrichr Library · https://enrichr.dev
// Ripple invert cursor: a big white circle follows the pointer and inverts the colours beneath it (mix-blend-mode: difference).
// Move fast and its edge ripples like liquid: an SVG turbulence + displacement filter whose strength follows pointer speed, then settles.
// mount(root, { title, subtitle, size (px), ripple (max distortion 0-600), smoothing (0.05-1, 1 = no lag), spin (degrees per frame), background, textColor })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var zone = root.querySelector(".ef-irc__zone"), blob = root.querySelector(".ef-irc__blob");
  var title = root.querySelector(".ef-irc__t"), sub = root.querySelector(".ef-irc__s");
  var NS = "http://www.w3.org/2000/svg", id = "ef-irc-" + Math.random().toString(36).slice(2, 8);
  var svg = document.createElementNS(NS, "svg"), f = document.createElementNS(NS, "filter");
  var turb = document.createElementNS(NS, "feTurbulence"), disp = document.createElementNS(NS, "feDisplacementMap");
  svg.setAttribute("aria-hidden", "true"); svg.setAttribute("width", "0"); svg.setAttribute("height", "0");
  svg.style.cssText = "position:absolute;width:0;height:0;pointer-events:none";
  f.setAttribute("id", id); f.setAttribute("x", "-50%"); f.setAttribute("y", "-50%"); f.setAttribute("width", "200%"); f.setAttribute("height", "200%");
  turb.setAttribute("type", "fractalNoise"); turb.setAttribute("baseFrequency", "0.015"); turb.setAttribute("numOctaves", "1"); turb.setAttribute("result", "noise");
  disp.setAttribute("in", "SourceGraphic"); disp.setAttribute("in2", "noise"); disp.setAttribute("scale", "0");
  disp.setAttribute("xChannelSelector", "R"); disp.setAttribute("yChannelSelector", "G");
  f.appendChild(turb); f.appendChild(disp); svg.appendChild(f); zone.appendChild(svg);

  var opts = {}, raf = 0, visible = true, io = null, ro = null, placed = false;
  var tx = 0, ty = 0, x = 0, y = 0, lx = 0, ly = 0, scale = 0, target = 0, angle = 0, shown = -1;

  function center() { if (placed) return; tx = x = lx = zone.clientWidth / 2; ty = y = ly = zone.clientHeight / 2; }
  function paint() {
    blob.style.transform = "translate3d(" + x.toFixed(1) + "px," + y.toFixed(1) + "px,0) translate(-50%,-50%) rotate(" + angle.toFixed(1) + "deg)";
    var s = Math.round(scale);
    if (s !== shown) { shown = s; disp.setAttribute("scale", String(s)); blob.style.filter = s > 0 ? "url(#" + id + ")" : ""; }
  }
  function frame() {
    raf = 0;
    if (!visible) return;
    var k = reduce ? 1 : opts.smoothing;
    x += (tx - x) * k;
    y += (ty - y) * k;
    var dx = x - lx, dy = y - ly;
    lx = x; ly = y;
    var speed = Math.sqrt(dx * dx + dy * dy);
    target = reduce ? 0 : Math.min(speed * 20, opts.ripple);
    scale += (target - scale) * 0.05;
    if (!reduce) angle = (angle + opts.spin) % 360;
    paint();
    var moving = Math.abs(tx - x) > 0.3 || Math.abs(ty - y) > 0.3 || scale > 0.5 || target > 0;
    if (moving) raf = requestAnimationFrame(frame);
    else if (scale !== 0) { scale = 0; paint(); }
  }
  function wake() { if (!raf && visible) raf = requestAnimationFrame(frame); }
  function move(e) {
    var r = zone.getBoundingClientRect();
    tx = e.clientX - r.left;
    ty = e.clientY - r.top;
    if (!placed) { placed = true; if (reduce) { x = lx = tx; y = ly = ty; } }
    wake();
  }
  function update(next) {
    opts = Object.assign({ title: "Invert", subtitle: "Move the pointer fast to ripple", size: 200, ripple: 600, smoothing: 1, spin: 0.3, background: "#ffffff", textColor: "#000000" }, opts, next || {});
    opts.size = Number(opts.size); opts.ripple = Number(opts.ripple); opts.smoothing = Math.max(0.02, Math.min(1, Number(opts.smoothing))); opts.spin = Number(opts.spin);
    zone.style.background = opts.background;
    zone.style.color = opts.textColor;
    title.style.color = sub.style.color = opts.textColor;
    zone.style.setProperty("--ef-size", opts.size + "px");
    title.textContent = opts.title;
    sub.textContent = opts.subtitle;
    sub.hidden = !opts.subtitle;
    center();
    paint();
  }
  update(o);
  zone.addEventListener("pointermove", move);
  zone.addEventListener("pointerdown", move);
  if ("ResizeObserver" in window) { ro = new ResizeObserver(function () { center(); paint(); }); ro.observe(zone); }
  if ("IntersectionObserver" in window) { io = new IntersectionObserver(function (e) { visible = e[0].isIntersecting; if (visible) wake(); }); io.observe(zone); }
  return {
    update: update,
    destroy: function () {
      cancelAnimationFrame(raf); raf = 0;
      if (io) io.disconnect(); if (ro) ro.disconnect();
      zone.removeEventListener("pointermove", move); zone.removeEventListener("pointerdown", move);
      if (svg.parentNode) svg.parentNode.removeChild(svg);
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"title":"Invert","subtitle":"Move the pointer fast to ripple","size":200,"ripple":600,"smoothing":1,"spin":0.3,"background":"#ffffff","textColor":"#000000"});