motion-library 0.0.0-stage → 0.1.0

package/anims/springs/squash-bounce.js

@@ -0,0 +1,50 @@
+// Squash & stretch bounce: stretch along the velocity in flight, squash on impact while keeping the area.
+const PARAMS = { gravity: 2400, bounce: 0.72, squash: 0.35 };
+
+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 wob = (t, z = 0.3, w = 22) => t <= 0 ? 0 : Math.exp(-z * w * t) * Math.sin(w * Math.sqrt(1 - z * z) * t);
+  let y = 0, vy = 0, x = 0, impactT = 1e9, impactV = 0, restUntil = 0, last = performance.now(), raf;
+  const reset = () => { y = H * 0.12; vy = 0; x = W * 0.5; restUntil = 0; };
+  reset();
+  function frame(now) {
+    const dt = Math.min(0.032, (now - last) / 1000); last = now;
+    const r = Math.min(W, H) * 0.09, floor = H * 0.8;
+    const g = PARAMS.gravity * (H / 600);
+    impactT += dt;
+    if (restUntil) { if (now > restUntil) reset(); }
+    else {
+      vy += g * dt; y += vy * dt;
+      if (y > floor - r) {
+        y = floor - r; impactV = Math.abs(vy); vy = -vy * PARAMS.bounce; impactT = 0;
+        if (Math.abs(vy) < g * 0.06) { vy = 0; restUntil = now + 600; }   // settled: rest, then drop again
+      }
+    }
+    // stretch with speed while airborne; squash after impact, strength by impact speed
+    const speed = Math.abs(vy) / (g * 0.5);
+    let sy = 1 + Math.min(0.35, speed * 0.25);
+    const hit = Math.min(1, impactV / (g * 0.45)) * PARAMS.squash;
+    if (impactT < 0.6) sy = 1 - hit * wob(impactT + 0.07) * 1.4;
+    sy = Math.max(0.4, sy); const sx = 1 / sy;
+
+    ctx.fillStyle = '#fff4e6'; ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = '#ffd8a8'; ctx.fillRect(0, floor, W, H - floor);
+    const near = 1 - Math.min(1, (floor - r - y) / (floor * 0.8));
+    ctx.fillStyle = `rgba(140, 60, 0, ${0.08 + 0.22 * near})`;
+    ctx.beginPath(); ctx.ellipse(x, floor + 1, r * (0.5 + 0.7 * near) * sx, r * 0.18, 0, 0, Math.PI * 2); ctx.fill();
+    ctx.save(); ctx.translate(x, y + r); ctx.scale(sx, sy);
+    ctx.fillStyle = '#d9601a'; ctx.beginPath(); ctx.arc(0, -r, r, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = 'rgba(255,255,255,.35)'; ctx.beginPath(); ctx.arc(-r * 0.35, -r * 1.35, r * 0.28, 0, Math.PI * 2); ctx.fill();
+    ctx.restore();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/springs/verlet-rope.js

@@ -0,0 +1,46 @@
+// Verlet rope: each point moves by its last motion plus gravity, then neighbours are pulled back to rest length.
+const PARAMS = { segments: 24, gravity: 900, iterations: 8 };
+
+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();
+
+  let px = W / 2, py = H * 0.2, 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);
+  const n = Math.round(PARAMS.segments), rest = (H * 0.62) / n;
+  const pts = Array.from({ length: n + 1 }, (_, i) => ({ x: W / 2, y: H * 0.2 + i * rest, ox: W / 2, oy: H * 0.2 + i * rest }));
+  let last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.025, (now - last) / 1000); last = now;
+    let ax = px, ay = py;
+    if (now - lastMove > 1500) { const t = now / 1000; ax = W / 2 + Math.sin(t * 1.3) * W * 0.3; ay = H * 0.18 + Math.sin(t * 2.6) * H * 0.06; }
+    pts[0].x = ax; pts[0].y = ay;
+    for (let i = 1; i <= n; i++) {
+      const p = pts[i], vx = (p.x - p.ox) * 0.995, vy = (p.y - p.oy) * 0.995;
+      p.ox = p.x; p.oy = p.y; p.x += vx; p.y += vy + PARAMS.gravity * dt * dt;
+    }
+    for (let k = 0; k < PARAMS.iterations; k++) {
+      for (let i = 0; i < n; i++) {
+        const a = pts[i], b = pts[i + 1], dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy) || 1, diff = (d - rest) / d;
+        if (i === 0) { b.x -= dx * diff; b.y -= dy * diff; }
+        else { a.x += dx * diff * 0.5; a.y += dy * diff * 0.5; b.x -= dx * diff * 0.5; b.y -= dy * diff * 0.5; }
+      }
+    }
+    ctx.fillStyle = '#fff4e6'; ctx.fillRect(0, 0, W, H);
+    ctx.strokeStyle = '#d9601a'; ctx.lineWidth = Math.max(3, W * 0.012); ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+    ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y);
+    for (let i = 1; i < n; i++) { const mx = (pts[i].x + pts[i + 1].x) / 2, my = (pts[i].y + pts[i + 1].y) / 2; ctx.quadraticCurveTo(pts[i].x, pts[i].y, mx, my); }
+    ctx.lineTo(pts[n].x, pts[n].y); ctx.stroke();
+    ctx.fillStyle = '#15171a'; ctx.beginPath(); ctx.arc(pts[0].x, pts[0].y, 6, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = '#d9601a'; ctx.beginPath(); ctx.arc(pts[n].x, pts[n].y, Math.max(9, W * 0.035), 0, Math.PI * 2); ctx.fill();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); canvas.remove(); };
+}

