motion-library 0.0.0-stage → 0.1.0

package/anims/hover/spotlight.js

@@ -0,0 +1,31 @@
+// Spotlight reveal: a dark layer has a soft hole cut by a CSS mask that follows the pointer.
+const PARAMS = { radius: 110 };
+
+export default function (stage) {
+  const words = ['FRAME', 'SPRING', 'EASE', 'CURVE', 'TIMING', 'WEIGHT', 'ARC', 'SNAP', 'DRIFT', 'POP', 'BLUR', 'LOOP'];
+  const root = document.createElement('div');
+  root.className = 'sl-root';
+  root.innerHTML = `<style>
+    .sl-root { position: absolute; inset: 0; overflow: hidden; font-family: "Mona Sans", system-ui, sans-serif; cursor: none; }
+    .sl-under { position: absolute; inset: -4%; background: #fab005; display: flex; flex-wrap: wrap; align-content: center; gap: 0 3vmin; padding: 2vmin; font-weight: 900; font-size: 11vmin; line-height: 1.02; color: #15171a; letter-spacing: -0.03em; }
+    .sl-under span:nth-child(3n) { color: #e8590c; } .sl-under span:nth-child(4n) { color: #fff; }
+    .sl-over { position: absolute; inset: 0; background: #15171a; }
+    .sl-hint { position: absolute; left: 6%; bottom: 7%; color: #868e96; font-size: max(11px, 3.6vmin); font-weight: 600; }
+  </style><div class="sl-under">${words.map(w => `<span>${w}</span>`).join('')}</div><div class="sl-over"></div><div class="sl-hint">Move to look around</div>`;
+  stage.append(root);
+  const over = root.querySelector('.sl-over');
+  let px = 0, py = 0, lastMove = -1e9, sx = root.clientWidth / 2, sy = root.clientHeight / 2, raf;
+  const onMove = e => { const b = root.getBoundingClientRect(); px = e.clientX - b.left; py = e.clientY - b.top; lastMove = performance.now(); };
+  root.addEventListener('pointermove', onMove);
+  function frame(now) {
+    let x = px, y = py;
+    if (now - lastMove > 1500) { const t = now / 1000, w = root.clientWidth, h = root.clientHeight; x = w / 2 + Math.cos(t * 0.9) * w * 0.32; y = h / 2 + Math.sin(t * 1.4) * h * 0.26; }
+    sx += (x - sx) * 0.14; sy += (y - sy) * 0.14;   // the light trails the pointer slightly
+    const r = PARAMS.radius;
+    const mask = `radial-gradient(circle ${r}px at ${sx}px ${sy}px, transparent 0, transparent ${r * 0.55}px, #000 ${r}px)`;
+    over.style.maskImage = mask; over.style.webkitMaskImage = mask;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.removeEventListener('pointermove', onMove); root.remove(); };
+}

package/anims/hover/tilt.js

@@ -0,0 +1,36 @@
+// 3D tilt card: pointer position becomes rotateX/rotateY through a spring; a glare moves opposite the tilt.
+const PARAMS = { maxTilt: 14, stiffness: 120 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'tl-root';
+  root.innerHTML = `<style>
+    .tl-root { position: absolute; inset: 0; display: grid; place-items: center; background: #f3ead2; perspective: 700px; font-family: "Mona Sans", system-ui, sans-serif; }
+    .tl-card { position: relative; width: min(58%, 260px); aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; transform-style: preserve-3d; will-change: transform; background: #ff922b; }
+    .tl-sky { position: absolute; inset: 0 0 45% 0; background: #ffd8a8; }
+    .tl-sun { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #f76707; left: 27%; top: 30%; }
+    .tl-sea { position: absolute; inset: 55% 0 0 0; background: #1c3d5a; }
+    .tl-sea i { position: absolute; left: 12%; right: 12%; height: 3%; background: #f76707; border-radius: 4px; }
+    .tl-t { position: absolute; left: 8%; bottom: 7%; color: #fff; font-weight: 750; font-size: clamp(12px, 5vmin, 22px); }
+    .tl-glare { position: absolute; inset: -50%; background: radial-gradient(circle at center, rgba(255,255,255,.55), rgba(255,255,255,0) 40%); pointer-events: none; mix-blend-mode: soft-light; }
+  </style><div class="tl-card"><div class="tl-sky"></div><div class="tl-sun"></div><div class="tl-sea"><i style="top:18%"></i><i style="top:40%;left:22%;right:22%"></i><i style="top:62%;left:32%;right:32%"></i></div><div class="tl-t">Golden hour</div><div class="tl-glare"></div></div>`;
+  stage.append(root);
+  const card = root.querySelector('.tl-card'), glare = root.querySelector('.tl-glare');
+  let nx = 0, ny = 0, lastMove = -1e9;
+  const onMove = e => { const b = card.getBoundingClientRect(); nx = ((e.clientX - b.left) / b.width) * 2 - 1; ny = ((e.clientY - b.top) / b.height) * 2 - 1; lastMove = performance.now(); };
+  root.addEventListener('pointermove', onMove);
+  const rx = { x: 0, v: 0 }, ry = { x: 0, v: 0 };
+  const spring = (s, t, dt) => { const k = PARAMS.stiffness, c = 2 * Math.sqrt(k) * 0.7; s.v += (-k * (s.x - t) - c * s.v) * dt; s.x += s.v * dt; };
+  let last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.032, (now - last) / 1000); last = now;
+    let x = Math.max(-1, Math.min(1, nx)), y = Math.max(-1, Math.min(1, ny));
+    if (now - lastMove > 1500) { const t = now / 1000; x = Math.sin(t * 1.2) * 0.9; y = Math.cos(t * 0.9) * 0.7; }
+    spring(rx, -y * PARAMS.maxTilt, dt); spring(ry, x * PARAMS.maxTilt, dt);
+    card.style.transform = `rotateX(${rx.x}deg) rotateY(${ry.x}deg)`;
+    glare.style.transform = `translate(${-ry.x * 2.2}%, ${rx.x * 2.2}%)`;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.removeEventListener('pointermove', onMove); root.remove(); };
+}

