Scroll spring heading

Build "Scroll spring heading" for my site using the Enrichr Library element at https://enrichr.dev/elements/scroll-spring-heading.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/scroll-spring-heading.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:
- text: Keep moving
- distance: 220
- stiffness: 0.06
- damping: 0.82
- manual: 0
- color: #ffffff

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

<div class="ef-spring"><div class="ef-spring__h"></div></div>

.ef-spring { overflow: hidden; }
.ef-spring__h { display: inline-block; white-space: nowrap; font-size: clamp(3rem, 14vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .ef-spring__h { transform: none !important; } }

// Scroll spring heading: an oversized heading slides sideways as the page scrolls, following scroll progress through a spring,
// so it lags behind, overshoots slightly and settles.
// mount(root, { text, distance (px each side), stiffness (0.01-0.3), damping (0.5-0.98), manual (0 = follow scroll, 1-100 = fixed progress %), color })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var wrap = root.querySelector(".ef-spring");
  var h = root.querySelector(".ef-spring__h");
  var opts = {}, raf = 0, pos = 0, vel = 0, visible = true, io = null;

  function progress() {
    if (opts.manual > 0) return opts.manual / 100;
    var r = wrap.getBoundingClientRect(), vh = window.innerHeight || 800;
    return Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height)));
  }
  function tick() {
    raf = requestAnimationFrame(tick);
    if (!visible) return;
    var target = (progress() - 0.5) * 2 * opts.distance;
    vel = (vel + (target - pos) * opts.stiffness) * opts.damping;
    pos += vel;
    h.style.transform = "translate3d(" + pos.toFixed(1) + "px,0,0)";
  }
  function update(next) {
    opts = Object.assign({ text: "Keep moving", distance: 220, stiffness: 0.06, damping: 0.82, manual: 0, color: "#ffffff" }, opts, next || {});
    h.textContent = opts.text;
    h.style.color = opts.color;
    root.setAttribute("aria-label", opts.text);
  }
  update(o);
  if (!reduce) {
    if ("IntersectionObserver" in window) { io = new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }); io.observe(wrap); }
    raf = requestAnimationFrame(tick);
  }
  return { update: update, destroy: function () { cancelAnimationFrame(raf); if (io) io.disconnect(); } };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"text":"Keep moving","distance":220,"stiffness":0.06,"damping":0.82,"manual":0,"color":"#ffffff"});