package/anims/text/letter-rise.js

@@ -0,0 +1,40 @@
+// Letter rise stagger: every letter rises out of a clipped line on its own spring, 40 ms after the last.
+const PARAMS = { stagger: 40, stiffness: 220, damping: 18 };
+
+export default function (stage) {
+  const words = ['Motion', 'Rhythm', 'Timing', 'Weight'];
+  const root = document.createElement('div');
+  root.className = 'lr-root';
+  root.innerHTML = `<style>
+    .lr-root { position: absolute; inset: 0; display: grid; place-items: center; background: #d9363e; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; }
+    .lr-line { display: flex; overflow: hidden; font-size: 24cqmin; line-height: 1.12; font-weight: 800; font-stretch: 110%; color: #fff5f5; letter-spacing: -0.02em; padding: 0 .05em; }
+    .lr-line span { display: block; will-change: transform; }
+  </style><div class="lr-line"></div>`;
+  stage.append(root);
+  const line = root.querySelector('.lr-line');
+  let letters = [], w = 0, raf, last = performance.now(), timers = [];
+
+  function setWord(text) {
+    line.replaceChildren(); letters = [...text].map(ch => { const s = document.createElement('span'); s.textContent = ch; line.append(s); return { el: s, y: 110, v: 0, target: 110 }; });
+  }
+  function rise() {
+    setWord(words[w++ % words.length]);
+    letters.forEach((l, i) => timers.push(setTimeout(() => { l.target = 0; }, i * PARAMS.stagger)));
+    timers.push(setTimeout(fall, 1500 + letters.length * PARAMS.stagger));
+  }
+  function fall() {
+    letters.forEach((l, i) => timers.push(setTimeout(() => { l.target = -115; }, i * PARAMS.stagger * 0.6)));
+    timers.push(setTimeout(rise, 420 + letters.length * PARAMS.stagger * 0.6));
+  }
+  function frame(now) {
+    const dt = Math.min(0.032, (now - last) / 1000); last = now;
+    for (const l of letters) {
+      for (let s = 0; s < 3; s++) { const h = dt / 3; l.v += (-PARAMS.stiffness * (l.y - l.target) - PARAMS.damping * l.v) * h; l.y += l.v * h; }
+      l.el.style.transform = `translateY(${l.y}%)`;
+    }
+    raf = requestAnimationFrame(frame);
+  }
+  rise();
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); timers.forEach(clearTimeout); root.remove(); };
+}

package/anims/text/line-mask.js

@@ -0,0 +1,26 @@
+// Line mask reveal: each line sits in an overflow-hidden box and slides up into view, one after another.
+const PARAMS = { stagger: 90, duration: 700 };
+
+export default function (stage) {
+  const lines = ['Good motion', 'is felt before', 'it is noticed.'];
+  const root = document.createElement('div');
+  root.className = 'lm-root';
+  root.innerHTML = `<style>
+    .lm-root { position: absolute; inset: 0; display: grid; align-content: center; padding: 0 10cqmin; background: #2b1214; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; }
+    .lm-mask { overflow: hidden; }
+    .lm-mask span { display: block; font-size: 12cqmin; line-height: 1.08; font-weight: 750; letter-spacing: -0.025em; color: #ffe3e3; transform: translateY(105%); }
+    .lm-mask:nth-child(2) span { color: #ff8787; }
+  </style>`;
+  const spans = lines.map(t => { const m = document.createElement('div'); m.className = 'lm-mask'; m.innerHTML = `<span>${t}</span>`; root.append(m); return m.firstChild; });
+  stage.append(root);
+  const ease = 'cubic-bezier(0.23, 1, 0.32, 1)';
+  let timers = [];
+  function cycle() {
+    spans.forEach((s, i) => s.animate([{ transform: 'translateY(105%)' }, { transform: 'translateY(0)' }], { duration: PARAMS.duration, delay: i * PARAMS.stagger, easing: ease, fill: 'forwards' }));
+    const shown = PARAMS.duration + spans.length * PARAMS.stagger + 1400;
+    timers.push(setTimeout(() => spans.forEach((s, i) => s.animate([{ transform: 'translateY(0)' }, { transform: 'translateY(-105%)' }], { duration: PARAMS.duration * 0.6, delay: i * PARAMS.stagger * 0.5, easing: 'cubic-bezier(0.7, 0, 0.84, 0)', fill: 'forwards' })), shown));
+    timers.push(setTimeout(cycle, shown + PARAMS.duration * 0.6 + spans.length * PARAMS.stagger * 0.5 + 300));
+  }
+  cycle();
+  return () => { timers.forEach(clearTimeout); root.remove(); };
+}

