Grid to vertical slider

Build "Grid to vertical slider" for my site using the Enrichr Library element at https://enrichr.dev/elements/grid-to-slider.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/grid-to-slider.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
- palette: forest
- count: 8
- duration: 900
- stagger: 20

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

<div class="ef-gts">
  <div class="ef-gts__stage" role="group" aria-label="Piece grid and slider">
    <svg class="ef-gts__defs" width="0" height="0" aria-hidden="true" focusable="false">
      <symbol id="efgts-p1" viewBox="1513.7 1453.9 322.3 322.3"><path fill="currentColor" d="M1821 1761.2h-292.3v-111.6c0-8 6.5-14.5 14.5-14.5 4.2 0 8.2 1.9 11 5.1 7.8 8.6 19.7 13.6 32.7 11.9 16.8-2.3 30.1-16 32-32.7 2.5-22.6-15.1-41.6-37.1-41.6-11 0-20.9 4.7-27.7 12.3-2.8 3.1-6.7 4.9-10.9 4.9-8 0-14.5-6.4-14.5-14.4v-111.7h292.3v111.7c0 8-6.4 14.4-14.5 14.4-4.2 0-8.1-1.8-10.9-5-7.9-8.6-19.7-13.6-32.7-11.9-16.8 2.2-30.1 15.9-32 32.7-2.5 22.6 15.1 41.6 37.1 41.6 11 0 20.8-4.8 27.7-12.3 2.8-3.1 6.7-5 10.8-5 8.1 0 14.5 6.5 14.5 14.5z"/></symbol>
      <symbol id="efgts-p4" viewBox="1423.36 860.8 503.07 322.3"><path fill="currentColor" 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"/></symbol>
      <symbol id="efgts-p8" viewBox="1513.7 166.86 322.3 503.06"><path fill="currentColor" d="M1528.7 564.5v-111.6c0-8 6.5-14.5 14.5-14.5 4.2 0 8.2 1.9 11 5 7.8 8.7 19.7 13.7 32.7 11.9 16.8-2.2 30.1-15.9 32-32.7 2.5-22.5-15.1-41.5-37.1-41.5-11 0-20.9 4.7-27.7 12.3-2.8 3.1-6.7 4.9-10.9 4.9-8 0-14.5-6.5-14.5-14.5v-111.6h111.6c8.1 0 14.5-6.5 14.5-14.5 0-4.1-1.8-8.1-4.9-10.9-7.6-6.8-12.3-16.6-12.3-27.6 0-22 19-39.6 41.5-37.1 16.8 1.8 30.5 15.2 32.8 32 1.7 12.9-3.3 24.8-12 32.7-3.1 2.8-5 6.7-5 10.9 0 8 6.5 14.5 14.5 14.5h111.6v111.6c0 8-6.4 14.5-14.5 14.5-4.2 0-8.1-1.9-10.9-5-7.9-8.7-19.7-13.6-32.7-11.9-16.8 2.2-30.1 15.9-32 32.7-2.5 22.5 15.1 41.6 37.1 41.6 11 0 20.8-4.8 27.7-12.3 2.8-3.1 6.7-5 10.8-5 8.1 0 14.5 6.5 14.5 14.5v111.6h-111.6c-8 0-14.5 6.5-14.5 14.5 0 4.2 1.9 8.1 5 10.9 7.5 6.8 12.3 16.7 12.3 27.7 0 22-19 39.5-41.6 37.1-16.8-1.9-30.5-15.3-32.7-32-1.7-13 3.3-24.9 11.9-32.7 3.1-2.9 5-6.8 5-11 0-8-6.4-14.5-14.5-14.5z"/></symbol>
    </svg>
    <div class="ef-gts__tiles"></div>
    <div class="ef-gts__cap" aria-live="polite"><span class="ef-gts__ct"></span><span class="ef-gts__cs"></span></div>
    <button type="button" class="ef-gts__btn ef-gts__close" aria-label="Back to grid"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
    <div class="ef-gts__nav">
      <button type="button" class="ef-gts__btn ef-gts__prev" aria-label="Previous piece"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M6 15l6-6 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      <button type="button" class="ef-gts__btn ef-gts__next" aria-label="Next piece"><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
    </div>
  </div>
