Split text reveal

Build "Split text reveal" for my site using the Enrichr Library element at https://enrichr.dev/elements/split-text-reveal.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/split-text-reveal.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 rise into place
- stagger: 70
- duration: 800
- color: #ffffff

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

<h3 class="ef-split"></h3>

.ef-split { margin: 0; font-size: clamp(2rem, 6vw, 4.2rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.ef-split__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; }
.ef-split__i { display: inline-block; transform: translateY(110%); transition-property: transform; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
.ef-split.is-in .ef-split__i { transform: none; }
@media (prefers-reduced-motion: reduce) { .ef-split__i { transform: none; transition: none; } }

// Split text reveal: words slide up from a mask when the heading scrolls into view.
// mount(root, { text, stagger (ms), duration (ms), color }) -> { update, replay, destroy }
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var h = root.querySelector(".ef-split");
  var opts = {}, visible = false, io = null;

  function render() {
    h.textContent = "";
    h.setAttribute("aria-label", opts.text);
    h.style.color = opts.color;
    opts.text.split(/\s+/).forEach(function (word, i) {
      var outer = document.createElement("span");
      outer.className = "ef-split__w";
      outer.setAttribute("aria-hidden", "true");
      var inner = document.createElement("span");
      inner.className = "ef-split__i";
      inner.textContent = word;
      inner.style.transitionDuration = opts.duration + "ms";
      inner.style.transitionDelay = i * opts.stagger + "ms";
      outer.appendChild(inner);
      h.appendChild(outer);
      h.appendChild(document.createTextNode(" "));
    });
    h.classList.remove("is-in");
    if (reduce || visible) replay();
  }
  function replay() {
    h.classList.remove("is-in");
    void h.offsetWidth; // restart the transition
    h.classList.add("is-in");
  }
  function update(next) {
    opts = Object.assign({ text: "Words rise into place", stagger: 70, duration: 800, color: "#ffffff" }, opts, next || {});
    render();
  }
  update(o);
  if ("IntersectionObserver" in window) {
    io = new IntersectionObserver(function (e) { if (e[0].isIntersecting && !visible) { visible = true; replay(); } }, { threshold: 0.2 });
    io.observe(root);
  } else { visible = true; replay(); }
  return { update: update, replay: replay, destroy: function () { if (io) io.disconnect(); } };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"text":"Words rise into place","stagger":70,"duration":800,"color":"#ffffff"});