package/anims/text/scramble.js

@@ -0,0 +1,32 @@
+// Scramble decode: each character cycles through random glyphs until its turn, then locks, left to right.
+const PARAMS = { speed: 34, settle: 4 };
+
+export default function (stage) {
+  const phrases = ['DECODING SIGNAL', 'MOTION LIBRARY', 'COPY THE CODE', 'SIXTY EFFECTS'];
+  const glyphs = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=<>/';
+  const root = document.createElement('div');
+  root.className = 'sc-root';
+  root.innerHTML = `<style>
+    .sc-root { position: absolute; inset: 0; display: grid; place-items: center; background: #15171a; container-type: size; }
+    .sc-text { font: 700 8.4cqmin/1 ui-monospace, "JetBrains Mono", Menlo, monospace; color: #f1f3f5; letter-spacing: .04em; white-space: pre; }
+    .sc-text b { color: #ff6b6b; font-weight: 700; }
+  </style><div class="sc-text"></div>`;
+  stage.append(root);
+  const out = root.querySelector('.sc-text');
+  let p = 0, step = 0, target = phrases[0], timer, pause = 0;
+
+  timer = setInterval(() => {
+    if (pause > 0) { pause--; if (pause === 0) { p = (p + 1) % phrases.length; target = phrases[p]; step = 0; } return; }
+    step++;
+    let html = '', done = true;
+    for (let i = 0; i < target.length; i++) {
+      const lockAt = (i + 1) * PARAMS.settle;
+      if (target[i] === ' ') html += ' ';
+      else if (step >= lockAt) html += target[i];
+      else { done = false; html += `<b>${glyphs[Math.floor(Math.random() * glyphs.length)]}</b>`; }
+    }
+    out.innerHTML = html;
+    if (done) pause = Math.round(1400 / PARAMS.speed);
+  }, PARAMS.speed);
+  return () => { clearInterval(timer); root.remove(); };
+}

package/anims/text/typewriter.js

@@ -0,0 +1,35 @@
+// Typewriter: jittered keystrokes, longer pauses on punctuation, a caret that only blinks while idle.
+const PARAMS = { cps: 16, jitter: 0.5 };
+
+export default function (stage) {
+  const lines = ['Hello, I animate things.', 'Ease out, never in.', 'Every frame is a decision.'];
+  const root = document.createElement('div');
+  root.className = 'tw-root';
+  root.innerHTML = `<style>
+    .tw-root { position: absolute; inset: 0; display: grid; place-items: center; background: #f8f9fa; container-type: size; padding: 0 8cqmin; }
+    .tw-line { font-family: "Mona Sans", system-ui, sans-serif; font-size: 9cqmin; font-weight: 650; color: #15171a; letter-spacing: -0.01em; }
+    .tw-caret { display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -0.12em; background: #d9363e; }
+    .tw-idle .tw-caret { animation: tw-blink 1s steps(1) infinite; }
+    @keyframes tw-blink { 50% { opacity: 0; } }
+  </style><div class="tw-line"><span class="tw-text"></span><span class="tw-caret"></span></div>`;
+  stage.append(root);
+  const text = root.querySelector('.tw-text'), line = root.querySelector('.tw-line');
+  let li = 0, timer;
+  const delay = ch => {
+    const base = 1000 / PARAMS.cps, j = 1 + (Math.random() * 2 - 1) * PARAMS.jitter;
+    return base * j + (/[,.!?]/.test(ch) ? base * 6 : 0);
+  };
+  function type(i = 0) {
+    const s = lines[li];
+    line.classList.remove('tw-idle');
+    if (i <= s.length) { text.textContent = s.slice(0, i); timer = setTimeout(() => type(i + 1), delay(s[i - 1] || '')); }
+    else { line.classList.add('tw-idle'); timer = setTimeout(() => erase(s.length), 1600); }
+  }
+  function erase(i) {
+    line.classList.remove('tw-idle');
+    if (i >= 0) { text.textContent = lines[li].slice(0, i); timer = setTimeout(() => erase(i - 1), 22); }
+    else { li = (li + 1) % lines.length; line.classList.add('tw-idle'); timer = setTimeout(() => type(0), 500); }
+  }
+  type(0);
+  return () => { clearTimeout(timer); root.remove(); };
+}

package/anims/text/vf-wave.js