</div>

/* Enrichr Library · https://enrichr.dev */
/* Adapted from https://github.com/codrops/GridToSlider (MIT) — Copyright (c) 2009 - 2022 [Codrops](https://tympanus.net/codrops) */
.ef-gts { width: 100%; height: 100%; }
.ef-gts__stage { --ef-bg: #0c1e18; --ef-fg: #fbf8f1; --ef-acc: #e6ff55; position: relative; box-sizing: border-box; width: 100%; height: 100%; min-height: 28rem; overflow: hidden; background: var(--ef-bg); color: var(--ef-fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ef-gts__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ef-gts__tiles { position: absolute; inset: 0; }
.ef-gts__tile { position: absolute; left: 0; top: 0; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 5px; overflow: hidden; cursor: pointer; color: inherit; background: #005236; outline: none; will-change: transform, width, height; transition: filter 500ms cubic-bezier(.16,1,.3,1), opacity 500ms; }
.ef-gts__stage[data-mode="grid"] .ef-gts__tile:hover, .ef-gts__stage[data-mode="grid"] .ef-gts__tile:focus-visible { filter: brightness(1.3) saturate(1.1); }
.ef-gts__tile:focus-visible { box-shadow: 0 0 0 2px var(--ef-bg), 0 0 0 4px var(--ef-acc); z-index: 2; }
.ef-gts__stage[data-mode="slider"] .ef-gts__tile { opacity: 0.4; }
.ef-gts__stage[data-mode="slider"] .ef-gts__tile.is-current { opacity: 1; cursor: default; }
.ef-gts__pc { position: absolute; left: 50%; top: 50%; width: 64%; height: 64%; margin: -32% 0 0 -32%; opacity: 0.92; pointer-events: none; }
.ef-gts__cap { position: absolute; z-index: 3; left: 1rem; bottom: 0.9rem; pointer-events: none; }
.ef-gts__ct { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.ef-gts__cs { display: block; margin-top: 0.2rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.ef-gts__btn { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 1px solid var(--ef-fg); border-radius: 50%; background: var(--ef-bg); color: var(--ef-fg); cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms; }
.ef-gts__btn:hover { background: var(--ef-acc); color: #0c1e18; border-color: var(--ef-acc); }
.ef-gts__btn:focus-visible { outline: 2px solid var(--ef-acc); outline-offset: 2px; }
.ef-gts__close { position: absolute; z-index: 4; top: 0.8rem; right: 0.8rem; }
.ef-gts__nav { position: absolute; z-index: 4; right: 0.8rem; top: 50%; display: flex; flex-direction: column; gap: 0.5rem; transform: translateY(-50%); }
.ef-gts__close, .ef-gts__nav { visibility: hidden; opacity: 0; transform-origin: center; transition: opacity 300ms, visibility 0s 300ms; }
.ef-gts__nav { transform: translateY(-50%); }
.ef-gts__stage[data-mode="slider"] .ef-gts__close, .ef-gts__stage[data-mode="slider"] .ef-gts__nav { visibility: visible; opacity: 1; transition: opacity 300ms 200ms, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .ef-gts__tile, .ef-gts__btn, .ef-gts__close, .ef-gts__nav { transition: none !important; } }

// Enrichr Library · https://enrichr.dev
// Adapted from https://github.com/codrops/GridToSlider (MIT) — Copyright (c) 2009 - 2022 [Codrops](https://tympanus.net/codrops)
// Grid to slider: click a tile and the whole grid reflows into a vertical slider centred on it, every tile gliding between its two layouts
// with a stagger that starts at the clicked tile (a hand-rolled FLIP: layouts are computed in JS, then each tile tweens its rect).
// In slider mode use the arrows, arrow keys or the wheel (only while the pointer is over it) to step; Escape or the close button returns.
// Vanilla port: one rAF loop, no animation library. Reduced motion swaps layouts instantly.
// mount(root, { accent, palette (forest|ink|cream), count (4-12), duration (ms), stagger (ms) })
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var stage = root.querySelector(".ef-gts__stage");
  var holder = root.querySelector(".ef-gts__tiles");
  var capT = root.querySelector(".ef-gts__ct"), capS = root.querySelector(".ef-gts__cs");
  var bClose = root.querySelector(".ef-gts__close"), bPrev = root.querySelector(".ef-gts__prev"), bNext = root.querySelector(".ef-gts__next");
  var opts = {}, tiles = [], offs = [], raf = 0, ro = null, dead = false, mode = "grid", cur = 0, cols = 3, wheelAt = 0, wheelAcc = 0;
  var NAMES = ["Tidal", "Ember", "Moss", "Dusk", "Arch", "Grain", "Haze", "Loop", "Fern", "Kiln", "Reed", "Slate"];
  var PIECES = ["efgts-p1", "efgts-p4", "efgts-p8"];
  var PAL = { forest: ["#0c1e18", "#fbf8f1"], ink: ["#005236", "#fbf8f1"], cream: ["#fbf8f1", "#0c1e18"] };

  function io4(t) { return t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2; }
  function art(i, a) {
    var p = i % 4;
    if (p === 0) return "linear-gradient(160deg, #0a6b46, #005236)";
    if (p === 1) return "radial-gradient(circle at 72% 24%, " + a + " 0 18%, transparent 19%), linear-gradient(200deg, #2f7d5b, #0c1e18)";
    if (p === 2) return "linear-gradient(145deg, #c6f26b, #2f7d5b)";
    return "repeating-linear-gradient(120deg, #005236 0 10px, #0c1e18 10px 20px)";
  }

  /* layouts: return a target rect for tile i in the current mode */
  function targets() {
    var W = stage.clientWidth, H = stage.clientHeight, n = tiles.length, out = [], i;
    if (mode === "grid") {
      cols = n <= 4 ? 2 : n <= 6 ? 3 : n <= 8 ? 4 : n <= 10 ? 5 : 4;
      var rows = Math.ceil(n / cols), pad = 20, gap = 10, bottom = 56;
      var aw = W - pad * 2, ah = H - pad - bottom;
      var tw = Math.max(36, Math.min((aw - gap * (cols - 1)) / cols, ((ah - gap * (rows - 1)) / rows) * 0.75));
      var th = tw / 0.75, gw = tw * cols + gap * (cols - 1), gh = th * rows + gap * (rows - 1);
      var x0 = (W - gw) / 2, y0 = pad + (ah - gh) / 2;
      for (i = 0; i < n; i++) out.push({ x: x0 + (i % cols) * (tw + gap), y: y0 + Math.floor(i / cols) * (th + gap), w: tw, h: th });
    } else {
      var sh = Math.min(H * 0.6, (W * 0.5) / 0.75), sw = sh * 0.75, g = H * 0.07;
      for (i = 0; i < n; i++) out.push({ x: (W - sw) / 2, y: (H - sh) / 2 - 10 + (i - cur) * (sh + g), w: sw, h: sh });
    }
    return out;
  }
  function paint(t) {
    var r = t.r;
    t.el.style.width = r.w.toFixed(1) + "px";
    t.el.style.height = r.h.toFixed(1) + "px";
    t.el.style.transform = "translate3d(" + r.x.toFixed(1) + "px," + r.y.toFixed(1) + "px,0)";
  }
  function flow(dur, stag, from) {
    var to = targets(), now = performance.now();
    tiles.forEach(function (t, i) {
      if (reduce || dur <= 0) { t.r = to[i]; t.a = null; paint(t); return; }
      t.a = { from: { x: t.r.x, y: t.r.y, w: t.r.w, h: t.r.h }, to: to[i], t0: now + Math.abs(i - from) * stag, dur: dur };
    });
    if (tiles.some(function (t) { return t.a; })) kick();
  }
  function kick() { if (!raf && !dead) raf = requestAnimationFrame(tick); }
  function tick(now) {
    raf = 0;
    var live = false;
    tiles.forEach(function (t) {
      var a = t.a;
      if (!a) return;
      var p = Math.max(0, Math.min(1, (now - a.t0) / a.dur)), e = io4(p);
      t.r = { x: a.from.x + (a.to.x - a.from.x) * e, y: a.from.y + (a.to.y - a.from.y) * e, w: a.from.w + (a.to.w - a.from.w) * e, h: a.from.h + (a.to.h - a.from.h) * e };
      paint(t);
      if (p >= 1) t.a = null; else live = true;
    });
    if (live) raf = requestAnimationFrame(tick);
  }

  /* state */
  function labels() {
    var n = tiles.length;
    tiles.forEach(function (t, i) {
      t.el.classList.toggle("is-current", mode === "slider" && i === cur);
      if (mode === "slider" && i === cur) { t.el.setAttribute("aria-current", "true"); t.el.setAttribute("aria-label", "Piece " + (i + 1) + ", current"); }
      else { t.el.removeAttribute("aria-current"); t.el.setAttribute("aria-label", (mode === "slider" ? "Go to piece " : "Open piece ") + (i + 1) + ": " + NAMES[i % NAMES.length]); }
    });
    if (mode === "slider") { capT.textContent = NAMES[cur % NAMES.length]; capS.textContent = String(cur + 1).padStart(2, "0") + " / " + String(n).padStart(2, "0"); }
    else { capT.textContent = "Pick a piece"; capS.textContent = n + " pieces"; }
    bPrev.disabled = mode === "slider" && cur === 0;
    bNext.disabled = mode === "slider" && cur === n - 1;
    bPrev.style.opacity = bPrev.disabled ? "0.35" : ""; bNext.style.opacity = bNext.disabled ? "0.35" : "";
  }
  function open(i) {
    if (mode === "slider") return;
    cur = i; mode = "slider"; stage.setAttribute("data-mode", mode);
    labels(); flow(opts.duration, opts.stagger, cur);
    requestAnimationFrame(function () { if (!dead) bClose.focus(); });
  }
  function close() {
    if (mode === "grid") return;
    mode = "grid"; stage.setAttribute("data-mode", mode);
    labels(); flow(opts.duration, opts.stagger, cur);
    var t = tiles[cur]; if (t) t.el.focus();
  }
  function step(d) {
    if (mode !== "slider") return;
    var n = Math.max(0, Math.min(tiles.length - 1, cur + d));
    if (n === cur) return;
    cur = n; labels(); flow(opts.duration * 0.7, opts.stagger * 0.5, cur);
  }
  function goTo(i) { if (mode === "slider" && i !== cur) { cur = i; labels(); flow(opts.duration * 0.7, opts.stagger * 0.5, cur); } }

  /* build */
  function build() {
    holder.textContent = ""; tiles = []; cur = Math.min(cur, opts.count - 1);
    for (var i = 0; i < opts.count; i++) (function (i) {
      var el = document.createElement("button");
      el.type = "button"; el.className = "ef-gts__tile";
      el.style.background = art(i, opts.accent);
      var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      svg.setAttribute("class", "ef-gts__pc"); svg.setAttribute("aria-hidden", "true");
      svg.style.color = i % 4 === 2 ? "#0c1e18" : i % 2 ? "#fbf8f1" : opts.accent;
      svg.style.transform = "rotate(" + ((i % 5) - 2) * 7 + "deg)";
      var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
      use.setAttribute("href", "#" + PIECES[i % 3]);
      svg.appendChild(use); el.appendChild(svg);
      function click() { if (mode === "grid") open(i); else goTo(i); }
      el.addEventListener("click", click);
      offs.push(function () { el.removeEventListener("click", click); });
      holder.appendChild(el);
      tiles.push({ el: el, r: { x: 0, y: 0, w: 60, h: 80 }, a: null });
    })(i);
    labels(); flow(0, 0, 0);
  }

  /* input */
  function onKey(e) {
    var k = e.key;
    if (mode === "slider") {
      if (k === "Escape") { e.preventDefault(); close(); }
      else if (k === "ArrowUp" || k === "ArrowLeft") { e.preventDefault(); step(-1); }
      else if (k === "ArrowDown" || k === "ArrowRight") { e.preventDefault(); step(1); }
      else if (k === "Home") { e.preventDefault(); step(-999); }
      else if (k === "End") { e.preventDefault(); step(999); }
    } else {
      var idx = tiles.map(function (t) { return t.el; }).indexOf(document.activeElement), j = -1;
      if (idx < 0) return;
      if (k === "ArrowRight") j = idx + 1; else if (k === "ArrowLeft") j = idx - 1;
      else if (k === "ArrowDown") j = idx + cols; else if (k === "ArrowUp") j = idx - cols;
      if (j >= 0 && j < tiles.length) { e.preventDefault(); tiles[j].el.focus(); }
    }
  }
  function onWheel(e) {
    if (mode !== "slider") return;
    e.preventDefault();
    var now = performance.now();
    wheelAcc += e.deltaY;
    if (now - wheelAt > 420 && Math.abs(wheelAcc) > 20) { wheelAt = now; step(wheelAcc > 0 ? 1 : -1); wheelAcc = 0; }
    else if (now - wheelAt > 420) wheelAcc = 0;
  }
  function onClose() { close(); }
  function onPrev() { step(-1); }
  function onNext() { step(1); }
  stage.addEventListener("keydown", onKey);
  stage.addEventListener("wheel", onWheel, { passive: false });
  bClose.addEventListener("click", onClose); bPrev.addEventListener("click", onPrev); bNext.addEventListener("click", onNext);
  offs.push(function () {
    stage.removeEventListener("keydown", onKey); stage.removeEventListener("wheel", onWheel);
    bClose.removeEventListener("click", onClose); bPrev.removeEventListener("click", onPrev); bNext.removeEventListener("click", onNext);
  });
  if (typeof ResizeObserver !== "undefined") {
    ro = new ResizeObserver(function () { if (!dead && tiles.length) flow(0, 0, 0); });
    ro.observe(stage);
  }

  function update(next) {
    var prev = opts;
    opts = Object.assign({ accent: "#e6ff55", palette: "forest", count: 8, duration: 900, stagger: 20 }, opts, next || {});
    opts.count = Math.max(4, Math.min(12, Math.round(opts.count)));
    opts.duration = Math.max(0, +opts.duration); opts.stagger = Math.max(0, +opts.stagger);
    var p = PAL[opts.palette] || PAL.forest;
    stage.style.setProperty("--ef-bg", p[0]); stage.style.setProperty("--ef-fg", p[1]);
    stage.style.setProperty("--ef-acc", opts.palette === "cream" ? "#0a6b46" : opts.accent);
    stage.setAttribute("data-mode", mode);
    if (prev.count !== opts.count || prev.accent !== opts.accent) build();
  }
  update(o);
  return {
    update: update,
    destroy: function () {
      dead = true;
      if (raf) cancelAnimationFrame(raf);
      raf = 0;
      if (ro) ro.disconnect();
      offs.forEach(function (f) { f(); }); offs = [];
      holder.textContent = "";
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"accent":"#e6ff55","palette":"forest","count":8,"duration":900,"stagger":20});