package/anims/micro/arc-spinner.js

@@ -0,0 +1,22 @@
+// Arc spinner: the ring rotates while its dash grows and shrinks on a different period, so it never quite repeats.
+const PARAMS = { speed: 1 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'as-root';
+  const rot = (2 / PARAMS.speed).toFixed(2), dash = (1.5 / PARAMS.speed).toFixed(2);
+  root.innerHTML = `<style>
+    .as-root { position: absolute; inset: 0; display: grid; place-items: center; grid-auto-flow: column; gap: 9%; background: #1a0f14; container-type: size; }
+    .as-root svg { width: 26cqmin; height: 26cqmin; animation: as-rot ${rot}s linear infinite; }
+    .as-root svg:nth-child(2) { width: 16cqmin; height: 16cqmin; animation-duration: ${(rot * 0.8).toFixed(2)}s; }
+    .as-root svg:nth-child(3) { width: 10cqmin; height: 10cqmin; animation-duration: ${(rot * 0.6).toFixed(2)}s; }
+    .as-root circle { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 200; stroke-dashoffset: 0; animation: as-dash ${dash}s ease-in-out infinite; }
+    @keyframes as-rot { to { transform: rotate(360deg); } }
+    @keyframes as-dash { 0% { stroke-dasharray: 1 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90 200; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90 200; stroke-dashoffset: -124; } }
+  </style>
+  <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" stroke="#ff4d8d"/></svg>
+  <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" stroke="#ffd43b"/></svg>
+  <svg viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" stroke="#f1f3f5"/></svg>`;
+  stage.append(root);
+  return () => root.remove();
+}

package/anims/micro/like-burst.js