@@ -0,0 +1,26 @@
+// Variable-font wave: a sine wave travels through each letter's weight and width axes.
+// Needs a variable font with wght and wdth axes (Mona Sans here).
+const PARAMS = { amplitude: 1, speed: 1.6, spread: 0.5 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'vw-root';
+  root.innerHTML = `<style>
+    .vw-root { position: absolute; inset: 0; display: grid; place-items: center; background: #fff0f0; container-type: size; }
+    .vw-word { display: flex; font-family: "Mona Sans", system-ui, sans-serif; font-size: 17cqmin; line-height: 1; color: #c92a2a; }
+  </style><div class="vw-word"></div>`;
+  stage.append(root);
+  const word = root.querySelector('.vw-word');
+  const spans = [...'wavelength'].map(ch => { const s = document.createElement('span'); s.textContent = ch; word.append(s); return s; });
+  let raf;
+  function frame(now) {
+    const t = now / 1000 * PARAMS.speed;
+    spans.forEach((s, i) => {
+      const k = 0.5 + 0.5 * Math.sin(t * 2 - i * PARAMS.spread) * PARAMS.amplitude;
+      s.style.fontVariationSettings = `'wght' ${Math.round(200 + 700 * k)}, 'wdth' ${(75 + 50 * k).toFixed(1)}`;
+    });
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.remove(); };
+}

package/anims/transitions/circle-reveal.js

@@ -0,0 +1,42 @@
+// Circle reveal: the next page is clipped to a circle that grows from the press point.
+const PARAMS = { duration: 800 };
+
+export default function (stage) {
+  const pages = [
+    { bg: '#0e9488', fg: '#e6fcf5', word: 'Ocean' },
+    { bg: '#ffd43b', fg: '#15171a', word: 'Sun' },
+    { bg: '#15171a', fg: '#f8f9fa', word: 'Night' },
+    { bg: '#ff8787', fg: '#2b0b0b', word: 'Coral' },
+  ];
+  const root = document.createElement('div');
+  root.className = 'cr-root';
+  root.innerHTML = `<style>
+    .cr-root { position: absolute; inset: 0; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; cursor: crosshair; }
+    .cr-page { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24cqmin; font-weight: 800; letter-spacing: -0.03em; }
+  </style><div class="cr-page"></div><div class="cr-page"></div>`;
+  stage.append(root);
+  const [under, over] = root.querySelectorAll('.cr-page');
+  let i = 0, busy = false;
+  const paint = (el, p) => { el.style.background = p.bg; el.style.color = p.fg; el.textContent = p.word; };
+  paint(under, pages[0]);
+  over.style.clipPath = 'circle(0px at 50% 50%)';
+
+  function reveal(x, y) {
+    if (busy) return; busy = true;
+    const next = pages[(i + 1) % pages.length];
+    paint(over, next);
+    const w = root.clientWidth, h = root.clientHeight;
+    const r = Math.hypot(Math.max(x, w - x), Math.max(y, h - y));
+    const a = over.animate([{ clipPath: `circle(0px at ${x}px ${y}px)` }, { clipPath: `circle(${r}px at ${x}px ${y}px)` }],
+      { duration: PARAMS.duration, easing: 'cubic-bezier(0.65, 0, 0.35, 1)', fill: 'forwards' });
+    a.onfinish = () => { i = (i + 1) % pages.length; paint(under, next); a.cancel(); over.style.clipPath = 'circle(0px at 50% 50%)'; busy = false; };
+  }
+  const onDown = e => { const b = root.getBoundingClientRect(); reveal(e.clientX - b.left, e.clientY - b.top); manual = performance.now(); };
+  let manual = -1e9;
+  root.addEventListener('pointerdown', onDown);
+  const auto = setInterval(() => {
+    if (performance.now() - manual < 3000) return;
+    reveal(root.clientWidth * (0.2 + Math.random() * 0.6), root.clientHeight * (0.2 + Math.random() * 0.6));
+  }, PARAMS.duration + 900);
+  return () => { clearInterval(auto); root.removeEventListener('pointerdown', onDown); root.remove(); };
+}

package/anims/transitions/push-slide.js

