Scroll velocity skew

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

Read the machine-readable spec and source at https://enrichr.dev/elements/scroll-velocity-skew.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: Scroll fast
- skew: 12
- split: 8
- preview: 0
- color: #ffffff
- colorA: #ff3d6e
- colorB: #35e0ff

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

<div class="ef-vel"><span class="ef-vel__t"></span></div>

.ef-vel { overflow: visible; }
.ef-vel__t { display: inline-block; font-size: clamp(2.4rem, 9vw, 6.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; will-change: transform, text-shadow; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .ef-vel__t { transform: none !important; text-shadow: none !important; } }

// Scroll velocity skew and RGB split: text leans and splits into two colour fringes in proportion to how fast the page scrolls.
// It reads window.scrollY itself, so it works with native scroll, Lenis or any other smooth scroll.
// mount(root, { text, skew (max degrees), split (max px), range (scroll px/s for full effect), smoothing (0.05-0.5),
//               preview (0 = real scroll, 1-100 = fixed % of full effect), color, colorA, colorB })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var el = root.querySelector(".ef-vel__t");
  var opts = {}, raf = 0, last = 0, lastY = window.scrollY, v = 0, visible = true, io = null;

  function apply() {
    var n = Math.max(-1, Math.min(1, v / opts.range));
    var s = (n * opts.split).toFixed(2);
    el.style.transform = "skewX(" + (-n * opts.skew).toFixed(2) + "deg)";
    el.style.textShadow = s + "px 0 " + opts.colorA + ", " + -s + "px 0 " + opts.colorB;
  }
  function tick(t) {
    raf = requestAnimationFrame(tick);
    var dt = Math.max(1, t - last) / 1000;
    last = t;
    var y = window.scrollY;
    var speed = (y - lastY) / dt;
    lastY = y;
    if (!visible) return;
    var target = opts.preview > 0 ? (opts.preview / 100) * opts.range : speed;
    v += (target - v) * opts.smoothing;
    if (Math.abs(v) < 0.5) v = 0;
    apply();
  }
  function update(next) {
    opts = Object.assign({ text: "Scroll fast", skew: 12, split: 8, range: 2400, smoothing: 0.18, preview: 0, color: "#ffffff", colorA: "#ff3d6e", colorB: "#35e0ff" }, opts, next || {});
    el.textContent = opts.text;
    el.style.color = opts.color;
    root.setAttribute("aria-label", opts.text);
    v = 0;
    apply();
  }
  update(o);
  if (!reduce) {
    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(); } };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"text":"Scroll fast","skew":12,"split":8,"preview":0,"color":"#ffffff","colorA":"#ff3d6e","colorB":"#35e0ff"});