Logo intro reveal

Build "Logo intro reveal" for my site using the Enrichr Library element at https://enrichr.dev/elements/logo-intro-reveal.html.

Read the machine-readable spec and source at https://enrichr.dev/elements/logo-intro-reveal.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:
- word: Enrichr
- photo: corgi-1
- speed: 1
- autoReplay: 0
- reveal: 3.9
- trail: 0.988
- brush: 6
- background: #fbf8f1
- ink: #0c1e18
- loaderBackground: #0c1e18
- loaderText: #fbf8f1
- accent: #e6ff55

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

<div class="ef-lir">
  <div class="ef-lir__hero">
    <img class="ef-lir__photo" src="/img/library/corgi-1.jpg" alt="" decoding="async">
    <canvas class="ef-lir__fluid" aria-hidden="true"></canvas>
    <div class="ef-lir__home">
      <h2 class="ef-lir__title" aria-label="Enrichr"></h2>
    </div>
    <div class="ef-lir__bottom">
      <span class="ef-lir__b ef-lir__hint">Move to reveal<span class="ef-lir__dot"></span></span>
      <span class="ef-lir__b ef-lir__hide-sm">enrichr.dev</span>
      <button class="ef-lir__b ef-lir__replay" type="button">Replay intro &#8635;</button>
    </div>
  </div>
  <nav class="ef-lir__nav" aria-label="Example navigation">
    <div class="ef-lir__menu">
      <div class="ef-lir__links">
        <a class="ef-lir__a" href="#"><span class="ef-lir__s">work</span></a>
        <a class="ef-lir__a" href="#"><span class="ef-lir__s">library</span></a>
        <a class="ef-lir__a" href="#"><span class="ef-lir__s">contact</span></a>
      </div>
      <button class="ef-lir__btn" type="button" aria-label="Menu" aria-expanded="false"><i class="ef-lir__bar"></i><i class="ef-lir__bar"></i></button>
    </div>
  </nav>
  <div class="ef-lir__loader" aria-hidden="true">
    <div class="ef-lir__row">
      <div class="ef-lir__mark"><span class="ef-lir__mn">E</span><span class="ef-lir__ma"><svg class="ef-lir__svg" viewBox="0 0 50 50" focusable="false"><path fill="currentColor" d="m34.213 25.361 c0 2.655 1.381 4.808 3.086 4.808 0.781 0 1.494 -0.452 2.038 -1.198 0.267 -0.366 0.688 -0.589 1.142 -0.589 h0.054 c0.774 0 1.401 0.627 1.401 1.401 v10.65 h-10.651 c-0.774 0 -1.401 0.627 -1.401 1.401 v0.054 c0 0.453 0.222 0.874 0.589 1.141 0.746 0.544 1.198 1.257 1.198 2.038 0 1.705 -2.152 3.086 -4.808 3.086 -2.655 0 -4.808 -1.381 -4.808 -3.086 0 -0.781 0.452 -1.494 1.198 -2.038 0.366 -0.267 0.589 -0.688 0.589 -1.142 v-0.054 c0 -0.774 -0.627 -1.401 -1.401 -1.401 h-10.65 v-10.651 c0 -0.774 -0.627 -1.401 -1.401 -1.401 h-0.054 c-0.453 0 -0.875 0.222 -1.142 0.589 -0.543 0.746 -1.257 1.198 -2.038 1.198 -1.705 0 -3.086 -2.152 -3.086 -4.808 0 -2.655 1.381 -4.808 3.086 -4.808 0.781 0 1.495 0.452 2.038 1.198 0.267 0.366 0.688 0.589 1.141 0.589 h0.054 c0.774 0 1.401 -0.627 1.401 -1.401 v-10.65 h10.65 c0.774 0 1.401 -0.627 1.401 -1.401 v-0.054 c0 -0.453 -0.222 -0.875 -0.589 -1.142 -0.746 -0.543 -1.198 -1.257 -1.198 -2.038 0 -1.705 2.152 -3.086 4.808 -3.086 2.655 0 4.808 1.381 4.808 3.086 0 0.781 -0.452 1.495 -1.198 2.038 -0.366 0.267 -0.589 0.688 -0.589 1.141 v0.054 c0 0.774 0.627 1.401 1.401 1.401 h10.65 v10.65 c0 0.774 -0.627 1.401 -1.401 1.401 h-0.053 c-0.453 0 -0.874 -0.222 -1.141 -0.589 -0.544 -0.746 -1.257 -1.198 -2.038 -1.198 -1.705 0 -3.086 2.152 -3.086 4.808 z"/></svg></span></div>
      <div class="ef-lir__box"><div class="ef-lir__shape"></div></div>
    </div>
    <div class="ef-lir__nbr">100</div>
  </div>
</div>