@@ -0,0 +1,40 @@
+// Push slide: the new page slides the full width while the old one drifts only part of the way and dims.
+const PARAMS = { duration: 700, parallax: 0.3 };
+
+export default function (stage) {
+  const pages = [
+    { name: 'Home', bg: '#0e9488', fg: '#e6fcf5', shape: '#63e6be' },
+    { name: 'Work', bg: '#15171a', fg: '#f1f3f5', shape: '#ffd43b' },
+    { name: 'About', bg: '#e6fcf5', fg: '#0b5f59', shape: '#0e9488' },
+  ];
+  const root = document.createElement('div');
+  root.className = 'ps-root';
+  root.innerHTML = `<style>
+    .ps-root { position: absolute; inset: 0; overflow: hidden; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; background: #000; }
+    .ps-page { position: absolute; inset: 0; padding: 8cqmin 9cqmin; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
+    .ps-page nav { display: flex; gap: 4cqmin; font-size: max(11px, 4.4cqmin); font-weight: 600; opacity: .8; }
+    .ps-page h2 { margin: 0; font-size: 22cqmin; line-height: .9; font-weight: 800; font-stretch: 115%; letter-spacing: -0.03em; }
+    .ps-page i { position: absolute; right: 9cqmin; top: 26%; width: 30cqmin; height: 30cqmin; border-radius: 50%; }
+  </style>`;
+  const els = pages.map(p => {
+    const el = document.createElement('section'); el.className = 'ps-page';
+    el.style.cssText = `background:${p.bg};color:${p.fg}`;
+    el.innerHTML = `<nav><span>Home</span><span>Work</span><span>About</span></nav><i style="background:${p.shape}"></i><h2>${p.name}</h2>`;
+    root.append(el); return el;
+  });
+  stage.append(root);
+  els.forEach((el, i) => { el.style.transform = i === 0 ? 'none' : 'translateX(100%)'; });
+
+  const ease = 'cubic-bezier(0.77, 0, 0.175, 1)';
+  let cur = 0;
+  const go = () => {
+    const next = (cur + 1) % els.length, a = els[cur], b = els[next];
+    b.style.zIndex = 2; a.style.zIndex = 1;
+    const opts = { duration: PARAMS.duration, easing: ease, fill: 'forwards' };
+    a.animate([{ transform: 'none', filter: 'brightness(1)' }, { transform: `translateX(${-100 * PARAMS.parallax}%)`, filter: 'brightness(0.55)' }], opts);
+    b.animate([{ transform: 'translateX(100%)' }, { transform: 'none' }], opts);
+    cur = next;
+  };
+  const timer = setInterval(go, PARAMS.duration + 1000);
+  return () => { clearInterval(timer); root.remove(); };
+}

package/anims/transitions/shared-expand.js