@@ -0,0 +1,42 @@
+// Like burst: the heart squashes, pops past full size and settles while a ring and sparks fire on the same frame.
+const PARAMS = { particles: 10, spread: 1 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'lb-root';
+  root.innerHTML = `<style>
+    .lb-root { position: absolute; inset: 0; display: grid; place-items: center; background: #2a0f1c; container-type: size; }
+    .lb-btn { position: relative; width: 30cqmin; height: 30cqmin; border: 0; background: none; padding: 0; cursor: pointer; }
+    .lb-btn svg { position: relative; width: 100%; height: 100%; z-index: 1; }
+    .lb-btn path { fill: #4a2236; transition: fill .15s; }
+    .lb-btn.on path { fill: #ff3b6b; }
+    .lb-ring { position: absolute; inset: -20%; border-radius: 50%; border: 2cqmin solid #ff8fab; opacity: 0; }
+    .lb-spark { position: absolute; left: 50%; top: 50%; width: 3.4cqmin; height: 3.4cqmin; margin: -1.7cqmin; border-radius: 50%; opacity: 0; }
+  </style><button class="lb-btn" type="button" aria-label="Like" aria-pressed="false"><span class="lb-ring"></span><svg viewBox="0 0 24 24"><path d="M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.2 5.3 3.2 1.7-2 3.1-3.2 5.3-3.2 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z"/></svg></button>`;
+  stage.append(root);
+  const btn = root.querySelector('.lb-btn'), svg = btn.querySelector('svg'), ring = root.querySelector('.lb-ring');
+  const colours = ['#ff3b6b', '#ffd43b', '#ff8fab', '#74c0fc', '#ffffff'];
+
+  function burst() {
+    const on = !btn.classList.contains('on');
+    btn.classList.toggle('on', on); btn.setAttribute('aria-pressed', String(on));
+    if (!on) return;
+    svg.animate([{ transform: 'scale(1)' }, { transform: 'scale(0.78, 0.72)', offset: 0.18 }, { transform: 'scale(1.22)', offset: 0.5 }, { transform: 'scale(0.95)', offset: 0.75 }, { transform: 'scale(1)' }],
+      { duration: 620, easing: 'cubic-bezier(0.33, 1, 0.68, 1)' });
+    ring.animate([{ transform: 'scale(0.3)', opacity: 0.9, borderWidth: '3cqmin' }, { transform: 'scale(1.15)', opacity: 0, borderWidth: '0cqmin' }], { duration: 520, delay: 90, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' });
+    const n = Math.round(PARAMS.particles), size = btn.clientWidth;
+    for (let i = 0; i < n; i++) {
+      const s = document.createElement('i'); s.className = 'lb-spark'; s.style.background = colours[i % colours.length]; btn.append(s);
+      const a = (i / n) * Math.PI * 2 + Math.random() * 0.4, d = size * (0.7 + Math.random() * 0.35) * PARAMS.spread;
+      s.animate([{ transform: 'translate(0,0) scale(1)', opacity: 1 }, { transform: `translate(${Math.cos(a) * d}px, ${Math.sin(a) * d}px) scale(0.2)`, opacity: 0 }],
+        { duration: 600 + Math.random() * 200, delay: 90, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }).onfinish = () => s.remove();
+    }
+  }
+  let manual = -1e9;
+  const onClick = () => { burst(); manual = performance.now(); };
+  btn.addEventListener('click', onClick);
+  // demo loop: reset quietly, then like again, so every beat shows the burst
+  const auto = setInterval(() => { if (performance.now() - manual < 3000) return; btn.classList.remove('on'); burst(); }, 1200);
+  const first = setTimeout(burst, 350);
+  return () => { clearTimeout(first); clearInterval(auto); btn.removeEventListener('click', onClick); root.remove(); };
+}

package/anims/micro/skeleton.js

@@ -0,0 +1,36 @@
+// Skeleton shimmer: placeholders shaped like the real layout, a light sweep while loading, then a cross-fade to content.
+const PARAMS = { speed: 1.4 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'sk-root';
+  const dur = (1.6 / PARAMS.speed).toFixed(2);
+  root.innerHTML = `<style>
+    .sk-root { position: absolute; inset: 0; display: grid; place-items: center; background: #f1f3f5; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; }
+    .sk-card { position: relative; width: 76cqw; max-width: 340px; background: #fff; border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
+    .sk-layer { display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; align-items: center; }
+    .sk-real { position: absolute; inset: 14px; opacity: 0; }
+    .sk-b { border-radius: 6px; background: linear-gradient(90deg, #eceef1 0%, #eceef1 40%, #f8f9fa 50%, #eceef1 60%, #eceef1 100%); background-size: 300% 100%; animation: sk-sh ${dur}s linear infinite; }
+    @keyframes sk-sh { from { background-position: 100% 0; } to { background-position: 0 0; } }
+    .sk-av { width: 40px; height: 40px; border-radius: 50%; }
+    .sk-img { grid-column: 1 / -1; height: 26cqh; border-radius: 10px; }
+    .sk-av.r { background: #d63c74; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
+    .sk-name { font-weight: 700; font-size: 14px; color: #15171a; } .sk-meta { font-size: 12.5px; color: #5d6166; }
+    .sk-img.r { background: #ffdeeb; display: grid; place-items: center; color: #a61e4d; font-weight: 750; font-size: 6cqmin; }
+  </style>
+  <div class="sk-card">
+    <div class="sk-layer sk-skel"><div class="sk-b sk-av"></div><div style="display:grid;gap:7px"><div class="sk-b" style="height:12px;width:60%"></div><div class="sk-b" style="height:10px;width:40%"></div></div><div class="sk-b sk-img"></div></div>
+    <div class="sk-layer sk-real"><div class="sk-av r">MJ</div><div><div class="sk-name">Maya Jensen</div><div class="sk-meta">Posted a new loop · 2 min ago</div></div><div class="sk-img r">Bounce v3</div></div>
+  </div>`;
+  stage.append(root);
+  const skel = root.querySelector('.sk-skel'), real = root.querySelector('.sk-real');
+  let loaded = false;
+  const swap = () => {
+    loaded = !loaded;
+    const o = { duration: 350, easing: 'cubic-bezier(0.23, 1, 0.32, 1)', fill: 'forwards' };
+    real.animate([{ opacity: loaded ? 0 : 1 }, { opacity: loaded ? 1 : 0 }], o);
+    skel.animate([{ opacity: loaded ? 1 : 0 }, { opacity: loaded ? 0 : 1 }], o);
+  };
+  let t1 = setTimeout(function tick() { swap(); t1 = setTimeout(tick, loaded ? 1800 : 2200); }, 2200);
+  return () => { clearTimeout(t1); root.remove(); };
+}

package/anims/micro/submit-success.js

@@ -0,0 +1,45 @@
+// Submit to success: the button morphs into a spinner, then draws a tick, so one control shows every state.
+const PARAMS = { duration: 400 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'ss-root';
+  root.innerHTML = `<style>
+    .ss-root { position: absolute; inset: 0; display: grid; place-items: center; background: #fff0f6; font-family: "Mona Sans", system-ui, sans-serif; }
+    .ss-btn { position: relative; width: 180px; height: 56px; border: 0; padding: 0; background: #d63c74; color: #fff; font: 700 17px "Mona Sans", system-ui, sans-serif; cursor: pointer; clip-path: inset(0 0 round 28px); }
+    .ss-btn > * { position: absolute; inset: 0; display: grid; place-items: center; }
+    .ss-spin, .ss-tick { opacity: 0; }
+    .ss-spin svg { width: 30px; height: 30px; animation: ss-rot .8s linear infinite; }
+    @keyframes ss-rot { to { transform: rotate(360deg); } }
+    .ss-tick svg { width: 28px; height: 28px; }
+  </style><button class="ss-btn" type="button"><span class="ss-label">Send message</span><span class="ss-spin"><svg viewBox="0 0 30 30"><circle cx="15" cy="15" r="12" fill="none" stroke="#fff" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="48 100"/></svg></span><span class="ss-tick"><svg viewBox="0 0 28 28"><path d="M6 14.5l5.2 5.2L22 8.8" fill="none" stroke="#fff" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span></button>`;
+  stage.append(root);
+  const btn = root.querySelector('.ss-btn'), label = root.querySelector('.ss-label'), spin = root.querySelector('.ss-spin'), tick = root.querySelector('.ss-tick'), path = tick.querySelector('path');
+  const len = path.getTotalLength(); path.style.strokeDasharray = len; path.style.strokeDashoffset = len;
+  const ease = 'cubic-bezier(0.23, 1, 0.32, 1)', D = PARAMS.duration, side = (180 - 56) / 2;
+  const opts = (extra = {}) => ({ duration: D, easing: ease, fill: 'forwards', ...extra });
+  let timers = [], running = false;
+  const later = (fn, ms) => timers.push(setTimeout(fn, ms));
+  function run() {
+    if (running) return; running = true;
+    label.animate([{ opacity: 1 }, { opacity: 0 }], opts({ duration: D * 0.4 }));
+    btn.animate([{ clipPath: 'inset(0 0 round 28px)' }, { clipPath: `inset(0 ${side}px round 28px)` }], opts());
+    spin.animate([{ opacity: 0 }, { opacity: 1 }], opts({ delay: D * 0.6, duration: 200 }));
+    later(() => {
+      spin.animate([{ opacity: 1 }, { opacity: 0 }], opts({ duration: 150 }));
+      btn.animate([{ background: '#d63c74' }, { background: '#2f9e44' }], opts({ duration: 250 }));
+      tick.animate([{ opacity: 0 }, { opacity: 1 }], opts({ duration: 100 }));
+      path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], opts({ duration: 420, delay: 80 }));
+    }, D + 1300);
+    later(() => {
+      tick.animate([{ opacity: 1 }, { opacity: 0 }], opts({ duration: 200 }));
+      btn.animate([{ clipPath: `inset(0 ${side}px round 28px)`, background: '#2f9e44' }, { clipPath: 'inset(0 0 round 28px)', background: '#d63c74' }], opts());
+      label.animate([{ opacity: 0 }, { opacity: 1 }], opts({ delay: D * 0.5, duration: 200 }));
+    }, D + 2900);
+    later(() => { running = false; }, D * 2 + 3000);
+  }
+  btn.addEventListener('click', run);
+  run();
+  const loop = setInterval(run, D * 2 + 4000);
+  return () => { timers.forEach(clearTimeout); clearInterval(loop); btn.removeEventListener('click', run); root.remove(); };
+}