/* Enrichr Library · https://enrichr.dev */
.ef-lir { --ef-lir-bg: #fbf8f1; --ef-lir-ink: #0c1e18; --ef-lir-lbg: #0c1e18; --ef-lir-ltx: #fbf8f1; --ef-lir-acc: #e6ff55; --ef-lir-k: 1; --ef-lir-fs: 10rem; --ef-lir-nf: 6rem; position: relative; box-sizing: border-box; width: 100%; height: 100%; min-height: 26rem; overflow: hidden; border-radius: 1rem; background: var(--ef-lir-bg); color: var(--ef-lir-ink); font-family: 'Parkinsans', 'Space Grotesk', sans-serif; touch-action: pan-y; isolation: isolate; }
.ef-lir .ef-lir__hero { position: absolute; inset: 0; overflow: hidden; }
.ef-lir .ef-lir__photo { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 50% 35%; }
.ef-lir .ef-lir__fluid { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }
.ef-lir .ef-lir__home { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--ef-lir-bg); }
.ef-lir.is-fluid .ef-lir__home { background: transparent; }
.ef-lir .ef-lir__title { margin: 0; padding: 0 0.02em; overflow: hidden; font-family: 'Bebas Neue', 'Parkinsans', sans-serif; font-weight: 400; font-size: var(--ef-lir-fs); line-height: 1; letter-spacing: 0; white-space: nowrap; text-align: center; text-transform: uppercase; color: var(--ef-lir-ink); opacity: 1; user-select: none; }
.ef-lir.is-fluid .ef-lir__title { opacity: 0; }
.ef-lir .ef-lir__ht { display: inline-block; }
.ef-lir .ef-lir__ht--mark { width: 0.38em; height: 0.38em; margin: 0.1em 0 0 0.05em; vertical-align: top; transform-origin: 50% 50%; }
.ef-lir .ef-lir__ht--mark svg, .ef-lir .ef-lir__ma svg, .ef-lir .ef-lir__shape svg { display: block; width: 100%; height: 100%; }
.ef-lir .ef-lir__probe { display: inline-block; width: 0; height: 0; overflow: hidden; }
/* the corner chrome uses difference blending, so white reads dark on the cream page and inverts over the photo */
.ef-lir .ef-lir__bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; mix-blend-mode: difference; color: #fff; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none; }
.ef-lir .ef-lir__b { opacity: 0; pointer-events: auto; }
.ef-lir .ef-lir__dot { display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.5em; border-radius: 50%; background: currentColor; vertical-align: middle; }
.ef-lir .ef-lir__replay { position: relative; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ef-lir .ef-lir__replay::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1); }
.ef-lir .ef-lir__replay:hover::after, .ef-lir .ef-lir__replay:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.ef-lir .ef-lir__replay:focus-visible, .ef-lir .ef-lir__btn:focus-visible, .ef-lir .ef-lir__a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ef-lir.is-static .ef-lir__replay, .ef-lir.is-static .ef-lir__hint, .ef-lir.is-nogl .ef-lir__hint { visibility: hidden; }
.ef-lir .ef-lir__nav { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; justify-content: flex-end; align-items: center; padding: 1.1rem 1.5rem; mix-blend-mode: difference; color: #fff; pointer-events: none; }
.ef-lir .ef-lir__menu { display: flex; align-items: center; gap: 1.4rem; pointer-events: auto; }
.ef-lir .ef-lir__links { display: flex; gap: 1.4rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.ef-lir .ef-lir__a { display: block; overflow: hidden; color: inherit; text-decoration: none; }
.ef-lir .ef-lir__s { display: block; transform: translateY(110%); }
.ef-lir .ef-lir__btn { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ef-lir .ef-lir__bar { position: absolute; display: block; width: 1.15rem; height: 2px; background: currentColor; }
.ef-lir .ef-lir__bar + .ef-lir__bar { transform: rotate(90deg); }
.ef-lir .ef-lir__loader { position: absolute; top: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; background: var(--ef-lir-lbg); color: var(--ef-lir-ltx); }
.ef-lir.is-done .ef-lir__loader { display: none; }
.ef-lir .ef-lir__row { display: flex; align-items: center; }
.ef-lir .ef-lir__mark { display: flex; overflow: hidden; font-family: 'Bebas Neue', 'Parkinsans', sans-serif; font-size: calc(3.4rem * var(--ef-lir-k)); line-height: 1; }
.ef-lir .ef-lir__mn { display: block; transform: translateY(120%); }
.ef-lir .ef-lir__ma { display: block; align-self: flex-start; width: 0.4em; height: 0.4em; margin: 0.1em 0 0 0.06em; transform: scale(0); transform-origin: center; }
.ef-lir .ef-lir__box { display: grid; place-items: center; width: calc(1rem * var(--ef-lir-k)); height: calc(11rem * var(--ef-lir-k)); margin-left: calc(1.4rem * var(--ef-lir-k)); overflow: hidden; }
.ef-lir .ef-lir__shape { flex: none; width: calc(6rem * var(--ef-lir-k)); height: calc(6rem * var(--ef-lir-k)); color: var(--ef-lir-acc); opacity: 0; }
.ef-lir .ef-lir__nbr { position: absolute; right: 1.5rem; bottom: 1rem; font-family: 'Bebas Neue', 'Parkinsans', sans-serif; font-size: var(--ef-lir-nf); line-height: 1; font-variant-numeric: tabular-nums; }
.ef-lir.is-narrow .ef-lir__links, .ef-lir.is-narrow .ef-lir__hide-sm { display: none; }

// Enrichr Library · https://enrichr.dev
// Logo intro reveal: a loader builds the Enrichr mark, then lifts like a curtain off a big one-word hero. The "E" rises
// into a clip while the puzzle piece scales up, a window beside it opens and flicks through eight shapes as a counter
// runs from 100 to 000, then the shape shrinks, the window closes and the dark cover slides up. The hero letters rise in
// a shuffled order, the puzzle piece pops in like an apostrophe, the corner labels fade in, and from then on the pointer
// stirs a small fluid simulation (raw WebGL stable fluids) whose ink cuts holes in the cream page so a corgi photo shows
// through the trail. Timings and eases are the original GSAP timeline, rebuilt as plain maths (power4.inOut, back.out).
// Replay with the button, with replay(), or set autoReplay. Reduced motion skips the loader and the fluid and shows the
// still hero. The loop pauses off screen and in hidden tabs; the fluid also rests once the ink has faded.
// mount(root, { word, photo (corgi-1 to corgi-6), speed (intro), autoReplay (seconds, 0 = off), reveal (ink to hole gain),
//               trail (ink fade per frame), brush (size), background, ink, loaderBackground, loaderText, accent })
//   -> { update, replay, destroy }
function mount(root, o) {
  var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var box = root.querySelector(".ef-lir");
  var photo = box.querySelector(".ef-lir__photo"), fcan = box.querySelector(".ef-lir__fluid");
  var title = box.querySelector(".ef-lir__title");
  var bottom = [].slice.call(box.querySelectorAll(".ef-lir__b")), replayBtn = box.querySelector(".ef-lir__replay");
  var loader = box.querySelector(".ef-lir__loader"), mn = box.querySelector(".ef-lir__mn"), ma = box.querySelector(".ef-lir__ma");
  var lbox = box.querySelector(".ef-lir__box"), shapeEl = box.querySelector(".ef-lir__shape"), nbr = box.querySelector(".ef-lir__nbr");
  var menu = box.querySelector(".ef-lir__menu"), menuBtn = box.querySelector(".ef-lir__btn"), menuSpans = [].slice.call(box.querySelectorAll(".ef-lir__s"));
  var MARK = "m34.213 25.361 c0 2.655 1.381 4.808 3.086 4.808 0.781 0 1.494 -0.452 2.038 -1.198 0.267 -0.366 0.688 -0.589 1.142 -0.589 h0.054 c0.774 0 1.401 0.627 1.401 1.401 v10.65 h-10.651 c-0.774 0 -1.401 0.627 -1.401 1.401 v0.054 c0 0.453 0.222 0.874 0.589 1.141 0.746 0.544 1.198 1.257 1.198 2.038 0 1.705 -2.152 3.086 -4.808 3.086 -2.655 0 -4.808 -1.381 -4.808 -3.086 0 -0.781 0.452 -1.494 1.198 -2.038 0.366 -0.267 0.589 -0.688 0.589 -1.142 v-0.054 c0 -0.774 -0.627 -1.401 -1.401 -1.401 h-10.65 v-10.651 c0 -0.774 -0.627 -1.401 -1.401 -1.401 h-0.054 c-0.453 0 -0.875 0.222 -1.142 0.589 -0.543 0.746 -1.257 1.198 -2.038 1.198 -1.705 0 -3.086 -2.152 -3.086 -4.808 0 -2.655 1.381 -4.808 3.086 -4.808 0.781 0 1.495 0.452 2.038 1.198 0.267 0.366 0.688 0.589 1.141 0.589 h0.054 c0.774 0 1.401 -0.627 1.401 -1.401 v-10.65 h10.65 c0.774 0 1.401 -0.627 1.401 -1.401 v-0.054 c0 -0.453 -0.222 -0.875 -0.589 -1.142 -0.746 -0.543 -1.198 -1.257 -1.198 -2.038 0 -1.705 2.152 -3.086 4.808 -3.086 2.655 0 4.808 1.381 4.808 3.086 0 0.781 -0.452 1.495 -1.198 2.038 -0.366 0.267 -0.589 0.688 -0.589 1.141 v0.054 c0 0.774 0.627 1.401 1.401 1.401 h10.65 v10.65 c0 0.774 -0.627 1.401 -1.401 1.401 h-0.053 c-0.453 0 -0.874 -0.222 -1.141 -0.589 -0.544 -0.746 -1.257 -1.198 -2.038 -1.198 -1.705 0 -3.086 2.152 -3.086 4.808 z";
  // the eight loader glyphs of the original (six-point star, dot, half disc, plus, triangle, face, asterisk, half-filled
  // circle) as SVG so they look the same everywhere; the face became the Enrichr puzzle piece
  var SHAPES = [
    '<svg viewBox="0 0 100 100"><path fill="currentColor" d="M50 13L58 36.14L82.04 31.5L66 50L82.04 68.5L58 63.86L50 87L42 63.86L17.96 68.5L34 50L17.96 31.5L42 36.14Z"/></svg>',
    '<svg viewBox="0 0 100 100"><circle fill="currentColor" cx="50" cy="50" r="25"/></svg>',
    '<svg viewBox="0 0 100 100"><path fill="currentColor" d="M38 20A30 30 0 0 1 38 80Z"/></svg>',
    '<svg viewBox="0 0 100 100"><path fill="currentColor" d="M41 14H59V41H86V59H59V86H41V59H14V41H41Z"/></svg>',
    '<svg viewBox="0 0 100 100"><path fill="currentColor" d="M50 17L85 80H15Z"/></svg>',
    '<svg viewBox="-8 -8 66 66"><path fill="currentColor" d="' + MARK + '"/></svg>',
    '<svg viewBox="0 0 100 100"><path fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" d="M50 3V97M3 50H97M16.8 16.8L83.2 83.2M83.2 16.8L16.8 83.2"/></svg>',
    '<svg viewBox="0 0 100 100"><circle fill="none" stroke="currentColor" stroke-width="6" cx="50" cy="50" r="39"/><path fill="currentColor" d="M11 50A39 39 0 0 0 89 50Z"/></svg>'
  ];
  var ALT = { "corgi-1": "A corgi puppy against an orange wall", "corgi-2": "A corgi smiling in a field of flowers", "corgi-3": "A corgi sitting on a rock among autumn leaves", "corgi-4": "Two corgis on a dirt road", "corgi-5": "A corgi lying on a white background", "corgi-6": "A corgi standing on a white background" };
  var FLUID = { SIM_RES: 256, DYE_RES: 512, VEL_DISS: 0.962, PRESSURE_ITERS: 20, SPLAT_FORCE: 5900, EDGE_SOFT: 0.5, EDGE_WIDTH: 0.01 };

  var opts = {}, raf = 0, last = 0, visible = true, started = false, destroyed = false, io = null, ro = null, rt = 0;
  var art = 0, W = 1, H = 1, tl = null, letters = [], markEl = null, probe = null, fluidOn = false, swapFrames = 0, idle = 0;
  var pointer = { x: 0.5, y: 0.5, px: 0.5, py: 0.5, moved: false, primed: false };
  var menuT = 0, menuDir = 0, menuDur = 0.55 + 0.07 * (menuSpans.length - 1), menuHover = window.matchMedia("(hover: hover) and (pointer: fine)").matches;

  // ---------- eases (GSAP: power1 = quad, power2 = cubic, power3 = quart, power4 = quint) ----------
  function inOut(n) { return function (p) { return p < 0.5 ? Math.pow(p * 2, n) / 2 : 1 - Math.pow((1 - p) * 2, n) / 2; }; }
  function out(n) { return function (p) { return 1 - Math.pow(1 - p, n); }; }
  function backOut(s) { return function (p) { var q = 1 - p; return 1 - q * q * ((s + 1) * q - s); }; }
  var P4IO = inOut(5), P2IO = inOut(3), P1O = out(2), P3O = out(4), P4O = out(5);
  function num(v, d) { v = Number(v); return isFinite(v) ? v : d; }
  function rnd(a, b) { return a + Math.random() * (b - a); }

  // ---------- a tiny timeline: tweens with absolute start times, played by one clock ----------
  function tween(at, dur, ease, fn) { tl.list.push({ at: at, dur: dur, ease: ease, fn: fn, state: 0 }); }
  function call(at, fn) { tl.list.push({ at: at, dur: 0, fn: fn, call: true, state: 0 }); }
  function advance(dt) {
    var cur = tl, done = true;
    if (!cur) return;
    cur.t += dt;
    for (var i = 0; i < cur.list.length; i++) {
      var it = cur.list[i];
      if (it.state === 2) continue;
      if (cur.t < it.at) { done = false; continue; }
      if (it.call) { it.state = 2; it.fn(); if (tl !== cur) return; continue; }
      var p = Math.min(1, (cur.t - it.at) / it.dur);
      it.fn(it.ease(p), it.state === 0);
      it.state = p >= 1 ? 2 : 1;
      if (it.state !== 2) done = false;
    }
    if (done && tl === cur) tl = null;
  }

  function boxW(rem) { lbox.style.width = "calc(" + rem.toFixed(3) + "rem * var(--ef-lir-k))"; }
  function pad(n) { n = String(Math.round(n)); while (n.length < 3) n = "0" + n; return n; }
  function setRise(el, pct) { el.style.transform = "translateY(" + pct.toFixed(2) + "%)"; }

  function buildTitle() {
    var word = String(opts.word || "Enrichr").trim().slice(0, 14) || "Enrichr";
    title.textContent = ""; letters = [];
    title.setAttribute("aria-label", word);
    word.toUpperCase().split("").forEach(function (ch) {
      var s = document.createElement("span"); s.className = "ef-lir__ht"; s.setAttribute("aria-hidden", "true");
      s.textContent = ch === " " ? " " : ch; title.appendChild(s); letters.push(s);
    });
    markEl = document.createElement("span"); markEl.className = "ef-lir__ht ef-lir__ht--mark"; markEl.setAttribute("aria-hidden", "true");
    markEl.innerHTML = '<svg viewBox="0 0 50 50" focusable="false"><path fill="currentColor" d="' + MARK + '"/></svg>';
    title.appendChild(markEl);
    probe = document.createElement("span"); probe.className = "ef-lir__probe"; title.appendChild(probe);
    mn.textContent = word.charAt(0).toUpperCase();
  }

  // ---------- the intro: loader (0 - 4.8 s), then the hero ----------
  function restState() {
    letters.forEach(function (l) { setRise(l, 0); });
    markEl.style.transform = "scale(1)";
  }
  function hideState() {
    box.classList.remove("is-done", "is-fluid");
    loader.style.height = "100%";
    setRise(mn, 120); ma.style.transform = "scale(0)"; boxW(1);
    shapeEl.style.opacity = "0"; shapeEl.style.transform = "scale(0.55)"; shapeEl.innerHTML = SHAPES[0];
    nbr.textContent = "100"; nbr.style.opacity = "1"; nbr.style.visibility = "visible";
    letters.forEach(function (l) { setRise(l, 120); });
    markEl.style.transform = "scale(0)";
    bottom.forEach(function (b) { b.style.opacity = "0"; });
  }
  function build() {
    tl = { t: 0, list: [] };
    hideState();
    tween(0, 1, P4IO, function (e) { setRise(mn, 120 * (1 - e)); });
    tween(0, 1, P4IO, function (e) { ma.style.transform = "scale(" + e.toFixed(4) + ")"; });
    tween(0.25, 1.1, P4IO, function (e) { boxW(1 + 15 * e); });
    tween(0.55, 2.4, P2IO, function (e) { nbr.textContent = pad(100 - 100 * e); });
    var rot = 0;
    SHAPES.forEach(function (svg, i) {
      tween(0.55 + i * (2.25 / SHAPES.length), 0.3, backOut(1.4), function (e, first) {
        if (first) { shapeEl.innerHTML = svg; shapeEl.style.opacity = "1"; rot = rnd(-16, 16); }
        shapeEl.style.transform = "rotate(" + rot.toFixed(2) + "deg) scale(" + (0.55 + 0.45 * e).toFixed(4) + ")";
      });
    });
    // '+=.15' after the counter ends (0.55 + 2.4), then the rest start together ('<'), the curtain 0.2 s later
    var out1 = 0.55 + 2.4 + 0.15;
    tween(out1, 0.5, P4IO, function (e) { shapeEl.style.transform = "rotate(" + rot.toFixed(2) + "deg) scale(" + (1 - e).toFixed(4) + ")"; });
    tween(out1, 0.7, P4IO, function (e) { boxW(16 - 15 * e); });
    tween(out1, 0.4, P1O, function (e) { nbr.style.opacity = String(1 - e); if (e >= 1) nbr.style.visibility = "hidden"; });
    tween(out1 + 0.2, 1.5, P4IO, function (e) { loader.style.height = (100 * (1 - e)).toFixed(3) + "%"; });
    var h0 = out1 + 0.2 + 1.5;
    call(h0, function () { box.classList.add("is-done"); });
    // hero: letters rise in a shuffled order (stagger 0.07 s, 1.6 s each), the mark pops in at 1.35 s
    var order = letters.slice();
    for (var i = order.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)), t = order[i]; order[i] = order[j]; order[j] = t; }
    order.forEach(function (l, k) { tween(h0 + 0.07 * k, 1.6, P4IO, function (e) { setRise(l, 120 * (1 - e)); }); });
    tween(h0 + 1.35, 0.6, backOut(0.9), function (e) { markEl.style.transform = "scale(" + e.toFixed(4) + ")"; });
    var fin = h0 + 0.07 * (order.length - 1) + 1.6;
    call(fin, function () { restState(); startFluid(); });
    [0.9, 1.05, 1.2].forEach(function (d, k) { if (bottom[k]) tween(fin + d, 1, P3O, function (e) { bottom[k].style.opacity = e.toFixed(4); }); });
    if (opts.autoReplay > 0) call(fin + 2.2 + opts.autoReplay, function () { replay(); });
  }
  function showStatic() {
    tl = null; stopFluid();
    box.classList.add("is-done", "is-static");
    restState();
    bottom.forEach(function (b) { b.style.opacity = "1"; });
  }
  function replay() {
    if (destroyed) return;
    clearTimeout(art);
    if (reduce) { showStatic(); return; }
    stopFluid();
    build();
    started = true;
    if (!raf) { last = performance.now(); raf = requestAnimationFrame(loop); }
  }

  // ---------- fluid mask: Jos Stam stable fluids in raw WebGL, the same passes and constants as the original ----------
  var gl = null, prog = {}, quad = null, fb = {}, texType = 0, filter = 0, baseTex = null, baseCanvas = null, baseCtx = null, dead = false;
  var VERT = "precision highp float;attribute vec2 aPosition;varying vec2 vUv,vL,vR,vT,vB;uniform vec2 texelSize;" +
    "void main(){vUv=aPosition*.5+.5;vL=vUv-vec2(texelSize.x,0.);vR=vUv+vec2(texelSize.x,0.);vT=vUv+vec2(0.,texelSize.y);vB=vUv-vec2(0.,texelSize.y);gl_Position=vec4(aPosition,0.,1.);}";
  var FRAG = {
    advection: "precision highp float;varying vec2 vUv;uniform sampler2D uVelocity,uSource;uniform vec2 uTexel;uniform float uDissipation;" +
      "void main(){vec2 coord=vUv-texture2D(uVelocity,vUv).xy*uTexel;gl_FragColor=uDissipation*texture2D(uSource,coord);}",
    splat: "precision highp float;varying vec2 vUv;uniform sampler2D uTarget;uniform float uAspect,uRadius;uniform vec2 uPoint;uniform vec3 uColor;" +
      "void main(){vec2 p=vUv-uPoint;p.x*=uAspect;vec3 s=exp(-dot(p,p)/uRadius)*uColor;gl_FragColor=vec4(texture2D(uTarget,vUv).xyz+s,1.);}",
    divergence: "precision highp float;varying vec2 vUv,vL,vR,vT,vB;uniform sampler2D uVelocity;" +
      "void main(){float L=texture2D(uVelocity,vL).x;float R=texture2D(uVelocity,vR).x;float T=texture2D(uVelocity,vT).y;float B=texture2D(uVelocity,vB).y;gl_FragColor=vec4(.5*(R-L+T-B),0.,0.,1.);}",
    pressure: "precision highp float;varying vec2 vUv,vL,vR,vT,vB;uniform sampler2D uPressure,uDivergence;" +
      "void main(){float L=texture2D(uPressure,vL).x;float R=texture2D(uPressure,vR).x;float T=texture2D(uPressure,vT).x;float B=texture2D(uPressure,vB).x;float div=texture2D(uDivergence,vUv).x;gl_FragColor=vec4((L+R+B+T-div)*.25,0.,0.,1.);}",
    gradient: "precision highp float;varying vec2 vUv,vL,vR,vT,vB;uniform sampler2D uPressure,uVelocity;" +
      "void main(){float L=texture2D(uPressure,vL).x;float R=texture2D(uPressure,vR).x;float T=texture2D(uPressure,vT).x;float B=texture2D(uPressure,vB).x;vec2 vel=texture2D(uVelocity,vUv).xy-.5*vec2(R-L,T-B);gl_FragColor=vec4(vel,0.,1.);}",
    display: "precision highp float;varying vec2 vUv;uniform sampler2D uDye,uBase;uniform float uRevealSize,uEdgeSoft,uEdgeWidth;" +
      "void main(){float dye=texture2D(uDye,vUv).r;vec4 base=texture2D(uBase,vUv);float m=clamp(smoothstep(uEdgeSoft,uEdgeSoft+uEdgeWidth,dye*uRevealSize),0.,1.);gl_FragColor=mix(base,vec4(0.),m);}"
  };
  function renderable(type) {
    var t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 4, 4, 0, gl.RGBA, type, null);
    var f = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, f);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0);
    var ok = gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE;
    gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.deleteFramebuffer(f); gl.deleteTexture(t);
    return ok;
  }
  function program(src) {
    function mk(t, s) { var sh = gl.createShader(t); gl.shaderSource(sh, s); gl.compileShader(sh); return gl.getShaderParameter(sh, gl.COMPILE_STATUS) ? sh : null; }
    var v = mk(gl.VERTEX_SHADER, VERT), f = mk(gl.FRAGMENT_SHADER, src);
    if (!v || !f) return null;
    var p = gl.createProgram(); gl.attachShader(p, v); gl.attachShader(p, f); gl.bindAttribLocation(p, 0, "aPosition"); gl.linkProgram(p);
    gl.deleteShader(v); gl.deleteShader(f);
    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) return null;
    var u = {}, n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS);
    for (var i = 0; i < n; i++) { var nm = gl.getActiveUniform(p, i).name; u[nm] = gl.getUniformLocation(p, nm); }
    return { p: p, u: u };
  }
  function fbo(size) {
    var t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, texType, null);
    var f = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, f);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0);
    gl.viewport(0, 0, size, size); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT);
    return { tex: t, fbo: f, size: size };
  }
  function dbl(size) { var a = fbo(size), b = fbo(size); return { read: a, write: b, swap: function () { var t = this.read; this.read = this.write; this.write = t; } }; }
  function initGL() {
    var attrs = { alpha: true, depth: false, stencil: false, antialias: false, premultipliedAlpha: false, preserveDrawingBuffer: false };
    gl = fcan.getContext("webgl", attrs) || fcan.getContext("experimental-webgl", attrs);
    if (!gl) return false;
    // half-float buffers keep negative velocities; plain bytes would clamp them, so without float targets there is no fluid
    var hf = gl.getExtension("OES_texture_half_float"), hfl = gl.getExtension("OES_texture_half_float_linear");
    if (hf && renderable(hf.HALF_FLOAT_OES)) { texType = hf.HALF_FLOAT_OES; filter = hfl ? gl.LINEAR : gl.NEAREST; }
    else {
      var ft = gl.getExtension("OES_texture_float"), ftl = gl.getExtension("OES_texture_float_linear");
      if (ft && renderable(gl.FLOAT)) { texType = gl.FLOAT; filter = ftl ? gl.LINEAR : gl.NEAREST; } else return false;
    }
    for (var k in FRAG) { prog[k] = program(FRAG[k]); if (!prog[k]) return false; }
    quad = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, quad);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
    gl.disable(gl.BLEND); gl.disable(gl.DEPTH_TEST);
    fb.velocity = dbl(FLUID.SIM_RES); fb.pressure = dbl(FLUID.SIM_RES); fb.divergence = fbo(FLUID.SIM_RES); fb.dye = dbl(FLUID.DYE_RES);
    baseTex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, baseTex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    baseCanvas = document.createElement("canvas"); baseCtx = baseCanvas.getContext("2d");
    return true;
  }
  function blit(target) {
    if (target) { gl.bindFramebuffer(gl.FRAMEBUFFER, target.fbo); gl.viewport(0, 0, target.size, target.size); }
    else { gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, fcan.width, fcan.height); }
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  }
  function bind(tex, unit) { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, tex); return unit; }
  function sizeCanvas() {
    var dpr = Math.min(window.devicePixelRatio || 1, 2);
    fcan.width = Math.max(1, Math.round(W * dpr)); fcan.height = Math.max(1, Math.round(H * dpr));
  }
  // bake the cream page and the headline into a texture, letter by letter at the DOM positions, on the DOM baseline
  function bake() {
    if (!gl) return;
    var rect = box.getBoundingClientRect(), dpr = Math.min(window.devicePixelRatio || 1, 2);
    baseCanvas.width = Math.max(1, Math.round(rect.width * dpr)); baseCanvas.height = Math.max(1, Math.round(rect.height * dpr));
    var ctx = baseCtx; ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    ctx.fillStyle = opts.background; ctx.fillRect(0, 0, rect.width, rect.height);
    var cs = getComputedStyle(title);
    ctx.fillStyle = opts.ink; ctx.font = cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
    ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
    var baseline = probe.getBoundingClientRect().top - rect.top;
    letters.forEach(function (sp) { var r = sp.getBoundingClientRect(); ctx.fillText(sp.textContent, r.left - rect.left, baseline); });
    var mr = markEl.getBoundingClientRect();
    if (window.Path2D && mr.width > 0) {
      ctx.save(); ctx.translate(mr.left - rect.left, mr.top - rect.top); ctx.scale(mr.width / 50, mr.height / 50);
      ctx.fill(new Path2D(MARK)); ctx.restore();
    }
    gl.bindTexture(gl.TEXTURE_2D, baseTex);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, baseCanvas);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
  }
  function splat(x, y, dx, dy, strength) {
    var P = prog.splat; gl.useProgram(P.p);
    gl.uniform1f(P.u.uAspect, fcan.width / fcan.height); gl.uniform1f(P.u.uRadius, opts.brush * 1e-5); gl.uniform2f(P.u.uPoint, x, y);
    gl.uniform2f(P.u.texelSize, 1 / FLUID.SIM_RES, 1 / FLUID.SIM_RES);
    gl.uniform1i(P.u.uTarget, bind(fb.velocity.read.tex, 0)); gl.uniform3f(P.u.uColor, dx, dy, 0);
    blit(fb.velocity.write); fb.velocity.swap();
    gl.uniform2f(P.u.texelSize, 1 / FLUID.DYE_RES, 1 / FLUID.DYE_RES);
    gl.uniform1i(P.u.uTarget, bind(fb.dye.read.tex, 0)); gl.uniform3f(P.u.uColor, strength, strength, strength);
    blit(fb.dye.write); fb.dye.swap();
  }
  function step(fadeSq) {
    var s = 1 / FLUID.SIM_RES, d = 1 / FLUID.DYE_RES, P = prog.advection;
    gl.useProgram(P.p);
    gl.uniform2f(P.u.texelSize, s, s); gl.uniform2f(P.u.uTexel, s, s);
    gl.uniform1i(P.u.uVelocity, bind(fb.velocity.read.tex, 0)); gl.uniform1i(P.u.uSource, bind(fb.velocity.read.tex, 0));
    gl.uniform1f(P.u.uDissipation, FLUID.VEL_DISS);
    blit(fb.velocity.write); fb.velocity.swap();
    gl.uniform2f(P.u.texelSize, d, d); gl.uniform2f(P.u.uTexel, d, d);
    gl.uniform1i(P.u.uVelocity, bind(fb.velocity.read.tex, 0)); gl.uniform1i(P.u.uSource, bind(fb.dye.read.tex, 1));
    gl.uniform1f(P.u.uDissipation, opts.trail + (0.97 - opts.trail) * fadeSq);
    blit(fb.dye.write); fb.dye.swap();
    P = prog.divergence; gl.useProgram(P.p);
    gl.uniform2f(P.u.texelSize, s, s); gl.uniform1i(P.u.uVelocity, bind(fb.velocity.read.tex, 0));
    blit(fb.divergence);
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb.pressure.read.fbo); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT);
    P = prog.pressure; gl.useProgram(P.p);
    gl.uniform2f(P.u.texelSize, s, s); gl.uniform1i(P.u.uDivergence, bind(fb.divergence.tex, 0));
    for (var i = 0; i < FLUID.PRESSURE_ITERS; i++) { gl.uniform1i(P.u.uPressure, bind(fb.pressure.read.tex, 1)); blit(fb.pressure.write); fb.pressure.swap(); }
    P = prog.gradient; gl.useProgram(P.p);
    gl.uniform2f(P.u.texelSize, s, s);
    gl.uniform1i(P.u.uPressure, bind(fb.pressure.read.tex, 0)); gl.uniform1i(P.u.uVelocity, bind(fb.velocity.read.tex, 1));
    blit(fb.velocity.write); fb.velocity.swap();
  }
  function display() {
    var P = prog.display; gl.useProgram(P.p);
    gl.uniform2f(P.u.texelSize, 1 / FLUID.DYE_RES, 1 / FLUID.DYE_RES);
    gl.uniform1i(P.u.uDye, bind(fb.dye.read.tex, 0)); gl.uniform1i(P.u.uBase, bind(baseTex, 1));
    gl.uniform1f(P.u.uRevealSize, opts.reveal); gl.uniform1f(P.u.uEdgeSoft, FLUID.EDGE_SOFT); gl.uniform1f(P.u.uEdgeWidth, FLUID.EDGE_WIDTH);
    blit(null);
  }
  function clearSim() {
    if (!gl) return;
    [fb.dye.read, fb.dye.write, fb.velocity.read, fb.velocity.write, fb.pressure.read, fb.pressure.write].forEach(function (f) {
      gl.bindFramebuffer(gl.FRAMEBUFFER, f.fbo); gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT);
    });
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  }
  function startFluid() {
    if (reduce || destroyed) return;
    if (!gl && !dead) { if (!initGL()) { dead = true; gl = null; fcan.style.display = "none"; box.classList.add("is-nogl"); } }
    if (dead) return;
    sizeCanvas(); bake(); clearSim(); display();
    fluidOn = true; idle = 0; pointer.moved = false; pointer.primed = false;
    swapFrames = 2; // like the original: let the canvas draw twice before the DOM headline steps aside
  }
  function stopFluid() {
    fluidOn = false; swapFrames = 0;
    box.classList.remove("is-fluid");
    if (gl) { clearSim(); }
  }
  function fluidFrame() {
    var r = box.getBoundingClientRect();
    var fade = Math.max(0, Math.min(1, -r.top / Math.max(1, r.height))), fadeSq = fade * fade, power = 1 - fadeSq;
    if (pointer.moved) {
      var dx = pointer.x - pointer.px, dy = pointer.y - pointer.py;
      if ((dx || dy) && power > 0.001) { splat(pointer.x, pointer.y, dx * FLUID.SPLAT_FORCE * power, dy * FLUID.SPLAT_FORCE * power, power); idle = 0; }
      pointer.px = pointer.x; pointer.py = pointer.y; pointer.moved = false;
    }
    // once the ink has had ten seconds to fade there is nothing left to simulate: rest until the pointer moves again
    if (idle++ > 600) return;
    step(fadeSq);
    display();
  }
  function move(e) {
    if (!fluidOn) return;
    var r = fcan.getBoundingClientRect();
    var x = (e.clientX - r.left) / Math.max(1, r.width), y = 1 - (e.clientY - r.top) / Math.max(1, r.height);
    if (!pointer.primed) { pointer.px = x; pointer.py = y; pointer.primed = true; }
    pointer.x = x; pointer.y = y; pointer.moved = true;
  }

  // ---------- menu: links slide up (0.55 s power4.out, 0.07 s apart) and the plus turns 45deg (0.45 s); reverses on leave ----------
  function menuApply() {
    menuBtn.style.transform = "rotate(" + (45 * P4O(Math.min(1, menuT / 0.45))).toFixed(2) + "deg)";
    menuSpans.forEach(function (s, i) { var p = Math.max(0, Math.min(1, (menuT - 0.07 * i) / 0.55)); setRise(s, 110 * (1 - P4O(p))); });
  }
  function menuPlay(dir) { menuDir = dir; menuBtn.setAttribute("aria-expanded", dir > 0 ? "true" : "false"); if (!raf) { last = performance.now(); raf = requestAnimationFrame(loop); } }
  function onEnter() { if (menuHover) menuPlay(1); }
  function onLeave() { if (menuHover) menuPlay(-1); }
  function onMenuClick() { menuPlay(menuT > 0 && menuDir >= 0 ? -1 : 1); }

  // ---------- one loop for the intro, the menu and the fluid ----------
  function loop(now) {
    raf = 0;
    var dt = Math.min(0.05, (now - last) / 1000 || 0); last = now;
    var busy = false;
    if (menuDir) {
      menuT = Math.max(0, Math.min(menuDur, menuT + dt * menuDir)); menuApply();
      if (menuT <= 0 || menuT >= menuDur) menuDir = 0; else busy = true;
    }
    if (visible && !document.hidden) {
      if (tl && started) { advance(dt * opts.speed); }
      if (fluidOn) {
        fluidFrame();
        if (swapFrames > 0 && --swapFrames === 0) box.classList.add("is-fluid");
      }
    }
    if (((tl || fluidOn) && visible) || busy) raf = requestAnimationFrame(loop);
  }

  function layout() {
    W = Math.max(1, box.clientWidth); H = Math.max(1, box.clientHeight);
    box.style.setProperty("--ef-lir-fs", Math.min(0.205 * W, 0.44 * H).toFixed(1) + "px");
    box.style.setProperty("--ef-lir-k", Math.max(0.55, Math.min(1, W / 760, H / 460)).toFixed(3));
    box.style.setProperty("--ef-lir-nf", Math.min(136, Math.max(64 * Math.max(0.55, Math.min(1, W / 760)), W * 0.1)).toFixed(1) + "px");
    box.classList.toggle("is-narrow", W < 560);
  }
  function onResize() {
    layout();
    if (fluidOn && gl) { clearTimeout(rt); rt = setTimeout(function () { if (!destroyed && fluidOn) { sizeCanvas(); bake(); display(); } }, 120); }
  }

  function update(partial) {
    var prev = opts;
    opts = Object.assign({ word: "Enrichr", photo: "corgi-1", speed: 1, autoReplay: 0, reveal: 3.9, trail: 0.988, brush: 6, background: "#fbf8f1", ink: "#0c1e18", loaderBackground: "#0c1e18", loaderText: "#fbf8f1", accent: "#e6ff55" }, opts, partial || {});
    opts.speed = Math.max(0.1, num(opts.speed, 1)); opts.autoReplay = Math.max(0, num(opts.autoReplay, 0));
    opts.reveal = Math.max(0.1, num(opts.reveal, 3.9)); opts.trail = Math.min(0.999, Math.max(0.9, num(opts.trail, 0.988))); opts.brush = Math.max(0.5, num(opts.brush, 6));
    var ph = /^corgi-[1-6]$/.test(opts.photo) ? opts.photo : "corgi-1";
    if (prev.photo !== ph) { photo.src = "/img/library/" + ph + ".jpg"; photo.alt = ALT[ph]; }
    box.style.setProperty("--ef-lir-bg", opts.background); box.style.setProperty("--ef-lir-ink", opts.ink);
    box.style.setProperty("--ef-lir-lbg", opts.loaderBackground); box.style.setProperty("--ef-lir-ltx", opts.loaderText);
    box.style.setProperty("--ef-lir-acc", opts.accent);
    if (prev.word !== opts.word) {
      buildTitle();
      if (reduce) showStatic();
      else if (!started) hideState();
      else if (tl) { replay(); return; } // a new word mid-intro restarts the intro with it
      else restState();
    }
    if (destroyed) return;
    if (fluidOn && gl && (prev.word !== opts.word || prev.background !== opts.background || prev.ink !== opts.ink)) {
      // let the new letters settle in the layout, then bake them again
      requestAnimationFrame(function () { if (fluidOn) { restState(); bake(); display(); } });
    }
    // a new auto replay value after the intro has finished starts counting from now
    if (prev.autoReplay !== undefined && prev.autoReplay !== opts.autoReplay && started && !tl && !reduce) {
      clearTimeout(art);
      if (opts.autoReplay > 0) art = setTimeout(replay, opts.autoReplay * 1000);
    }
  }

  update(o);
  layout();
  box.addEventListener("pointermove", move);
  replayBtn.addEventListener("click", replay);
  menu.addEventListener("mouseenter", onEnter); menu.addEventListener("mouseleave", onLeave); menuBtn.addEventListener("click", onMenuClick);
  if (reduce) showStatic();
  else {
    hideState();
    // start the intro the first time the element is on screen, so a tile further down the page still shows it
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver(function (e) {
        visible = e[0].isIntersecting;
        if (visible && !started) replay();
        else if (visible && !raf && (tl || fluidOn)) { last = performance.now(); raf = requestAnimationFrame(loop); }
      }, { threshold: 0.15 });
      io.observe(box);
    } else replay();
  }
  if ("ResizeObserver" in window) { ro = new ResizeObserver(function () { if (!destroyed) onResize(); }); ro.observe(box); }
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(function () { if (!destroyed) { layout(); if (fluidOn && gl) { bake(); display(); } } });

  return {
    update: update,
    replay: replay,
    destroy: function () {
      destroyed = true; cancelAnimationFrame(raf); raf = 0; clearTimeout(rt); clearTimeout(art); tl = null; fluidOn = false;
      if (io) io.disconnect();
      if (ro) ro.disconnect();
      box.removeEventListener("pointermove", move);
      replayBtn.removeEventListener("click", replay);
      menu.removeEventListener("mouseenter", onEnter); menu.removeEventListener("mouseleave", onLeave); menuBtn.removeEventListener("click", onMenuClick);
      if (gl) { var lose = gl.getExtension("WEBGL_lose_context"); if (lose) lose.loseContext(); gl = null; }
    }
  };
}

// Usage
var fx = mount(document.querySelector("#my-root"), {"word":"Enrichr","photo":"corgi-1","speed":1,"autoReplay":0,"reveal":3.9,"trail":0.988,"brush":6,"background":"#fbf8f1","ink":"#0c1e18","loaderBackground":"#0c1e18","loaderText":"#fbf8f1","accent":"#e6ff55"});