Scroll text repetition

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

Read the machine-readable spec and source at https://enrichr.dev/elements/scroll-text-repetition.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:
- accent: #e6ff55
- text: Keep scrolling
- rows: 6
- speed: 1
- outline: true

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

<div class="ef-str">
  <div class="ef-str__wrap">
    <div class="ef-str__scroller" tabindex="0" role="region" aria-label="Scroll to shift the repeated headline rows">
      <div class="ef-str__track">
        <div class="ef-str__stage"><div class="ef-str__rows"></div></div>
      </div>
    </div>
  </div>
</div>

/* Enrichr Library · https://enrichr.dev */
.ef-str { width: 100%; }
.ef-str__wrap { box-sizing: border-box; width: 100%; border-radius: 1rem; overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ef-str__scroller { height: 22rem; overflow-y: auto; overflow-x: hidden; position: relative; outline: none; scrollbar-width: thin; scrollbar-color: var(--ef-acc, #e6ff55) transparent; }
.ef-str__scroller:focus-visible { box-shadow: inset 0 0 0 2px var(--ef-acc, #e6ff55); }
.ef-str__track { height: 220%; position: relative; }
.ef-str__stage { position: sticky; top: 0; height: 22rem; overflow: hidden; display: flex; align-items: center; }
.ef-str__rows { width: 100%; display: flex; flex-direction: column; justify-content: center; }
.ef-str__row { display: block; white-space: nowrap; will-change: transform; transform: translate3d(var(--x, 0px), 0, 0); font-size: var(--ef-fs, 3.2rem); line-height: 0.98; font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ef-acc, #e6ff55); }
.ef-str__row.is-outline { color: transparent; -webkit-text-stroke: 1.5px var(--ef-acc, #e6ff55); }
@media (prefers-reduced-motion: reduce) { .ef-str__row { will-change: auto; transform: none; } }

// Enrichr Library · https://enrichr.dev
// Scroll text repetition: one headline repeated as stacked rows. Scrolling the element's own scroller slides each row sideways at a
// different speed and offset; rows alternate filled and outlined. Scroll progress (0-1) is mapped to a per-row translateX written
// via a CSS variable inside requestAnimationFrame. Reduced motion keeps the rows static. Works inside overflow:hidden containers.
// mount(root, { background, accent, text, rows (3-9), speed (0.2-2), outline (bool) })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var wrap = root.querySelector(".ef-str__wrap");
  var sc = root.querySelector(".ef-str__scroller");
  var stage = root.querySelector(".ef-str__stage");
  var rowsEl = root.querySelector(".ef-str__rows");
  var opts = {}, rows = [], raf = 0;

  function measure() {
    var h = Math.max(120, sc.clientHeight);
    stage.style.height = h + "px";
    var fs = Math.max(26, Math.min(76, (h / opts.rows) * 0.98));
    wrap.style.setProperty("--ef-fs", fs.toFixed(1) + "px");
  }
  function render() {
    raf = 0;
    var max = Math.max(1, sc.scrollHeight - sc.clientHeight);
    var p = sc.scrollTop / max;
    var w = sc.clientWidth;
    for (var i = 0; i < rows.length; i++) {
      if (reduce) { rows[i].style.setProperty("--x", "0px"); continue; }
      var dir = i % 2 ? 1 : -1;
      var mult = 0.35 + ((i * 37) % 11) / 10; // varied speed per row
      var base = (((i * 53) % 7) / 7 - 0.5) * w * 0.4; // varied offset per row
      var x = base + dir * (p - 0.5) * w * 1.1 * mult * opts.speed;
      rows[i].style.setProperty("--x", x.toFixed(1) + "px");
    }
  }
  function queue() { if (!raf) raf = requestAnimationFrame(render); }
  function build() {
    rowsEl.textContent = "";
    rows = [];
    for (var i = 0; i < opts.rows; i++) {
      var d = document.createElement("span");
      d.className = "ef-str__row" + (opts.outline && i % 2 ? " is-outline" : "");
      d.setAttribute("aria-hidden", i === 0 ? "false" : "true");
      var s = "";
      for (var k = 0; k < 4; k++) s += opts.text + " • ";
      d.textContent = s;
      rowsEl.appendChild(d);
      rows.push(d);
    }
    measure();
    queue();
  }
  function onScroll() { queue(); }
  function onResize() { measure(); queue(); }
  sc.addEventListener("scroll", onScroll, { passive: true });
  window.addEventListener("resize", onResize);
  var ro = null;
  if (window.ResizeObserver) { ro = new ResizeObserver(onResize); ro.observe(sc); }

  function update(next) {
    var prev = opts;
    opts = Object.assign({ background: "#0c1e18", accent: "#e6ff55", text: "Keep scrolling", rows: 6, speed: 1, outline: true }, opts, next || {});
    opts.rows = Math.max(3, Math.min(9, Math.round(opts.rows)));
    opts.speed = Math.max(0.2, Math.min(2, Number(opts.speed) || 1));
    opts.outline = opts.outline === true || opts.outline === "true";
    opts.text = String(opts.text || "Keep scrolling").slice(0, 40);
    wrap.style.background = opts.background;
    wrap.style.setProperty("--ef-acc", opts.accent);
    sc.setAttribute("aria-label", "Scroll to shift the repeated headline: " + opts.text);
    if (prev.rows !== opts.rows || prev.text !== opts.text || prev.outline !== opts.outline) build(); else queue();
  }
  update(o);
  return {
    update: update,
    destroy: function () {
      sc.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
      if (ro) ro.disconnect();
      if (raf) cancelAnimationFrame(raf);
      raf = 0;
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"accent":"#e6ff55","text":"Keep scrolling","rows":6,"speed":1,"outline":"true"});