package/anims/micro/toggle.js

@@ -0,0 +1,35 @@
+// Toggle spring: the knob rides a spring and stretches with its speed; the track colour follows the knob.
+const PARAMS = { stiffness: 300, damping: 20 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'tg-root';
+  root.innerHTML = `<style>
+    .tg-root { position: absolute; inset: 0; display: grid; place-items: center; background: #fff0f6; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; }
+    .tg-sw { position: relative; width: 44cqmin; height: 24cqmin; border-radius: 12cqmin; border: 0; padding: 0; cursor: pointer; background: #d0d4da; }
+    .tg-knob { position: absolute; top: 2.4cqmin; left: 2.4cqmin; height: 19.2cqmin; width: 19.2cqmin; border-radius: 9.6cqmin; background: #fff; box-shadow: 0 1cqmin 2cqmin rgba(80, 10, 40, .18); will-change: transform, width; }
+    .tg-label { position: absolute; bottom: 14%; font-size: max(11px, 4cqmin); font-weight: 600; color: #a61e4d; }
+  </style><button class="tg-sw" type="button" role="switch" aria-checked="false" aria-label="Notifications"><span class="tg-knob"></span></button><div class="tg-label">Notifications off</div>`;
+  stage.append(root);
+  const sw = root.querySelector('.tg-sw'), knob = root.querySelector('.tg-knob'), label = root.querySelector('.tg-label');
+  let on = false, x = 0, v = 0, manual = -1e9, last = performance.now(), raf;
+  const set = val => { on = val; sw.setAttribute('aria-checked', String(on)); label.textContent = on ? 'Notifications on' : 'Notifications off'; };
+  const onClick = () => { set(!on); manual = performance.now(); };
+  sw.addEventListener('click', onClick);
+  const auto = setInterval(() => { if (performance.now() - manual > 3000) set(!on); }, 1300);
+  const mix = (a, b, t) => `rgb(${a.map((c, i) => Math.round(c + (b[i] - c) * t)).join(',')})`;
+  function frame(now) {
+    const dt = Math.min(0.032, (now - last) / 1000); last = now;
+    for (let i = 0; i < 4; i++) { const h = dt / 4; v += (-PARAMS.stiffness * (x - (on ? 1 : 0)) - PARAMS.damping * v) * h; x += v * h; }
+    const travel = sw.clientWidth - knob.offsetHeight - knob.offsetTop * 2;
+    const stretch = Math.min(0.55, Math.abs(v) * 0.06);           // wider while moving fast
+    const w = knob.offsetHeight * (1 + stretch);
+    knob.style.width = w + 'px';
+    // stretch toward the direction of travel: moving left, grow from the right edge
+    knob.style.transform = `translateX(${x * travel - (v < 0 ? w - knob.offsetHeight : 0)}px)`;
+    sw.style.background = mix([208, 212, 218], [214, 60, 116], Math.max(0, Math.min(1, x)));
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); clearInterval(auto); sw.removeEventListener('click', onClick); root.remove(); };
+}

