Marquee ticker

Build "Marquee ticker" for my site using the Enrichr Library element at https://enrichr.dev/elements/marquee-ticker.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/marquee-ticker.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: Make it move • Make it count •
- speed: 90
- gap: 48
- direction: 1
- 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-marquee"><div class="ef-marquee__track" aria-hidden="true"></div></div>

.ef-marquee { overflow: hidden; white-space: nowrap; width: 100%; }
.ef-marquee__track { display: inline-block; will-change: transform; font-size: clamp(2rem, 7vw, 5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.ef-marquee__item { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .ef-marquee { white-space: normal; } .ef-marquee__track { transform: none !important; } }

// Marquee ticker: endless horizontal text. No dependencies.
// mount(root, { text, speed (px/s), gap (px), direction (1 or -1), color })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var track = root.querySelector(".ef-marquee__track");
  var opts = {}, raf = 0, last = 0, x = 0, unitW = 1, hover = false, visible = true, io = null;

  function build() {
    track.textContent = "";
    var unit = document.createElement("span");
    unit.className = "ef-marquee__item";
    unit.textContent = opts.text;
    unit.style.paddingRight = opts.gap + "px";
    track.appendChild(unit);
    unitW = Math.max(1, unit.offsetWidth);
    var copies = reduce ? 0 : Math.ceil((root.clientWidth * 2) / unitW) + 1;
    for (var i = 0; i < copies; i++) track.appendChild(unit.cloneNode(true));
    root.setAttribute("aria-label", opts.text);
    root.style.color = opts.color;
    track.style.transform = "translate3d(0,0,0)";
    x = 0;
  }
  function tick(t) {
    raf = requestAnimationFrame(tick);
    var dt = Math.min(0.05, (t - last) / 1000 || 0);
    last = t;
    if (hover || !visible) return;
    x -= opts.direction * opts.speed * dt;
    if (x <= -unitW) x += unitW;
    if (x > 0) x -= unitW;
    track.style.transform = "translate3d(" + x.toFixed(2) + "px,0,0)";
  }
  function onEnter() { hover = true; }
  function onLeave() { hover = false; }

  function update(next) {
    opts = Object.assign({ text: "Make it move", speed: 90, gap: 48, direction: 1, color: "#ffffff" }, opts, next || {});
    build();
  }
  update(o);
  if (!reduce) {
    root.addEventListener("pointerenter", onEnter);
    root.addEventListener("pointerleave", onLeave);
    if ("IntersectionObserver" in window) { io = new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }); io.observe(root); }
    raf = requestAnimationFrame(tick);
  }
  return {
    update: update,
    destroy: function () { cancelAnimationFrame(raf); if (io) io.disconnect(); root.removeEventListener("pointerenter", onEnter); root.removeEventListener("pointerleave", onLeave); }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"text":"Make it move • Make it count •","speed":90,"gap":48,"direction":1,"color":"#ffffff"});