Dot matrix pulse

Build "Dot matrix pulse" for my site using the Enrichr Library element at https://enrichr.dev/elements/dot-matrix-pulse.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/dot-matrix-pulse.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:
- spacing: 42
- size: 3.5
- swell: 4.2
- speed: 0.9
- highlights: 25
- dot: #e6ff55
- hot: #fbf8f1
- rim: #1a7a4c
- 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-dm"><canvas class="ef-dm__c" role="img" aria-label="A grid of glowing dots that swell and fade in a slow ripple out from the centre, then settle back"></canvas></div>

/* Enrichr Library · https://enrichr.dev */
.ef-dm { position: relative; width: 100%; min-height: 20rem; overflow: hidden; border-radius: 1rem; background: #0c1e18; }
.ef-dm__c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

// Enrichr Library · https://enrichr.dev
// Dot matrix pulse: a grid of glowing dots that swell and fade in a slow ripple out from the centre, then ease back, on a
// seamless loop. Each dot starts by its distance from the centre plus a random offset, and has its own duration, size and
// fade. The whole timeline plays forward, then in reverse, on a sine in-out curve (a yoyo timeline), so the loop has no
// seam. About one dot in four is a hotter highlight dot. Dots are drawn from cached sprites that hold the gradient and glow.
// Reduced motion draws one still frame from the middle of the ripple. The loop pauses off screen and in hidden tabs.
// mount(root, { spacing (px), size (rest radius, px), swell (extra growth), speed, highlights (% of dots),
//               dot (dot and glow colour), hot (highlight core), rim (dot edges), background })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var wrap = root.querySelector(".ef-dm");
  var canvas = root.querySelector(".ef-dm__c");
  var ctx = canvas.getContext("2d");
  var opts = {}, raf = 0, visible = true, io = null, ro = null, destroyed = false, last = 0, clock = 0;
  var W = 1, H = 1, dpr = 1, dots = [], total = 1, sprites = {};
  var cDot = [230, 255, 85], cHot = [251, 248, 241], cRim = [26, 122, 76];
  var PAD = 12; // room around each sprite for the glow (8px blur)

  function hex(h, d) { var m = /^#?([0-9a-f]{6})$/i.exec(h || ""); var v = parseInt(m ? m[1] : d, 16); return [v >> 16, (v >> 8) & 255, v & 255]; }
  function rgba(c, a) { return "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + a + ")"; }
  function shade(c, k) { return [Math.round(c[0] * k), Math.round(c[1] * k), Math.round(c[2] * k)]; }
  function num(v, d) { v = Number(v); return isFinite(v) ? v : d; }
  // stable random number in [0, 1) for a grid position counted from the centre, so a resize keeps the pattern
  function rand(i, j, salt) {
    var h = Math.imul(i + 7919 * salt, 374761393) ^ Math.imul(j - 104729 * salt, 668265263);
    h = Math.imul(h ^ (h >>> 13), 1274126177);
    return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
  }

  // one sprite per dot kind and half-pixel radius: the radial gradient with its glow, drawn once and reused every frame
  function sprite(hot, r) {
    var q = Math.max(0.5, Math.round(r * 2) / 2), key = (hot ? "h" : "d") + q;
    if (sprites[key]) return sprites[key];
    var half = q + PAD, px = Math.max(2, Math.ceil(half * 2 * dpr)), k = px / (half * 2);
    var c = document.createElement("canvas"); c.width = c.height = px;
    var g = c.getContext("2d");
    g.setTransform(k, 0, 0, k, 0, 0);
    var grad = g.createRadialGradient(half, half, 0, half, half, q);
    if (hot) { grad.addColorStop(0, rgba(cHot, 1)); grad.addColorStop(0.6, rgba(cDot, 0.9)); grad.addColorStop(1, rgba(shade(cRim, 0.35), 0.3)); }
    else { grad.addColorStop(0, rgba(cDot, 1)); grad.addColorStop(0.7, rgba(cRim, 0.8)); grad.addColorStop(1, rgba(shade(cRim, 0.5), 0.2)); }
    g.shadowColor = rgba(cDot, 0.4); g.shadowBlur = 8 * k; // shadowBlur ignores the transform, so scale it by hand
    g.fillStyle = grad;
    g.beginPath(); g.arc(half, half, q, 0, 6.2832); g.fill();
    return (sprites[key] = { c: c, q: q, half: half });
  }

  function build() {
    var s = Math.max(opts.spacing, Math.sqrt(W * H / 5000)); // never more than about 5,000 dots
    var cols = Math.floor(W / s) + 2, rows = Math.floor(H / s) + 2;
    var ox = (W - (cols - 1) * s) / 2, oy = (H - (rows - 1) * s) / 2;
    var cx = W / 2, cy = H / 2, maxD = Math.hypot(cx, cy) || 1, mc = cols >> 1, mr = rows >> 1;
    dots = []; total = 0.01;
    for (var r = 0; r < rows; r++) {
      for (var c = 0; c < cols; c++) {
        var x = ox + c * s, y = oy + r * s, seed = rand(c - mc, r - mr, 1) * 100;
        var t0 = Math.hypot(x - cx, y - cy) / maxD * 1.8 + seed % 1.5, d = 2.2 + seed % 2.5;
        dots.push({ x: x, y: y, t0: t0, d: d, k: 1.1 + (seed % 4.2) / 4.2 * opts.swell, a: 0.25 + seed % 0.75, hot: rand(c - mc, r - mr, 2) * 100 < opts.highlights });
        if (t0 + d > total) total = t0 + d;
      }
    }
  }

  function frame(t) {
    var tt = t % (2 * total);
    if (tt > total) tt = 2 * total - tt; // yoyo: forward, then the same path in reverse
    ctx.clearRect(0, 0, W, H);
    for (var i = 0; i < dots.length; i++) {
      var d = dots[i], p = (tt - d.t0) / d.d;
      p = p <= 0 ? 0 : p >= 1 ? 1 : p;
      var e = (1 - Math.cos(Math.PI * p)) / 2; // sine in-out
      var r = opts.size * (1 + (d.k - 1) * e), sp = sprite(d.hot, r), f = r / sp.q, h = sp.half * f;
      ctx.globalAlpha = 1 + (d.a - 1) * e;
      ctx.drawImage(sp.c, d.x - h, d.y - h, h * 2, h * 2);
    }
    ctx.globalAlpha = 1;
  }
  function still() { frame(total * 0.5); }

  function loop(now) {
    raf = requestAnimationFrame(loop);
    var dt = Math.min(0.05, (now - last) / 1000 || 0); last = now;
    if (!visible || document.hidden) return;
    clock += dt * opts.speed;
    frame(clock);
  }
  function size() {
    var nd = Math.min(window.devicePixelRatio || 1, 2);
    if (nd !== dpr) { dpr = nd; sprites = {}; }
    W = Math.max(1, wrap.clientWidth); H = Math.max(1, wrap.clientHeight);
    canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    build();
    if (reduce) still(); else frame(clock);
  }
  function update(partial) {
    opts = Object.assign({ spacing: 42, size: 3.5, swell: 4.2, speed: 0.9, highlights: 25, dot: "#e6ff55", hot: "#fbf8f1", rim: "#1a7a4c", background: "#0c1e18" }, opts, partial || {});
    opts.spacing = Math.max(12, num(opts.spacing, 42)); opts.size = Math.max(0.5, num(opts.size, 3.5));
    opts.swell = Math.max(0, num(opts.swell, 4.2)); opts.speed = Math.max(0, num(opts.speed, 0.9)); opts.highlights = num(opts.highlights, 25);
    cDot = hex(opts.dot, "e6ff55"); cHot = hex(opts.hot, "fbf8f1"); cRim = hex(opts.rim, "1a7a4c");
    wrap.style.background = opts.background;
    sprites = {};
    if (destroyed) return;
    build();
    if (reduce) still(); else frame(clock);
  }

  update(o);
  size();
  if (!reduce) {
    if ("IntersectionObserver" in window) { io = new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }); io.observe(wrap); }
    last = performance.now(); 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);
      if (io) io.disconnect();
      if (ro) ro.disconnect();
      sprites = {};
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"spacing":42,"size":3.5,"swell":4.2,"speed":0.9,"highlights":25,"dot":"#e6ff55","hot":"#fbf8f1","rim":"#1a7a4c","background":"#0c1e18"});