package/anims/morph/gooey.js

@@ -0,0 +1,36 @@
+// Gooey blobs: blur everything together, then an SVG colour matrix turns soft alpha into a hard edge.
+const PARAMS = { blur: 14, blobs: 6 };
+
+export default function (stage) {
+  const id = 'goo-' + Math.random().toString(36).slice(2, 8);
+  const root = document.createElement('div');
+  root.className = 'go-root';
+  root.innerHTML = `<style>
+    .go-root { position: absolute; inset: 0; background: #fbeefa; container-type: size; }
+    .go-field { position: absolute; inset: 0; filter: url(#${id}); }
+    .go-blob { position: absolute; left: 0; top: 0; border-radius: 50%; background: #b8359a; will-change: transform; }
+  </style>
+  <svg width="0" height="0" style="position:absolute"><filter id="${id}"><feGaussianBlur in="SourceGraphic" stdDeviation="${PARAMS.blur}"/><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9"/></filter></svg>
+  <div class="go-field"></div>`;
+  stage.append(root);
+  const field = root.querySelector('.go-field');
+  const s = Math.min(stage.clientWidth, stage.clientHeight);
+  const blobs = Array.from({ length: Math.round(PARAMS.blobs) }, (_, i) => {
+    const el = document.createElement('div'); el.className = 'go-blob';
+    const r = s * (0.13 + (i % 3) * 0.04); el.style.width = el.style.height = r * 2 + 'px';
+    if (i % 3 === 1) el.style.background = '#f06595';
+    field.append(el);
+    return { el, r, fx: 0.4 + Math.random() * 0.7, fy: 0.5 + Math.random() * 0.8, ph: Math.random() * 6.28 };
+  });
+  let raf;
+  function frame(now) {
+    const t = now / 1000, W = root.clientWidth, H = root.clientHeight;
+    for (const b of blobs) {
+      const x = W / 2 + Math.sin(t * b.fx + b.ph) * W * 0.26 - b.r, y = H / 2 + Math.cos(t * b.fy + b.ph * 1.3) * H * 0.24 - b.r;
+      b.el.style.transform = `translate(${x}px, ${y}px)`;
+    }
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.remove(); };
+}

