Word read highlight

Build "Word read highlight" for my site using the Enrichr Library element at https://enrichr.dev/elements/word-read-highlight.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/word-read-highlight.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: Words light up as you read, so the page follows your attention instead of asking for it.
- dim: 0.2
- manual: 0
- color: #ffffff

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

<p class="ef-read"></p>

.ef-read { margin: 0; font-size: clamp(1.4rem, 3.6vw, 2.4rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.ef-read__w { opacity: var(--ef-dim, 0.2); transition: opacity 200ms linear; }
.ef-read__w.is-lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ef-read__w { opacity: 1; transition: none; } }

// Word read highlight: words light up one by one as the paragraph scrolls through the viewport.
// mount(root, { text, dim (0-1 opacity of unread words), color, manual (0 = follow scroll, 1-100 = fixed progress) })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var p = root.querySelector(".ef-read");
  var opts = {}, words = [], raf = 0, lit = -1;

  function render() {
    p.textContent = "";
    p.style.color = opts.color;
    p.style.setProperty("--ef-dim", String(opts.dim));
    words = opts.text.split(/\s+/).map(function (w) {
      var s = document.createElement("span");
      s.className = "ef-read__w";
      s.textContent = w;
      p.appendChild(s);
      p.appendChild(document.createTextNode(" "));
      return s;
    });
    lit = -1;
    paint();
  }
  function progress() {
    if (opts.manual > 0) return opts.manual / 100;
    var r = p.getBoundingClientRect(), vh = window.innerHeight || 800;
    var span = r.height + vh * 0.35;
    return Math.min(1, Math.max(0, (vh * 0.85 - r.top) / span));
  }
  function paint() {
    raf = 0;
    var n = reduce ? words.length : Math.round(progress() * words.length);
    if (n === lit) return;
    lit = n;
    words.forEach(function (w, i) { w.classList.toggle("is-lit", i < n); });
  }
  function schedule() { if (!raf) raf = requestAnimationFrame(paint); }
  function update(next) {
    opts = Object.assign({ text: "Words light up as you read, so the page follows your attention.", dim: 0.2, color: "#ffffff", manual: 0 }, opts, next || {});
    render();
  }
  update(o);
  if (!reduce) {
    window.addEventListener("scroll", schedule, { passive: true });
    window.addEventListener("resize", schedule);
  }
  return {
    update: update,
    destroy: function () { cancelAnimationFrame(raf); window.removeEventListener("scroll", schedule); window.removeEventListener("resize", schedule); }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"text":"Words light up as you read, so the page follows your attention instead of asking for it.","dim":0.2,"manual":0,"color":"#ffffff"});