Stagger letter swap

Build "Stagger letter swap" for my site using the Enrichr Library element at https://enrichr.dev/elements/stagger-letter-swap.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/stagger-letter-swap.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
- tint: #c6f26b
- stagger: 14
- duration: 500
- cursor: 56

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

<div class="ef-slr">
  <div class="ef-slr__wrap">
    <div class="ef-slr__bar">
      <button type="button" class="ef-slr__home"><b>EF</b> <span>2026</span></button>
      <button type="button" class="ef-slr__tog" aria-pressed="false"><span class="ef-slr__tl is-on">About</span><span class="ef-slr__tl">Close</span></button>
    </div>
    <div class="ef-slr__body">
      <section class="ef-slr__panel ef-slr__panel--home is-current" aria-label="Home">
        <p class="ef-slr__p ef-slr__p--big" data-split>Build with</p>
        <p class="ef-slr__p ef-slr__p--big ef-slr__p--right" data-split>every piece</p>
      </section>
      <section class="ef-slr__panel ef-slr__panel--about" aria-label="About">
        <p class="ef-slr__p" data-split>Every letter is</p>
        <p class="ef-slr__p ef-slr__p--right" data-split>its own small piece</p>
        <p class="ef-slr__p" data-split>moving in order to</p>
        <p class="ef-slr__p" data-split>fit a bigger shape</p>
        <figure class="ef-slr__fig">
          <div class="ef-slr__art"></div>
          <figcaption class="ef-slr__cap">Each character slides on its own, in a stagger, and the next set rises into the gap it leaves behind.</figcaption>
        </figure>
      </section>
    </div>
    <svg class="ef-slr__cur" width="80" height="80" viewBox="0 0 80 80" aria-hidden="true"><circle cx="40" cy="40" r="20"></circle></svg>
  </div>
</div>