package/anims/morph/icon-morph.js

@@ -0,0 +1,45 @@
+// Icon morph: each icon pair is drawn with the same points in the same order, then blended point by point.
+const PARAMS = { duration: 380 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'im-root';
+  root.innerHTML = `<style>
+    .im-root { position: absolute; inset: 0; display: grid; grid-auto-flow: column; place-content: center; gap: 12cqmin; background: #2a0f26; container-type: size; }
+    .im-btn { width: 30cqmin; height: 30cqmin; border-radius: 50%; border: 0; background: #b8359a; display: grid; place-items: center; cursor: pointer; padding: 0; }
+    .im-btn:nth-child(2) { background: #fbeefa; }
+    .im-btn svg { width: 55%; height: 55%; overflow: visible; }
+  </style>
+  <button class="im-btn" type="button" aria-label="Play"><svg viewBox="0 0 24 24"><path fill="#fff"/></svg></button>
+  <button class="im-btn" type="button" aria-label="Menu"><svg viewBox="0 0 24 24"><path fill="none" stroke="#2a0f26" stroke-width="2.6" stroke-linecap="round"/></svg></button>`;
+  stage.append(root);
+  const [b1, b2] = root.querySelectorAll('.im-btn');
+  const p1 = b1.querySelector('path'), p2 = b2.querySelector('path'), s1 = b1.querySelector('svg'), s2 = b2.querySelector('svg');
+
+  // Play is a triangle cut into two four-point halves, pause is two bars: same point count, same order.
+  const pause = [[[5, 4], [10, 4], [10, 20], [5, 20]], [[14, 4], [19, 4], [19, 20], [14, 20]]];
+  const play = [[[6, 3], [13, 7.5], [13, 16.5], [6, 21]], [[13, 7.5], [20, 12], [20, 12], [13, 16.5]]];
+  // Menu is three lines; close is an X with the middle line collapsed to its centre.
+  const menu = [[[4, 6], [20, 6]], [[4, 12], [20, 12]], [[4, 18], [20, 18]]];
+  const close = [[[5.5, 5.5], [18.5, 18.5]], [[12, 12], [12, 12]], [[5.5, 18.5], [18.5, 5.5]]];
+  const lerpShape = (a, b, t) => a.map((poly, i) => poly.map((pt, j) => [pt[0] + (b[i][j][0] - pt[0]) * t, pt[1] + (b[i][j][1] - pt[1]) * t]));
+  const toD = (shape, closed) => shape.map(poly => 'M' + poly.map(p => p.map(n => n.toFixed(2)).join(' ')).join('L') + (closed ? 'Z' : '')).join('');
+  const ease = t => 1 - Math.pow(1 - t, 3);
+
+  let from = 0, to = 0, start = 0, raf;
+  const toggle = () => { from = to; to = to ? 0 : 1; start = performance.now(); b1.setAttribute('aria-label', to ? 'Pause' : 'Play'); b2.setAttribute('aria-label', to ? 'Close' : 'Menu'); };
+  let manual = -1e9;
+  const onClick = () => { toggle(); manual = performance.now(); };
+  b1.addEventListener('click', onClick); b2.addEventListener('click', onClick);
+  const auto = setInterval(() => { if (performance.now() - manual > 3000) toggle(); }, PARAMS.duration + 900);
+  function frame(now) {
+    const k = ease(Math.min(1, (now - start) / PARAMS.duration)), v = from + (to - from) * k;
+    p1.setAttribute('d', toD(lerpShape(play, pause, v), true));
+    p2.setAttribute('d', toD(lerpShape(menu, close, v), false));
+    const spin = Math.sin(Math.PI * k) * (to > from ? 1 : -1) * 18;   // a little turn hides the in-between shapes
+    s1.style.transform = `rotate(${spin}deg)`; s2.style.transform = `rotate(${spin * 2}deg)`;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); clearInterval(auto); root.remove(); };
+}

package/anims/morph/line-draw.js