@@ -0,0 +1,43 @@
+// Shared-element expand (FLIP): measure First, jump to Last, Invert with a transform, Play it back to zero.
+const PARAMS = { duration: 560 };
+
+export default function (stage) {
+  const tiles = [['#0e9488', 'Lagoon'], ['#ffd43b', 'Dune'], ['#ff8787', 'Coral'], ['#4dabf7', 'Glacier'], ['#15171a', 'Basalt'], ['#a9e34b', 'Moss']];
+  const root = document.createElement('div');
+  root.className = 'fx-root';
+  root.innerHTML = `<style>
+    .fx-root { position: absolute; inset: 0; background: #f1f3f5; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; }
+    .fx-grid { position: absolute; inset: 6cqmin; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3cqmin; }
+    .fx-tile { border-radius: 3cqmin; transform-origin: 0 0; display: flex; align-items: flex-end; padding: 3cqmin; box-sizing: border-box; font-weight: 700; font-size: max(10px, 4.5cqmin); color: rgba(0,0,0,.72); }
+    .fx-tile.dark { color: #fff; }
+    .fx-tile.open { position: absolute; inset: 6cqmin; z-index: 2; font-size: 11cqmin; }
+  </style><div class="fx-grid"></div>`;
+  stage.append(root);
+  const grid = root.querySelector('.fx-grid');
+  const els = tiles.map(([c, name], i) => { const el = document.createElement('div'); el.className = 'fx-tile' + (i === 4 ? ' dark' : ''); el.style.background = c; el.textContent = name; grid.append(el); return el; });
+  // The placeholder keeps the grid from collapsing while a tile is lifted out.
+  const hole = document.createElement('div');
+
+  function flip(el, change) {
+    const first = el.getBoundingClientRect();
+    change();
+    const last = el.getBoundingClientRect();
+    const dx = first.left - last.left, dy = first.top - last.top, sx = first.width / last.width, sy = first.height / last.height;
+    el.animate([{ transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})` }, { transform: 'none' }],
+      { duration: PARAMS.duration, easing: 'cubic-bezier(0.32, 0.72, 0, 1)' });
+  }
+  let i = 0, open = null, timers = [];
+  function step() {
+    if (open) {
+      const el = open; open = null;
+      flip(el, () => { el.classList.remove('open'); hole.replaceWith(el); });
+      timers.push(setTimeout(step, PARAMS.duration + 500));
+    } else {
+      const el = els[i++ % els.length]; open = el;
+      flip(el, () => { el.replaceWith(hole); grid.append(el); el.classList.add('open'); hole.style.cssText = ''; });
+      timers.push(setTimeout(step, PARAMS.duration + 1100));
+    }
+  }
+  timers.push(setTimeout(step, 600));
+  return () => { timers.forEach(clearTimeout); root.remove(); };
+}

package/anims/transitions/staircase-wipe.js

@@ -0,0 +1,41 @@
+// Staircase wipe: bars cover the screen one after another, the page swaps while hidden, the bars run out.
+const PARAMS = { bars: 6, stagger: 60, duration: 500 };
+
+export default function (stage) {
+  const pages = [
+    { bg: '#e6fcf5', fg: '#0b5f59', t: 'Chapter one' },
+    { bg: '#fff4e6', fg: '#a3400c', t: 'Chapter two' },
+    { bg: '#edf2ff', fg: '#2b3fa0', t: 'Chapter three' },
+  ];
+  const root = document.createElement('div');
+  root.className = 'sw-root';
+  root.innerHTML = `<style>
+    .sw-root { position: absolute; inset: 0; overflow: hidden; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; }
+    .sw-page { position: absolute; inset: 0; display: grid; align-content: end; padding: 9cqmin; font-size: 13cqmin; font-weight: 800; line-height: .95; letter-spacing: -0.02em; }
+    .sw-bars { position: absolute; inset: 0; display: flex; pointer-events: none; }
+    .sw-bars i { flex: 1; background: #0e9488; transform: translateY(-101%); margin-right: -1px; }
+  </style><div class="sw-page"></div><div class="sw-bars"></div>`;
+  stage.append(root);
+  const page = root.querySelector('.sw-page'), barsEl = root.querySelector('.sw-bars');
+  const n = Math.round(PARAMS.bars);
+  const bars = Array.from({ length: n }, () => barsEl.appendChild(document.createElement('i')));
+  let k = 0;
+  const paint = p => { page.style.background = p.bg; page.style.color = p.fg; page.textContent = p.t; };
+  paint(pages[0]);
+
+  const ease = 'cubic-bezier(0.76, 0, 0.24, 1)';
+  let timers = [];
+  function wipe() {
+    bars.forEach((b, i) => b.animate([{ transform: 'translateY(-101%)' }, { transform: 'translateY(0)' }],
+      { duration: PARAMS.duration, delay: i * PARAMS.stagger, easing: ease, fill: 'forwards' }));
+    const covered = PARAMS.duration + (n - 1) * PARAMS.stagger;
+    timers.push(setTimeout(() => {
+      k = (k + 1) % pages.length; paint(pages[k]);
+      bars.forEach((b, i) => b.animate([{ transform: 'translateY(0)' }, { transform: 'translateY(101%)' }],
+        { duration: PARAMS.duration, delay: i * PARAMS.stagger, easing: ease, fill: 'forwards' }));
+    }, covered + 80));
+    timers.push(setTimeout(wipe, covered * 2 + 1300));
+  }
+  timers.push(setTimeout(wipe, 500));
+  return () => { timers.forEach(clearTimeout); root.remove(); };
+}

package/anims/transitions/view-transition.js

@@ -0,0 +1,43 @@
+// View Transitions morph: the browser animates every element whose view-transition-name matches before and after.
+const PARAMS = { duration: 500 };
+
+export default function (stage) {
+  const items = [['#0e9488', 'Lagoon', 'Shallow water over white sand, 2 m deep.'], ['#f59f00', 'Dune', 'Wind-shaped ridges that move a metre a year.'], ['#e8590c', 'Canyon', 'Layers of sandstone cut by a slow river.']];
+  const root = document.createElement('div');
+  root.className = 'vt-root';
+  root.innerHTML = `<style>
+    .vt-root { position: absolute; inset: 0; background: #fff; container-type: size; font-family: "Mona Sans", system-ui, sans-serif; color: #15171a; overflow: hidden; }
+    .vt-list { padding: 7cqmin; display: grid; gap: 3cqmin; }
+    .vt-row { display: flex; align-items: center; gap: 4cqmin; font-size: max(12px, 6cqmin); font-weight: 650; }
+    .vt-sw { width: 13cqmin; height: 13cqmin; border-radius: 3cqmin; flex: none; }
+    .vt-detail .vt-sw { width: 100%; height: 48cqh; border-radius: 0; }
+    .vt-detail h3 { margin: 5cqmin 7cqmin 1cqmin; font-size: 11cqmin; letter-spacing: -0.02em; }
+    .vt-detail p { margin: 0 7cqmin; font-size: max(11px, 4.6cqmin); color: #5d6166; }
+  </style><div class="vt-view"></div><style class="vt-dur"></style>`;
+  stage.append(root);
+  const view = root.querySelector('.vt-view');
+  root.querySelector('.vt-dur').textContent = `::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: ${PARAMS.duration}ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }`;
+
+  let k = 0, detail = false;
+  function render() {
+    if (detail) {
+      const [c, name, text] = items[k];
+      view.className = 'vt-view vt-detail';
+      view.innerHTML = `<div class="vt-sw" style="background:${c};view-transition-name:vt-sw"></div><h3 style="view-transition-name:vt-title;width:fit-content">${name}</h3><p>${text}</p>`;
+    } else {
+      view.className = 'vt-view vt-list';
+      view.innerHTML = items.map(([c, name], i) => `<div class="vt-row"><div class="vt-sw" style="background:${c};${i === k ? 'view-transition-name:vt-sw' : ''}"></div><span style="${i === k ? 'view-transition-name:vt-title' : ''}">${name}</span></div>`).join('');
+    }
+  }
+  render();
+  // Open a row, close it back into the same row, then open the next one.
+  let opens = 0;
+  const change = () => { detail = !detail; render(); };
+  const timer = setInterval(() => {
+    // Before opening the next row, move the names onto it (no visible change) so the morph starts there.
+    if (!detail && opens++) { k = (k + 1) % items.length; render(); }
+    if (document.startViewTransition) document.startViewTransition(change);
+    else change(); // no support: swap instantly
+  }, PARAMS.duration + 1200);
+  return () => { clearInterval(timer); root.remove(); };
+}

package/bin.mjs

@@ -0,0 +1,155 @@
+#!/usr/bin/env node
+// motion-library: copy an animation from the Motion Library into your project, tuned to your numbers.
+//   npx motion-library add confetti --pieces 300
+// The animations and js/code.js ship inside the package (cli/build.mjs copies them in), so nothing is downloaded.
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { ANIMS, animById, catById, CATEGORIES, srcOf } from './anims/registry.js';
+import { readParams, writeParams, parseParams, formatValue, standalone, promptFor } from './js/code.js';
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+const pkg = JSON.parse(fs.readFileSync(path.join(here, 'package.json'), 'utf8'));
+const tty = process.stdout.isTTY && !process.env.NO_COLOR;
+const c = (code, s) => (tty ? `\x1b[${code}m${s}\x1b[0m` : s);
+const bold = s => c(1, s), dim = s => c(2, s), green = s => c(32, s), yellow = s => c(33, s);
+
+const HELP = `${bold('motion-library')} ${pkg.version}: hand-made web animations, one plain-JS file each, no dependencies.
+
+${bold('Usage')}
+  npx motion-library add <id> [--<setting> <value> ...] [--dir <folder>] [--html] [--force]
+  npx motion-library list [category]
+  npx motion-library info <id>
+  npx motion-library prompt <id> [--<setting> <value> ...]
+
+${bold('Commands')}
+  add      Copy an animation into your project. Settings you pass are written into its PARAMS line.
+           --dir     where to put it (default: src/animations if there is a src folder, else animations)
+           --html    write a standalone .html page instead of a .js module
+           --force   overwrite a file that is already there
+  list     All animations, or one category: ${CATEGORIES.map(k => k.id).join(', ')}
+  info     What it does, how it works, and the settings you can tune
+  prompt   Print a prompt for an AI coding assistant to fit the animation into your project
+
+${bold('Example')}
+  npx motion-library add confetti --pieces 300 --gravity 0.6
+
+Browse them all, live: run the Motion Library site and open any card; Share gives a link with your settings.
+Licence: MIT-0. Use it anywhere, change it freely, no credit needed.`;
+
+// --pieces 300 or --pieces=300; flags without a value are booleans
+function parseArgs(argv) {
+  const pos = [], opts = {};
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (!a.startsWith('--')) { pos.push(a); continue; }
+    const [k, v] = a.slice(2).split(/=(.*)/s);
+    if (v !== undefined) opts[k] = v;
+    else if (argv[i + 1] !== undefined && !argv[i + 1].startsWith('--')) opts[k] = argv[++i];
+    else opts[k] = true;
+  }
+  return { pos, opts };
+}
+
+function fail(msg) { console.error(`${c(31, 'error')} ${msg}`); process.exit(1); }
+
+// edit distance, for "did you mean"
+function typo(a, b) {
+  let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
+  for (let i = 1; i <= a.length; i++) {
+    const cur = [i];
+    for (let j = 1; j <= b.length; j++) cur[j] = Math.min(prev[j] + 1, cur[j - 1] + 1, prev[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+    prev = cur;
+  }
+  return prev[b.length];
+}
+
+function findAnim(id) {
+  if (!id) fail('Which animation? Try `npx motion-library list`.');
+  const a = animById[id];
+  if (a) return a;
+  const q = id.toLowerCase();
+  const near = ANIMS.map(x => [x, x.id.includes(q) || q.includes(x.id) || x.title.toLowerCase().includes(q) ? 0 : typo(q, x.id)])
+    .filter(([, d]) => d <= Math.max(2, Math.floor(q.length / 4))).sort((m, n) => m[1] - n[1]).slice(0, 5).map(([x]) => x);
+  fail(`No animation called "${id}".${near.length ? ` Did you mean: ${near.map(x => x.id).join(', ')}?` : ' Try `npx motion-library list`.'}`);
+}
+
+// the settings from the command line, through the same gate the site uses: only the animation's own settings, only
+// numbers, clamped to the range and snapped to the step. Reports anything that was dropped or changed.
+const OWN = new Set(['dir', 'html', 'force', 'help', 'version']);
+function tuned(a, opts) {
+  const given = Object.entries(opts).filter(([k]) => !OWN.has(k));
+  const query = new URLSearchParams(given.map(([k, v]) => [k, String(v)])).toString();
+  const values = parseParams(query, a.params);
+  for (const [k, v] of given) {
+    if (!(k in a.params)) console.error(yellow(`  ignored --${k}: ${a.id} has no setting called "${k}"${Object.keys(a.params).length ? ` (it has: ${Object.keys(a.params).join(', ')})` : ''}`));
+    else if (!(k in values)) console.error(yellow(`  ignored --${k}: "${v}" is not a number`));
+    else if (Number(v) !== values[k]) console.error(yellow(`  --${k} ${v} became ${values[k]} (range ${a.params[k].min}–${a.params[k].max}, step ${a.params[k].step})`));
+  }
+  return values;
+}
+const source = a => fs.readFileSync(path.join(here, srcOf(a)), 'utf8');
+const header = a => `// ${a.title} · Motion Library (npx motion-library add ${a.id}) · MIT-0\n`;
+
+function add(id, opts) {
+  const a = findAnim(id);
+  const values = tuned(a, opts);
+  let code = writeParams(source(a), { ...readParams(source(a)), ...values }, a.params);
+  const dir = typeof opts.dir === 'string' ? opts.dir : fs.existsSync('src') ? path.join('src', 'animations') : 'animations';
+  const file = path.join(dir, `${a.id}.${opts.html ? 'html' : 'js'}`);
+  if (fs.existsSync(file) && !opts.force) fail(`${file} is already there. Use --force to overwrite it.`);
+  fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(file, opts.html ? standalone(code, a.title) : header(a) + code);
+  const p = readParams(code);
+  console.log(`${green('✓')} ${bold(a.title)} → ${file}`);
+  if (Object.keys(p).length) console.log(dim(`  settings: ${Object.entries(p).map(([k, v]) => `${k} ${v}`).join(', ')}`));
+  if (opts.html) { console.log(dim('  open it in a browser: it runs on its own.')); return; }
+  const rel = './' + path.relative(process.cwd(), file).split(path.sep).join('/');
+  const name = a.id.replace(/-(\w)/g, (_, ch) => ch.toUpperCase());
+  console.log(`
+  ${bold('Use it')}: the default export draws into a container, sizes itself to it, and returns a cleanup function.
+    import ${name} from '${rel}';   // path from your project root: adjust it from your file
+    const stop = ${name}(document.querySelector('#hero'));   // give the container a size
+    // later, e.g. when a component unmounts: stop();
+${a.pointer ? dim('  It reacts to the pointer inside its container.\n') : ''}${a.scroll ? dim('  It reads scroll inside its container (an element with data-scroll).\n') : ''}${dim(`  Fit it to your project with an AI assistant: npx motion-library prompt ${a.id}`)}`);
+}
+
+function list(cat) {
+  if (cat && !catById[cat]) fail(`No category "${cat}". Categories: ${CATEGORIES.map(k => k.id).join(', ')}`);
+  for (const k of CATEGORIES) {
+    if (cat && k.id !== cat) continue;
+    const items = ANIMS.filter(a => a.cat === k.id);
+    console.log(`\n${bold(k.name)} ${dim(`(${k.id}, ${items.length})`)}`);
+    const w = Math.max(...items.map(a => a.id.length));
+    for (const a of items) console.log(`  ${a.id.padEnd(w)}  ${dim(a.title)}`);
+  }
+  console.log(dim(`\n${cat ? ANIMS.filter(a => a.cat === cat).length : ANIMS.length} animations. Add one: npx motion-library add <id>`));
+}
+
+function info(id) {
+  const a = findAnim(id), now = readParams(source(a));
+  console.log(`${bold(a.title)} ${dim(`· ${catById[a.cat].name} · ${a.kind}`)}\n${a.trick}\n`);
+  for (const n of a.notes) console.log(`  • ${n}`);
+  const keys = Object.keys(a.params).filter(k => k in now);
+  if (keys.length) {
+    console.log(`\n${bold('Settings')}`);
+    const w = Math.max(...keys.map(k => k.length));
+    for (const k of keys) { const r = a.params[k]; console.log(`  --${k.padEnd(w)}  ${formatValue(now[k], r.step).padStart(6)}  ${dim(`${r.label}, ${r.min}–${r.max}, step ${r.step}`)}`); }
+  }
+  console.log(dim(`\nnpx motion-library add ${a.id}${keys[0] ? ` --${keys[0]} ${a.params[keys[0]].max}` : ''}`));
+}
+
+function prompt(id, opts) {
+  const a = findAnim(id), values = tuned(a, opts);
+  const code = writeParams(source(a), { ...readParams(source(a)), ...values }, a.params);
+  process.stdout.write(promptFor(a, code, catById[a.cat].name));
+}
+
+const { pos: [cmd, arg], opts } = parseArgs(process.argv.slice(2));
+if (opts.version || cmd === 'version') console.log(pkg.version);
+else if (!cmd || cmd === 'help' || opts.help) console.log(HELP);
+else if (cmd === 'add') add(arg, opts);
+else if (cmd === 'list' || cmd === 'ls') list(arg);
+else if (cmd === 'info') info(arg);
+else if (cmd === 'prompt') prompt(arg, opts);
+else fail(`Unknown command "${cmd}". Run \`npx motion-library help\`.`);