/* Enrichr Library · https://enrichr.dev */
/* Adapted from https://github.com/codrops/TypographyMotion (MIT) — Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops) */
.ef-slr { width: 100%; }
.ef-slr__wrap { --ef-acc: #e6ff55; --ef-cur: 56px; position: relative; box-sizing: border-box; width: 100%; min-height: 26rem; overflow: hidden; border-radius: 1rem; padding: 1rem 1.3rem 1.3rem; display: flex; flex-direction: column; container-type: inline-size; background: #fbf8f1; color: #0c1e18; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ef-slr__bar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.ef-slr__home, .ef-slr__tog { padding: 0.35rem 0; border: 0; background: none; color: inherit; font: inherit; font-size: 0.85rem; cursor: pointer; }
.ef-slr__home b { font-weight: 800; }
.ef-slr__tog { font-weight: 800; }
.ef-slr__tl { display: none; }
.ef-slr__tl.is-on { display: inline-block; }
.ef-slr__home:focus-visible, .ef-slr__tog:focus-visible { outline: 2px solid #0a6b46; outline-offset: 4px; border-radius: 2px; }
.ef-slr__body { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 100%; grid-template-areas: "x"; cursor: default; }
.ef-slr__panel { grid-area: x; display: flex; flex-direction: column; visibility: hidden; pointer-events: none; }
.ef-slr__panel.is-current { visibility: visible; pointer-events: auto; }
.ef-slr__panel--home { justify-content: center; }
.ef-slr__p { position: relative; flex: none; margin: 0; overflow: hidden; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(1.5rem, 7.5cqw, 3rem); line-height: 1.12; letter-spacing: -0.02em; text-transform: uppercase; }
.ef-slr__p--big { font-size: clamp(2.2rem, 12cqw, 5.4rem); line-height: 1.02; }
.ef-slr__p--right { align-self: flex-end; }
.ef-slr__w { display: inline-block; white-space: nowrap; }
.ef-slr__c { display: inline-block; will-change: transform; }
.ef-slr__fig { display: flex; align-items: center; gap: 1rem; margin: 1.1rem 0 0; }
.ef-slr__art { position: relative; flex: none; width: 6.5rem; height: 5.2rem; border-radius: 0.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #e6ff55; background: linear-gradient(150deg, #0a6b46, #0c1e18); }
.ef-slr__art svg { width: 78%; height: 78%; display: block; }
.ef-slr__cap { margin: 0; font-size: 0.78rem; line-height: 1.45; max-width: 18rem; }
.ef-slr__cur { position: absolute; z-index: 2; left: 0; top: 0; width: var(--ef-cur); height: var(--ef-cur); pointer-events: none; opacity: 0; transition: opacity 400ms; will-change: transform; }
.ef-slr__cur circle { fill: var(--ef-acc); fill-opacity: 0.55; }
.ef-slr__cur.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ef-slr__cur { display: none; } }

// Enrichr Library · https://enrichr.dev
// Adapted from https://github.com/codrops/TypographyMotion (MIT) — Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops)
// Stagger letter swap: every character of the current text slides up and out in a stagger, the background shifts colour, then the next text's
// characters rise into place from below and a picture settles in. A soft circle follows the mouse. Click About / Close (or the EF mark) to swap.
// Vanilla port: text is split into word and character spans here, the motion is the Web Animations API, the cursor is a small rAF lerp. No libraries.
// mount(root, { accent, tint (colour), stagger (ms), duration (ms), cursor (px) })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var wrap = root.querySelector(".ef-slr__wrap");
  var home = root.querySelector(".ef-slr__home");
  var tog = root.querySelector(".ef-slr__tog");
  var tls = root.querySelectorAll(".ef-slr__tl");
  var panels = [root.querySelector(".ef-slr__panel--home"), root.querySelector(".ef-slr__panel--about")];
  var fig = root.querySelector(".ef-slr__fig");
  var art = root.querySelector(".ef-slr__art");
  var cur = root.querySelector(".ef-slr__cur");
  var BASE = "#fbf8f1";
  var opts = {}, offs = [], running = [], view = 0, animating = false, destroyed = false, raf = 0;
  var tx = 0, ty = 0, cx = 0, cy = 0, seen = false;
  var PIECE = { vb: "1423.36 860.8 503.07 322.3", d: "M1821 875.8v111.6c0 8 6.5 14.5 14.5 14.5 4.2 0 8.1-1.9 10.9-5 6.8-7.5 16.7-12.3 27.7-12.3 22 0 39.6 19 37.1 41.6-1.9 16.7-15.2 30.5-32 32.7-13 1.7-24.8-3.3-32.7-11.9-2.8-3.2-6.8-5-11-5-8 0-14.5 6.4-14.5 14.4v111.7h-111.6c-8 0-14.5-6.5-14.5-14.5 0-4.2 1.9-8.2 5-11 8.7-7.9 13.7-19.7 12-32.7-2.3-16.8-16-30.1-32.8-32-22.5-2.5-41.5 15.1-41.5 37.1 0 11 4.7 20.9 12.3 27.7 3.1 2.8 4.9 6.7 4.9 10.8v0.1c0 8-6.4 14.5-14.5 14.5h-111.6v-111.7c0-8-6.4-14.4-14.5-14.4-4.1 0-8 1.8-10.8 4.9-6.9 7.6-16.7 12.3-27.7 12.3-22 0-39.6-19-37.1-41.6 1.9-16.7 15.2-30.4 32-32.7 13-1.7 24.8 3.3 32.7 11.9 2.8 3.2 6.7 5.1 10.9 5.1 8.1 0 14.5-6.5 14.5-14.5v-111.6z" };
  art.innerHTML = '<svg viewBox="' + PIECE.vb + '" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false"><path fill="currentColor" d="' + PIECE.d + '"/></svg>';

  function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
  function lerp(a, b, t) { return a + (b - a) * t; }

  // Split each [data-split] paragraph into word spans holding character spans. Screen readers get the whole text from aria-label.
  Array.prototype.forEach.call(root.querySelectorAll("[data-split]"), function (p) {
    var text = p.textContent.trim().replace(/\s+/g, " ");
    p.textContent = "";
    p.setAttribute("aria-label", text);
    text.split(" ").forEach(function (word, wi) {
      if (wi) p.appendChild(document.createTextNode(" "));
      var w = document.createElement("span"); w.className = "ef-slr__w"; w.setAttribute("aria-hidden", "true");
      for (var i = 0; i < word.length; i++) { var c = document.createElement("span"); c.className = "ef-slr__c"; c.textContent = word.charAt(i); w.appendChild(c); }
      p.appendChild(w);
    });
  });
  function chars(panel) { return Array.prototype.slice.call(panel.querySelectorAll(".ef-slr__c")); }

  function an(el, kf, op) {
    var a = el.animate(kf, Object.assign({ fill: "both" }, op));
    running.push(a);
    return a;
  }
  function done(list) {
    return Promise.all(list.map(function (a) { return a.finished; })).then(function () {
      list.forEach(function (a) { a.cancel(); });
      return true;
    }, function () { return false; });
  }
  function cancelAll() { running.forEach(function (a) { try { a.cancel(); } catch (e) {} }); running = []; }

  function setView(n) {
    view = n;
    panels.forEach(function (p, i) {
      p.classList.toggle("is-current", i === n);
      if (i === n) p.removeAttribute("inert"); else p.setAttribute("inert", "");
      p.setAttribute("aria-hidden", i === n ? "false" : "true");
    });
    tog.setAttribute("aria-pressed", n === 1 ? "true" : "false");
    Array.prototype.forEach.call(tls, function (t, i) { t.classList.toggle("is-on", i === (n === 1 ? 1 : 0)); });
  }
  function target(n) { return n === 1 ? opts.tint : BASE; }

  function swap(to) {
    if (animating || to === view || destroyed) return;
    if (reduce) {
      setView(to);
      wrap.style.backgroundColor = target(to);
      an(panels[to], [{ opacity: 0 }, { opacity: 1 }], { duration: 160, easing: "ease-out" }).finished.then(function () { cancelAll(); }, function () {});
      return;
    }
    animating = true;
    var D = opts.duration, S = opts.stagger, from = view;
    var outC = chars(panels[from]), outs = [];
    outC.forEach(function (c, i) {
      outs.push(an(c, [{ transform: "translateY(0)", opacity: 1 }, { transform: "translateY(-100%)", opacity: 0 }], { duration: D, delay: i * S, easing: "cubic-bezier(.55,.06,.68,.19)" }));
    });
    if (from === 1) outs.push(an(fig, [{ opacity: 1, transform: "translateY(0)" }, { opacity: 0, transform: "translateY(20%)" }], { duration: D * 0.8, easing: "ease-in" }));
    var total = D + Math.max(0, outC.length - 1) * S;
    var goal = target(to);
    var bg = an(wrap, [{ backgroundColor: getComputedStyle(wrap).backgroundColor }, { backgroundColor: goal }], { duration: 800, delay: Math.max(0, total - D / 4), easing: "ease-in-out" });
    done(outs).then(function (ok) {
      if (!ok || destroyed) return;
      setView(to);
      var inn = [];
      chars(panels[to]).forEach(function (c, i) {
        inn.push(an(c, [{ transform: "translateY(100%)" }, { transform: "translateY(0)" }], { duration: D, delay: i * S, easing: "cubic-bezier(.215,.61,.355,1)" }));
      });
      if (to === 1) inn.push(an(fig, [{ opacity: 0, transform: "translateY(40%) rotate(-4deg)" }, { opacity: 1, transform: "translateY(0) rotate(0deg)" }], { duration: 800, delay: D * 1.2, easing: "cubic-bezier(.215,.61,.355,1)" }));
      inn.push(bg);
      done(inn).then(function (ok2) {
        if (!ok2 || destroyed) return;
        wrap.style.backgroundColor = target(view);
        animating = false;
      });
    });
  }

  function onTog() { swap(view === 1 ? 0 : 1); }
  function onHome() { swap(0); }
  function onMove(e) {
    if (reduce || e.pointerType === "touch") return;
    var r = wrap.getBoundingClientRect();
    tx = e.clientX - r.left - opts.cursor / 2; ty = e.clientY - r.top - opts.cursor / 2;
    if (!seen) { seen = true; cx = tx; cy = ty; }
    cur.classList.add("is-on");
    kick();
  }
  function onLeave() { cur.classList.remove("is-on"); }
  function kick() { if (!raf && !destroyed) raf = requestAnimationFrame(tick); }
  function tick() {
    raf = 0;
    cx = lerp(cx, tx, 0.18); cy = lerp(cy, ty, 0.18);
    cur.style.transform = "translate3d(" + cx.toFixed(1) + "px," + cy.toFixed(1) + "px,0)";
    if (Math.abs(tx - cx) > 0.1 || Math.abs(ty - cy) > 0.1) raf = requestAnimationFrame(tick);
  }

  function update(next) {
    opts = Object.assign({ accent: "#e6ff55", tint: "#c6f26b", stagger: 14, duration: 500, cursor: 56 }, opts, next || {});
    opts.stagger = clamp(+opts.stagger, 4, 60);
    opts.duration = clamp(+opts.duration, 200, 1200);
    opts.cursor = clamp(+opts.cursor, 24, 120);
    wrap.style.setProperty("--ef-acc", opts.accent);
    wrap.style.setProperty("--ef-cur", opts.cursor + "px");
    art.style.color = opts.accent;
    if (!animating) wrap.style.backgroundColor = target(view);
  }

  var wire = function (el, ev, fn) { el.addEventListener(ev, fn); offs.push(function () { el.removeEventListener(ev, fn); }); };
  wire(tog, "click", onTog);
  wire(home, "click", onHome);
  wire(wrap, "pointermove", onMove);
  wire(wrap, "pointerleave", onLeave);
  setView(0);
  update(o);
  return {
    update: update,
    destroy: function () {
      destroyed = true;
      if (raf) cancelAnimationFrame(raf);
      raf = 0;
      cancelAll();
      offs.forEach(function (f) { f(); });
      offs = [];
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"accent":"#e6ff55","tint":"#c6f26b","stagger":14,"duration":500,"cursor":56});