@@ -0,0 +1,34 @@
+// Line draw-on: dash length = path length; animating the dash offset from that length to 0 draws the line.
+const PARAMS = { duration: 2200 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'ld-root';
+  root.innerHTML = `<style>
+    .ld-root { position: absolute; inset: 0; display: grid; place-items: center; background: #fff9db; }
+    .ld-root svg { width: 86%; height: 86%; }
+    .ld-root path, .ld-root circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
+  </style>
+  <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
+    <circle cx="300" cy="78" r="34" stroke="#f08c00" stroke-width="5"/>
+    <path d="M20 220 L110 110 L160 170 L215 90 L300 200 L380 220" stroke="#b8359a" stroke-width="6"/>
+    <path d="M20 250 Q 50 232 80 250 T 140 250 T 200 250 T 260 250 T 320 250 T 380 250" stroke="#1c7ed6" stroke-width="5"/>
+    <path d="M40 278 Q 70 262 100 278 T 160 278 T 220 278 T 280 278 T 340 278" stroke="#74c0fc" stroke-width="4"/>
+    <path d="M40 60 C 60 20, 90 20, 80 60 S 110 100, 130 50 C 140 30, 160 40, 150 70 C 145 85, 170 85, 185 60" stroke="#2a0f26" stroke-width="4"/>
+  </svg>`;
+  stage.append(root);
+  const els = [...root.querySelectorAll('path, circle')];
+  els.forEach(el => { const L = el.getTotalLength(); el.style.strokeDasharray = L; el.style.strokeDashoffset = L; el.dataset.len = L; });
+  let timers = [];
+  function cycle() {
+    const each = PARAMS.duration / 2;
+    els.forEach((el, i) => el.animate([{ strokeDashoffset: el.dataset.len }, { strokeDashoffset: 0 }],
+      { duration: each, delay: i * each * 0.25, easing: 'cubic-bezier(0.65, 0, 0.35, 1)', fill: 'forwards' }));
+    const drawn = each + els.length * each * 0.25;
+    timers.push(setTimeout(() => els.forEach((el, i) => el.animate([{ strokeDashoffset: 0 }, { strokeDashoffset: -el.dataset.len }],
+      { duration: each * 0.6, delay: i * 60, easing: 'cubic-bezier(0.65, 0, 0.35, 1)', fill: 'forwards' })), drawn + 900));
+    timers.push(setTimeout(cycle, drawn + 900 + each * 0.6 + els.length * 60 + 300));
+  }
+  cycle();
+  return () => { timers.forEach(clearTimeout); root.remove(); };
+}

package/anims/morph/liquid-button.js

@@ -0,0 +1,53 @@
+// Liquid button: the outline is a ring of points on springs; the pointer pushes them as it passes.
+const PARAMS = { wobble: 1, stiffness: 140 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 0, H = 0;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth; H = stage.clientHeight; canvas.width = W * d; canvas.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const N = 90;
+  const pts = Array.from({ length: N }, () => ({ off: 0, v: 0 }));
+  // point i on a rounded rectangle (a superellipse is close enough) and its outward normal
+  const base = i => {
+    const a = (i / N) * Math.PI * 2, bw = W * 0.3, bh = H * 0.15, n = 4;
+    const c = Math.cos(a), s = Math.sin(a);
+    const x = Math.sign(c) * Math.pow(Math.abs(c), 2 / n) * bw, y = Math.sign(s) * Math.pow(Math.abs(s), 2 / n) * bh;
+    return { x: W / 2 + x, y: H / 2 + y, nx: c, ny: s };
+  };
+  let px = -999, py = -999, lpx = px, lpy = py, lastMove = -1e9;
+  const onMove = e => { const b = canvas.getBoundingClientRect(); px = e.clientX - b.left; py = e.clientY - b.top; lastMove = performance.now(); };
+  canvas.addEventListener('pointermove', onMove);
+  let last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.025, (now - last) / 1000); last = now;
+    let x = px, y = py;
+    if (now - lastMove > 1500) { const t = now / 1000; x = W / 2 + Math.sin(t * 1.4) * W * 0.42; y = H / 2 + Math.sin(t * 2.8) * H * 0.2; }
+    const vx = (x - lpx) / Math.max(dt, 1e-3), vy = (y - lpy) / Math.max(dt, 1e-3); lpx = x; lpy = y;
+    const k = PARAMS.stiffness, c = 2 * Math.sqrt(k) * 0.32;
+    for (let i = 0; i < N; i++) {
+      const b = base(i), p = pts[i], d = Math.hypot(x - b.x, y - b.y), reach = Math.min(W, H) * 0.18;
+      if (d < reach) { const push = (1 - d / reach) ** 2 * (vx * b.nx + vy * b.ny) * 0.0007 * PARAMS.wobble; p.v += push * 60; }
+      p.v += (-k * p.off - c * p.v) * dt; p.off += p.v * dt;
+    }
+    // neighbours share their offset a little, so the wave travels round the edge
+    for (let i = 0; i < N; i++) { const a = pts[(i + N - 1) % N], b = pts[(i + 1) % N]; pts[i].v += ((a.off + b.off) / 2 - pts[i].off) * 4 * dt * 60 * 0.05; }
+    ctx.fillStyle = '#2a0f26'; ctx.fillRect(0, 0, W, H);
+    ctx.beginPath();
+    for (let i = 0; i <= N + 1; i++) {
+      const b = base(i % N), o = Math.max(-0.35, Math.min(0.35, pts[i % N].off)) * Math.min(W, H) * 0.22;
+      const X = b.x + b.nx * o, Y = b.y + b.ny * o;
+      i ? ctx.lineTo(X, Y) : ctx.moveTo(X, Y);
+    }
+    ctx.lineJoin = 'round'; ctx.fillStyle = '#f06595'; ctx.fill();
+    ctx.fillStyle = '#fff'; ctx.font = `700 ${Math.max(12, Math.min(W, H) * 0.075)}px "Mona Sans", system-ui, sans-serif`;
+    ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Liquid', W / 2, H / 2);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); canvas.remove(); };
+}

package/anims/morph/shape-morph.js

@@ -0,0 +1,61 @@
+// Shape morph: every shape is stored as 160 distances from the centre, so any shape blends into any other.
+const PARAMS = { hold: 600, morph: 700 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 0, H = 0;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth; H = stage.clientHeight; canvas.width = W * d; canvas.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const NP = 160, TAU = Math.PI * 2;
+  // radius of a polygon along angle a: nearest edge hit by a ray from the centre
+  const polyR = verts => Array.from({ length: NP }, (_, i) => {
+    const a = (i / NP) * TAU, dx = Math.cos(a), dy = Math.sin(a); let best = Infinity;
+    for (let k = 0; k < verts.length; k++) {
+      const [x1, y1] = verts[k], [x2, y2] = verts[(k + 1) % verts.length], ex = x2 - x1, ey = y2 - y1;
+      const den = dx * ey - dy * ex; if (Math.abs(den) < 1e-9) continue;
+      const t = (x1 * ey - y1 * ex) / den, u = (x1 * dy - y1 * dx) / den;
+      if (t > 0 && u >= 0 && u <= 1) best = Math.min(best, t);
+    }
+    return best;
+  });
+  const ngon = (n, rOut, rIn = null, rot = -Math.PI / 2) => {
+    const v = [], m = rIn ? n * 2 : n;
+    for (let i = 0; i < m; i++) { const a = rot + (i / m) * TAU, r = rIn && i % 2 ? rIn : rOut; v.push([Math.cos(a) * r, Math.sin(a) * r]); }
+    return v;
+  };
+  const fn = f => Array.from({ length: NP }, (_, i) => f((i / NP) * TAU));
+  // scale every shape to the same root-mean-square radius so area feels constant
+  const norm = r => { const rms = Math.sqrt(r.reduce((s, x) => s + x * x, 0) / r.length); return r.map(x => x / rms); };
+  const shapes = [
+    norm(polyR([[-1, -1], [1, -1], [1, 1], [-1, 1]])),
+    norm(fn(() => 1)),
+    norm(polyR(ngon(5, 1, 0.45))),
+    norm(fn(a => 1 + 0.28 * Math.cos(6 * a))),
+    norm(polyR(ngon(3, 1))),
+    norm(fn(a => 1 + 0.16 * Math.sin(3 * a + 1) + 0.1 * Math.cos(5 * a))),
+  ];
+  const colours = ['#b8359a', '#f06595', '#ff922b', '#e64980', '#c2255c', '#f76707'];
+  const ease = t => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    const step = PARAMS.hold + PARAMS.morph, el = now - t0, k = Math.floor(el / step) % shapes.length, local = (el % step - PARAMS.hold) / PARAMS.morph;
+    const p = ease(Math.max(0, Math.min(1, local))), a = shapes[k], b = shapes[(k + 1) % shapes.length];
+    const R = Math.min(W, H) * 0.3, rot = (k + p) * 0.35;
+    ctx.fillStyle = '#fbeefa'; ctx.fillRect(0, 0, W, H);
+    ctx.beginPath();
+    for (let i = 0; i <= NP; i++) {
+      const j = i % NP, r = (a[j] + (b[j] - a[j]) * p) * R, ang = (j / NP) * TAU + rot;
+      const x = W / 2 + Math.cos(ang) * r, y = H / 2 + Math.sin(ang) * r;
+      i ? ctx.lineTo(x, y) : ctx.moveTo(x, y);
+    }
+    ctx.fillStyle = p > 0.5 ? colours[(k + 1) % colours.length] : colours[k];
+    ctx.fill();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}