motion-library 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,16 @@
+MIT No Attribution
+
+Copyright 2026 AJ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this
+software and associated documentation files (the "Software"), to deal in the Software
+without restriction, including without limitation the rights to use, copy, modify,
+merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,38 @@
-# Temporary Holding Version
+# motion-library
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Hand-made web animations: springs, page transitions, text, scroll, particles, fluids, chrome and shaders. Each one is a single plain-JavaScript file with no dependencies, and comes with notes on why it feels right.
+
+```sh
+npx motion-library add confetti --pieces 300 --gravity 0.6
+```
+
+That writes `src/animations/confetti.js` (or `animations/confetti.js` if you have no `src` folder) with your settings in its `PARAMS` line.
+
+## Use it
+
+Every animation's default export draws into a container, sizes itself to it, and returns a cleanup function.
+
+```js
+import confetti from './animations/confetti.js';
+
+const stop = confetti(document.querySelector('#hero')); // give the container a size
+// later, e.g. when a component unmounts:
+stop();
+```
+
+In React that's a `useEffect` that returns `stop`; in Vue, `onMounted` and `onUnmounted`; in a web component, `connectedCallback` and `disconnectedCallback`.
+
+## Commands
+
+| Command | What it does |
+|---|---|
+| `npx motion-library list [category]` | All animations, or one category |
+| `npx motion-library info <id>` | What it does, how it works, the settings you can tune |
+| `npx motion-library add <id> [--setting value]` | Copy it into your project, tuned. `--dir` picks the folder, `--html` writes a standalone page, `--force` overwrites |
+| `npx motion-library prompt <id>` | A prompt for an AI coding assistant to fit it into your project |
+
+Settings are checked against each animation's range: unknown names are ignored, and values outside the range are clamped (you'll see a note when that happens).
+
+## Licence
+
+MIT-0. Use it in anything, including paid work, change it freely, no credit needed.

package/anims/basics/anticipation.js

@@ -0,0 +1,56 @@
+// Anticipation & follow-through: crouch before the jump, stretch in flight, antenna keeps going after landing.
+const PARAMS = { anticipation: 0.25, overshoot: 0.18 };
+
+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 clamp = (x, a = 0, b = 1) => Math.max(a, Math.min(b, x));
+  const smooth = x => x * x * (3 - 2 * x);
+  // damped sine: the "wobble" after an impact
+  const wob = (t, z = 0.25, w = 18) => t <= 0 ? 0 : Math.exp(-z * w * t) * Math.sin(w * Math.sqrt(1 - z * z) * t);
+
+  const CYCLE = 2.6; let raf, t0 = performance.now();
+  function frame(now) {
+    const T = ((now - t0) / 1000) % (CYCLE * 2), dir = T < CYCLE ? 1 : -1, t = T % CYCLE;
+    const floor = H * 0.72, size = Math.min(W, H) * 0.16, span = W * 0.42;
+    const x0 = W / 2 - dir * span / 2;
+    // phases: rest .3 · crouch .35 · flight .55 · land and settle
+    const crouch = clamp((t - 0.3) / 0.35), flight = clamp((t - 0.65) / 0.55), landT = t - 1.2;
+    let x = x0, y = floor, sx = 1, sy = 1, lean = 0;
+    if (flight <= 0) { const c = smooth(crouch); sy = 1 - PARAMS.anticipation * c; sx = 1 + PARAMS.anticipation * 0.7 * c; lean = -dir * 0.12 * c; }
+    else if (flight < 1) {
+      x = x0 + dir * span * flight; y = floor - Math.sin(Math.PI * flight) * H * 0.38;
+      const v = Math.cos(Math.PI * flight); sy = 1 + 0.28 * Math.abs(v); sx = 1 / sy; lean = dir * 0.25 * v;
+    } else {
+      x = x0 + dir * span; const w = wob(landT, 0.3, 16);
+      sy = 1 - PARAMS.overshoot * 2 * w; sx = 1 / Math.max(0.4, sy);
+    }
+    // antenna lags behind the body: follow-through
+    const tip = flight > 0 && flight < 1 ? -dir * 0.5 * Math.cos(Math.PI * flight) : flight >= 1 ? dir * 0.9 * wob(landT, 0.18, 14) : dir * 0.3 * smooth(crouch);
+
+    ctx.fillStyle = '#e9edfb'; ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = '#c9d2f2'; ctx.fillRect(0, floor, W, H - floor);
+    const shadowS = 1 - (floor - y) / (H * 0.5);
+    ctx.fillStyle = `rgba(40,52,110,${0.25 * shadowS})`;
+    ctx.beginPath(); ctx.ellipse(x, floor + 2, size * 0.6 * shadowS * sx, size * 0.12, 0, 0, Math.PI * 2); ctx.fill();
+
+    ctx.save(); ctx.translate(x, y); ctx.rotate(lean); ctx.scale(sx, sy);
+    const w = size, h = size * 1.1;
+    ctx.strokeStyle = '#3b5bdb'; ctx.lineWidth = 3 / Math.max(sx, sy); ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.moveTo(0, -h); ctx.quadraticCurveTo(tip * size * 0.3, -h - size * 0.35, tip * size * 0.6, -h - size * 0.55); ctx.stroke();
+    ctx.fillStyle = '#ff6b6b'; ctx.beginPath(); ctx.arc(tip * size * 0.6, -h - size * 0.55, size * 0.09, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = '#3b5bdb'; ctx.beginPath(); ctx.roundRect(-w / 2, -h, w, h, w * 0.42); ctx.fill();
+    ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(dir * w * 0.14, -h * 0.62, w * 0.13, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = '#15171a'; ctx.beginPath(); ctx.arc(dir * w * 0.18, -h * 0.6, w * 0.06, 0, Math.PI * 2); ctx.fill();
+    ctx.restore();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/basics/card-flip.js

@@ -0,0 +1,39 @@
+// 3D card flip: rotateY driven by a spring, with backface-visibility hiding the far face.
+const PARAMS = { perspective: 900, stiffness: 160, damping: 13 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'cf-root';
+  root.innerHTML = `<style>
+    .cf-root { position: absolute; inset: 0; display: grid; place-items: center; background: #dfe6fb; font-family: "Mona Sans", system-ui, sans-serif; }
+    .cf-card { position: relative; width: min(46%, 190px); aspect-ratio: 5 / 7; transform-style: preserve-3d; }
+    .cf-face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; display: grid; place-items: center; }
+    .cf-front { background: #fff; color: #3b5bdb; }
+    .cf-front b { font-size: 64px; font-weight: 800; font-stretch: 112%; line-height: 1; }
+    .cf-front span { position: absolute; left: 14px; top: 12px; font-weight: 700; font-size: 15px; }
+    .cf-back { background: #3b5bdb; transform: rotateY(180deg); overflow: hidden; }
+    .cf-back i { position: absolute; width: 140%; height: 18px; background: #5c7cfa; transform: rotate(-35deg); }
+  </style>
+  <div class="cf-card"><div class="cf-face cf-front"><span>A</span><b>A</b></div><div class="cf-face cf-back"></div></div>`;
+  stage.append(root);
+  root.style.perspective = PARAMS.perspective + 'px';
+  const card = root.querySelector('.cf-card');
+  const back = root.querySelector('.cf-back');
+  for (let i = 0; i < 9; i++) { const s = document.createElement('i'); s.style.top = (i * 34 - 60) + 'px'; back.append(s); }
+
+  let angle = 0, vel = 0, target = 0, last = performance.now(), raf;
+  const flip = setInterval(() => { target = target === 0 ? 180 : 0; }, 1800);
+  function frame(now) {
+    const dt = Math.min(0.032, (now - last) / 1000); last = now;
+    // semi-implicit Euler, 4 substeps for stability
+    for (let i = 0; i < 4; i++) {
+      const h = dt / 4, acc = -PARAMS.stiffness * (angle - target) - PARAMS.damping * vel;
+      vel += acc * h; angle += vel * h;
+    }
+    const lift = 1 + 0.06 * Math.abs(Math.sin(angle * Math.PI / 180));
+    card.style.transform = `rotateY(${angle}deg) scale(${lift})`;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { clearInterval(flip); cancelAnimationFrame(raf); root.remove(); };
+}

package/anims/basics/easing-race.js

@@ -0,0 +1,57 @@
+// Easing curves race: four dots, same distance, same time, four different easings.
+const PARAMS = { duration: 1400, stiffness: 180, damping: 14 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'er-root';
+  root.innerHTML = `<style>
+    .er-root { position: absolute; inset: 0; background: #f4f6fb; display: grid; align-content: center; gap: 14px; padding: 0 9%; font-family: "Mona Sans", system-ui, sans-serif; }
+    .er-lane { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; }
+    .er-name { font-size: 13px; color: #3d4148; font-weight: 600; }
+    .er-track { position: relative; height: 26px; border-radius: 13px; background: #e3e8f4; }
+    .er-dot { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--c); will-change: transform; }
+  </style>`;
+  const lanes = [
+    { name: 'linear', c: '#868e96', f: t => t },
+    { name: 'ease-in', c: '#f08c00', f: t => t * t * t },
+    { name: 'ease-out', c: '#3b5bdb', f: bezier(0.23, 1, 0.32, 1) },
+    { name: 'spring', c: '#e03131', spring: true },
+  ];
+  for (const l of lanes) {
+    const lane = document.createElement('div'); lane.className = 'er-lane';
+    lane.innerHTML = `<span class="er-name">${l.name}</span><div class="er-track"><div class="er-dot" style="--c:${l.c}"></div></div>`;
+    root.append(lane); l.dot = lane.querySelector('.er-dot'); l.track = lane.querySelector('.er-track');
+  }
+  stage.append(root);
+
+  // Closed-form spring (mass 1): position from 0 to 1 at time t seconds.
+  function spring(t) {
+    const k = PARAMS.stiffness, c = PARAMS.damping, w0 = Math.sqrt(k), z = c / (2 * w0);
+    if (z < 1) { const wd = w0 * Math.sqrt(1 - z * z); return 1 - Math.exp(-z * w0 * t) * (Math.cos(wd * t) + (z * w0 / wd) * Math.sin(wd * t)); }
+    return 1 - Math.exp(-w0 * t) * (1 + w0 * t);
+  }
+
+  let raf, t0 = performance.now();
+  const hold = 900;
+  function frame(now) {
+    const el = now - t0, total = PARAMS.duration + hold;
+    if (el > total) t0 = now;
+    const t = Math.min(1, (now - t0) / PARAMS.duration);
+    for (const l of lanes) {
+      const dist = l.track.clientWidth - 26;
+      const p = l.spring ? spring((now - t0) / 1000) : l.f(t);
+      l.dot.style.transform = `translateX(${p * dist}px)`;
+    }
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); root.remove(); };
+}
+
+// cubic-bezier(x1, y1, x2, y2) as a function of progress, solved with Newton's method.
+function bezier(x1, y1, x2, y2) {
+  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
+  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
+  const X = t => ((ax * t + bx) * t + cx) * t, Y = t => ((ay * t + by) * t + cy) * t, dX = t => (3 * ax * t + 2 * bx) * t + cx;
+  return x => { let t = x; for (let i = 0; i < 6; i++) { const d = dX(t); if (Math.abs(d) < 1e-6) break; t -= (X(t) - x) / d; } return Y(Math.min(1, Math.max(0, t))); };
+}

package/anims/basics/fade-scale.js

@@ -0,0 +1,44 @@
+// Fade & scale in: cards rise from 94% scale with a strong ease-out, then leave faster than they came.
+const PARAMS = { duration: 520, startScale: 0.94, stagger: 70 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'fs-root';
+  root.innerHTML = `
+    <style>
+      .fs-root { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; background: #e7ecfb; font-family: "Mona Sans", system-ui, sans-serif; }
+      .fs-card { width: min(300px, 74vw); display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: #fff; border-radius: 12px; opacity: 0; }
+      .fs-dot { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #3b5bdb; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
+      .fs-card:nth-child(2) .fs-dot { background: #12b886; } .fs-card:nth-child(3) .fs-dot { background: #f08c00; }
+      .fs-t { font-size: 14px; font-weight: 600; color: #15171a; } .fs-s { font-size: 12.5px; color: #5d6166; margin-top: 2px; }
+    </style>
+    <div class="fs-card"><div class="fs-dot">R</div><div><div class="fs-t">Render finished</div><div class="fs-s">Shot 04 · 15 seconds</div></div></div>
+    <div class="fs-card"><div class="fs-dot">C</div><div><div class="fs-t">New comment</div><div class="fs-s">“Love the overshoot on frame 12”</div></div></div>
+    <div class="fs-card"><div class="fs-dot">E</div><div><div class="fs-t">Export ready</div><div class="fs-s">motion-reel.mp4 · 38 MB</div></div></div>`;
+  stage.append(root);
+
+  const cards = [...root.querySelectorAll('.fs-card')];
+  const easeOut = 'cubic-bezier(0.23, 1, 0.32, 1)';
+  let timers = [];
+  const later = (fn, ms) => timers.push(setTimeout(fn, ms));
+
+  function cycle() {
+    cards.forEach((card, i) => {
+      card.animate([
+        { opacity: 0, transform: `translateY(14px) scale(${PARAMS.startScale})` },
+        { opacity: 1, transform: 'none' },
+      ], { duration: PARAMS.duration, delay: i * PARAMS.stagger, easing: easeOut, fill: 'both' });
+    });
+    const shown = PARAMS.duration + PARAMS.stagger * cards.length + 1300;
+    later(() => {
+      cards.forEach((card, i) => card.animate([
+        { opacity: 1, transform: 'none' },
+        { opacity: 0, transform: 'translateY(-6px) scale(0.98)' },
+      ], { duration: Math.round(PARAMS.duration * 0.4), delay: i * 30, easing: easeOut, fill: 'both' }));
+    }, shown);
+    later(cycle, shown + PARAMS.duration * 0.4 + 400);
+  }
+  cycle();
+
+  return () => { timers.forEach(clearTimeout); cards.forEach(c => c.getAnimations().forEach(a => a.cancel())); root.remove(); };
+}

package/anims/basics/stagger-grid.js

@@ -0,0 +1,43 @@
+// Stagger grid: each cell's delay grows with its distance from the origin, so 100 pops read as one ripple.
+const PARAMS = { delayPerCell: 28, cols: 11 };
+
+export default function (stage) {
+  const root = document.createElement('div');
+  root.className = 'sg-root';
+  root.innerHTML = `<style>
+    .sg-root { position: absolute; inset: 0; background: #15171a; display: grid; place-items: center; }
+    .sg-grid { display: grid; gap: 6px; }
+    .sg-cell { width: var(--s); height: var(--s); border-radius: 30%; background: #2a3550; transform: scale(0.45); }
+  </style><div class="sg-grid"></div>`;
+  stage.append(root);
+  const grid = root.querySelector('.sg-grid');
+
+  const cols = Math.round(PARAMS.cols);
+  const size = Math.max(8, Math.floor((stage.clientWidth * 0.8 - (cols - 1) * 6) / cols));
+  const rows = Math.max(3, Math.floor((stage.clientHeight * 0.8 + 6) / (size + 6)));
+  grid.style.gridTemplateColumns = `repeat(${cols}, ${size}px)`;
+  root.style.setProperty('--s', size + 'px');
+  const cells = [];
+  for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
+    const el = document.createElement('div'); el.className = 'sg-cell'; grid.append(el); cells.push({ el, r, c });
+  }
+
+  const colours = ['#4c6ef5', '#15aabf', '#fab005', '#ff6b6b'];
+  let timers = [], n = 0;
+  function ripple() {
+    const or = Math.floor(Math.random() * rows), oc = Math.floor(Math.random() * cols);
+    const hot = colours[n++ % colours.length];
+    for (const cell of cells) {
+      const d = Math.hypot(cell.r - or, cell.c - oc);
+      cell.el.animate([
+        { transform: 'scale(0.45)', background: '#2a3550' },
+        { transform: 'scale(1)', background: hot, offset: 0.3 },
+        { transform: 'scale(0.45)', background: '#2a3550' },
+      ], { duration: 900, delay: d * PARAMS.delayPerCell, easing: 'cubic-bezier(0.33, 1, 0.68, 1)' });
+    }
+    timers.push(setTimeout(ripple, 900 + Math.hypot(rows, cols) * PARAMS.delayPerCell * 0.6));
+  }
+  ripple();
+
+  return () => { timers.forEach(clearTimeout); root.remove(); };
+}

package/anims/chrome/black-hole.js

@@ -0,0 +1,81 @@
+// Black hole: each pixel's ray is stepped through space and bent toward the hole a little at every step (gravity
+// pulls light by an amount that grows as 1/r²). Rays that come too close fall in and stay black; the rest curve round
+// and pick up the stars behind, which is why the background swirls into an Einstein ring. A hot accretion disk lies in
+// the plane; because rays bend, you also see its far side arching over the top. The side turning toward you is
+// brighter and bluer (Doppler beaming), the receding side dimmer and redder.
+const PARAMS = { spin: 1, tilt: 0.18 };
+
+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 gl = canvas.getContext('webgl2', { antialias: false });
+  if (!gl) { stage.textContent = 'This needs WebGL2.'; return () => canvas.remove(); }
+  const vs = `#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, 0, 1); }`;
+  const fs = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o;
+  uniform vec2 R; uniform float T, TILT, SPIN;
+  float hash(vec3 p) { p = fract(p * .3183099 + .1); p *= 17.; return fract(p.x * p.y * p.z * (p.x + p.y + p.z)); }
+  float noise(vec2 p) { vec2 i = floor(p), f = fract(p); f = f * f * (3. - 2. * f); float a = hash(vec3(i, 1)), b = hash(vec3(i + vec2(1, 0), 1)), c = hash(vec3(i + vec2(0, 1), 1)), d = hash(vec3(i + 1., 1)); return mix(mix(a, b, f.x), mix(c, d, f.x), f.y); }
+  vec3 stars(vec3 d) {                                                     // a starfield plus a faint band of galaxy
+    vec3 c = vec3(0); vec3 g = d * 220.; vec3 id = floor(g); float h = hash(id);
+    if (h > .985) { float s = (h - .985) / .015; c += vec3(.8 + .2 * s, .85, 1.) * s * smoothstep(.5, .0, length(fract(g) - .5)) * 2.5; }
+    float band = exp(-pow(d.y * 3. + sin(d.x * 2.) * .3, 2.)) * (.5 + .5 * noise(d.xz * 9.));
+    return c + vec3(.35, .3, .45) * band * .25;
+  }
+  vec3 aces(vec3 x) { return clamp((x * (2.51 * x + .03)) / (x * (2.43 * x + .59) + .14), 0., 1.); }
+  void main() {
+    vec2 q = (uv * 2. - 1.) * vec2(R.x / R.y, 1.);
+    float ct = cos(TILT), st = sin(TILT);
+    vec3 ro = vec3(0, st * 9., -ct * 9.);                                 // camera a little above the disk plane
+    vec3 f = normalize(-ro), r = normalize(cross(vec3(0, 1, 0), f)), u = cross(f, r);
+    vec3 rd = normalize(f * 1.7 + r * q.x + u * q.y), p = ro;
+    vec3 col = vec3(0); float alpha = 1.; bool fell = false;
+    const float RS = 1.;                                                  // event horizon radius
+    for (int i = 0; i < 260; i++) {
+      float rr = length(p);
+      if (rr < RS) { fell = true; break; }
+      float dt = clamp(rr * .05, .02, .4);
+      vec3 np = p + rd * dt;
+      // crossing the disk plane between 2.2 and 7 radii: add its light, tinted by speed toward the camera
+      if (p.y * np.y < 0.) {
+        vec3 c = mix(p, np, p.y / (p.y - np.y)); float d = length(c.xz);
+        if (d > 2.2 && d < 7.) {
+          float ang = atan(c.z, c.x) + T * SPIN * 1.2 / d;                  // inner rings turn faster
+          float lanes = .55 + .45 * noise(vec2(ang * 3., d * 2.5)) * (.6 + .4 * sin(d * 9. + ang * 2.));
+          vec3 vel = normalize(vec3(-c.z, 0, c.x));                        // orbital direction
+          float dop = 1. + .75 * dot(vel, -rd);                             // beaming: brighter toward us
+          float heat = smoothstep(7., 2.2, d);
+          vec3 tint = mix(vec3(1., .35, .1), vec3(1., .85, .65), heat) * mix(vec3(1., .7, .5), vec3(.75, .85, 1.2), clamp(dop - .6, 0., 1.));
+          float a = lanes * smoothstep(2.2, 2.6, d) * smoothstep(7., 5.5, d);
+          col += alpha * tint * a * dop * dop * (1.2 + 2.2 * heat);
+          alpha *= 1. - a * .85;
+        }
+      }
+      rd = normalize(rd - p / (rr * rr * rr) * RS * 1.5 * dt);           // bend toward the hole
+      p = np;
+      if (rr > 30.) break;
+    }
+    if (!fell) col += alpha * stars(rd);
+    col = aces(col * .9);
+    col *= 1. - .3 * pow(length(uv - .5) * 1.3, 2.);
+    o = vec4(pow(col, vec3(1. / 2.2)), 1);
+  }`;
+  const sh = (t, s) => { const x = gl.createShader(t); gl.shaderSource(x, s); gl.compileShader(x); if (!gl.getShaderParameter(x, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(x)); return x; };
+  const prog = gl.createProgram(); gl.attachShader(prog, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, fs)); gl.bindAttribLocation(prog, 0, 'p'); gl.linkProgram(prog); gl.useProgram(prog);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  const U = {}; ['R', 'T', 'TILT', 'SPIN'].forEach(n => U[n] = gl.getUniformLocation(prog, n));
+  const resize = () => { const w = stage.clientWidth || 1, h = stage.clientHeight || 1, d = Math.min(devicePixelRatio, Math.max(1, Math.sqrt(320000 / (w * h)))); canvas.width = w * d | 0; canvas.height = h * d | 0; gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    const t = (now - t0) / 1000;
+    gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, t); gl.uniform1f(U.TILT, PARAMS.tilt + Math.sin(t * 0.1) * 0.03); gl.uniform1f(U.SPIN, PARAMS.spin);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/chrome/cloth-reveal.js

@@ -0,0 +1,156 @@
+// Cloth reveal: a silk sheet falls over something on a plinth, drapes, and is whipped off by one corner to unveil a
+// chrome sculpture. The sheet is a grid of points joined by distance constraints (neighbours, diagonals, and every
+// second point, so it resists folding too sharply), moved with Verlet integration and solved a few times a frame;
+// it collides with the sculpture, the plinth and the floor. Silk is lit with a soft sheen that runs along the folds.
+const PARAMS = { grid: 46, stiffness: 1, speed: 1 };
+
+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 gl = canvas.getContext('webgl2', { antialias: true });
+  if (!gl) { stage.textContent = 'This needs WebGL2.'; return () => canvas.remove(); }
+  const G = Math.max(16, Math.min(70, Math.round(PARAMS.grid))), NP = G * G, SIZE = 3.4, SC = [0, 1.55, 0], SR = 0.72, PED = 0.55;
+  const x = new Float32Array(NP * 3), px = new Float32Array(NP * 3), cons = [];
+  const id = (i, j) => j * G + i;
+  for (let j = 0; j < G; j++) for (let i = 0; i < G; i++) {
+    if (i < G - 1) cons.push(id(i, j), id(i + 1, j)); if (j < G - 1) cons.push(id(i, j), id(i, j + 1));
+    if (i < G - 1 && j < G - 1) { cons.push(id(i, j), id(i + 1, j + 1)); cons.push(id(i + 1, j), id(i, j + 1)); }
+    if (i < G - 2) cons.push(id(i, j), id(i + 2, j)); if (j < G - 2) cons.push(id(i, j), id(i, j + 2));
+  }
+  const C = new Int32Array(cons), rest = new Float32Array(C.length / 2);
+  function drop() {
+    for (let j = 0; j < G; j++) for (let i = 0; i < G; i++) { const k = id(i, j) * 3; x[k] = (i / (G - 1) - 0.5) * SIZE + (Math.random() - 0.5) * 0.002; x[k + 1] = 3.3; x[k + 2] = (j / (G - 1) - 0.5) * SIZE; px[k] = x[k]; px[k + 1] = x[k + 1]; px[k + 2] = x[k + 2]; }
+    for (let c = 0; c < rest.length; c++) { const a = C[c * 2] * 3, b = C[c * 2 + 1] * 3; rest[c] = Math.hypot(x[a] - x[b], x[a + 1] - x[b + 1], x[a + 2] - x[b + 2]); }
+  }
+  drop();
+  const collide = k => {
+    let dx = x[k] - SC[0], dy = x[k + 1] - SC[1], dz = x[k + 2] - SC[2], d = Math.hypot(dx, dy, dz), R = SR + 0.035;
+    if (d < R) { const s = R / d; x[k] = SC[0] + dx * s; x[k + 1] = SC[1] + dy * s; x[k + 2] = SC[2] + dz * s; px[k] += (x[k] - px[k]) * 0.6; px[k + 2] += (x[k + 2] - px[k + 2]) * 0.6; }   // friction on the sculpture
+    const rr = Math.hypot(x[k], x[k + 2]);
+    if (x[k + 1] < SC[1] - SR * 0.6 && rr < PED + 0.03) { const s = (PED + 0.03) / rr; x[k] *= s; x[k + 2] *= s; }
+    if (x[k + 1] < 0.01) { x[k + 1] = 0.01; px[k] += (x[k] - px[k]) * 0.8; px[k + 2] += (x[k + 2] - px[k + 2]) * 0.8; }
+  };
+  function step(h, pin) {
+    for (let i = 0; i < NP; i++) {
+      const k = i * 3, vx = (x[k] - px[k]) * 0.995, vy = (x[k + 1] - px[k + 1]) * 0.995, vz = (x[k + 2] - px[k + 2]) * 0.995;
+      px[k] = x[k]; px[k + 1] = x[k + 1]; px[k + 2] = x[k + 2];
+      x[k] += vx; x[k + 1] += vy - 9.8 * h * h; x[k + 2] += vz;
+    }
+    const st = Math.min(1, PARAMS.stiffness);
+    for (let it = 0; it < 10; it++) {
+      for (let c = 0; c < rest.length; c++) {
+        const a = C[c * 2] * 3, b = C[c * 2 + 1] * 3, dx = x[b] - x[a], dy = x[b + 1] - x[a + 1], dz = x[b + 2] - x[a + 2], d = Math.hypot(dx, dy, dz) || 1e-6;
+        const f = (d - rest[c]) / d * 0.5 * st;
+        x[a] += dx * f; x[a + 1] += dy * f; x[a + 2] += dz * f; x[b] -= dx * f; x[b + 1] -= dy * f; x[b + 2] -= dz * f;
+      }
+      if (pin) { const k = id(G - 1, G - 1) * 3; x[k] = pin[0]; x[k + 1] = pin[1]; x[k + 2] = pin[2]; }
+      for (let i = 0; i < NP; i++) collide(i * 3);
+    }
+  }
+
+  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; };
+  const prog = (vs, fs) => {
+    const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));
+    const u = {}; for (let i = 0, n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS); i < n; i++) { const nm = gl.getActiveUniform(p, i).name; u[nm] = gl.getUniformLocation(p, nm); }
+    return { p, u };
+  };
+  const ENV = `vec3 env(vec3 d) {
+    vec3 c = mix(vec3(.03, .03, .04), vec3(.2, .2, .23), smoothstep(-.1, .7, d.y));
+    vec2 q = d.xz / max(d.y, .05);
+    c += vec3(2.4) * smoothstep(.06, .0, abs(q.x - .1) - .55) * smoothstep(.06, .0, abs(q.y + .2) - .16) * step(0., d.y);
+    float az = atan(d.x, d.z);
+    c += vec3(1., .55, .3) * 1.5 * smoothstep(.1, .02, abs(az - 1.9)) * smoothstep(-.05, .2, d.y) * smoothstep(.75, .3, d.y);
+    c += vec3(.35, .6, 1.) * 1.3 * smoothstep(.1, .02, abs(az + 1.6)) * smoothstep(-.05, .2, d.y) * smoothstep(.75, .3, d.y);
+    return c + vec3(1.1) * smoothstep(.4, .9, d.z) * smoothstep(-.3, .5, d.y) * .6;
+  }`;
+  const VS = `#version 300 es
+  layout(location = 0) in vec3 P; layout(location = 1) in vec3 Nn; uniform mat4 M; out vec3 n; out vec3 w; void main() { n = Nn; w = P; gl_Position = M * vec4(P, 1); }`;
+  const clothP = prog(VS, `#version 300 es
+  precision highp float; in vec3 n; in vec3 w; out vec4 o; uniform vec3 E;
+  void main() {
+    vec3 V = normalize(E - w), N = normalize(n); if (dot(N, V) < 0.) N = -N;   // two-sided
+    vec3 L = normalize(vec3(-.4, .9, .5)), H = normalize(L + V);
+    float dif = max(dot(N, L), 0.) * .8 + .2, sheen = pow(1. - max(dot(N, V), 0.), 2.5), spec = pow(max(dot(N, H), 0.), 24.);
+    vec3 silk = vec3(.42, .03, .07);
+    vec3 c = silk * dif + vec3(.9, .3, .35) * sheen * .55 + vec3(1., .85, .85) * spec * .35;
+    c *= .6 + .4 * smoothstep(-.05, .6, w.y);                     // folds near the floor sit in shadow
+    o = vec4(pow(c, vec3(1. / 2.2)), 1);
+  }`);
+  const chromeP = prog(VS, `#version 300 es
+  precision highp float; in vec3 n; in vec3 w; out vec4 o; uniform vec3 E; uniform float MAT;
+  ${ENV}
+  void main() {
+    vec3 V = normalize(E - w), N = normalize(n), R = reflect(-V, N);
+    vec3 c = MAT < .5 ? env(R) * vec3(.92, .94, .98) * (.6 + .4 * pow(1. - max(dot(N, V), 0.), 4.)) : vec3(.06, .055, .05) * (.4 + .6 * max(dot(N, normalize(vec3(-.4, .9, .5))), 0.)) + env(R) * .05;
+    o = vec4(pow(c / (1. + c * .25), vec3(1. / 2.2)), 1);
+  }`);
+  const floorP = prog(`#version 300 es
+  layout(location = 0) in vec2 P; uniform mat4 M; out vec2 g; void main() { g = P; gl_Position = M * vec4(P.x, 0, P.y, 1); }`, `#version 300 es
+  precision highp float; in vec2 g; out vec4 o; void main() { float r = length(g); vec3 c = vec3(.07, .065, .07) * (1. - .55 * exp(-r * r * 1.4)) * smoothstep(9., 2., r); o = vec4(pow(c, vec3(1. / 2.2)), 1); }`);
+  // meshes: the cloth (updated every frame), a sphere for the sculpture, a cylinder for the plinth
+  const idx = []; for (let j = 0; j < G - 1; j++) for (let i = 0; i < G - 1; i++) idx.push(id(i, j), id(i + 1, j), id(i, j + 1), id(i + 1, j), id(i + 1, j + 1), id(i, j + 1));
+  const cv = gl.createVertexArray(); gl.bindVertexArray(cv);
+  const cb = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, cb); gl.bufferData(gl.ARRAY_BUFFER, NP * 24, gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0); gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(idx), gl.STATIC_DRAW);
+  const mesh = data => { const v = gl.createVertexArray(); gl.bindVertexArray(v); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0); gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12); return { v, n: data.length / 6 }; };
+  // the sculpture: a sphere with a twisted band through it, i.e. a sphere whose radius ripples along a spiral
+  const sph = []; const LAT = 48, LON = 72;
+  const sp = (a, b) => { const th = (a / LAT) * Math.PI, ph = (b / LON) * Math.PI * 2, r = SR * (0.94 + 0.06 * Math.cos(ph * 3 + th * 6)); const d = [Math.sin(th) * Math.cos(ph), Math.cos(th), Math.sin(th) * Math.sin(ph)]; return d.map((v, i) => v * r + SC[i]); };
+  const nn = (a, b) => { const p = sp(a, b), q = sp(a + 0.01, b), r = sp(a, b + 0.01), u = q.map((v, i) => v - p[i]), v2 = r.map((v, i) => v - p[i]); const n = [u[1] * v2[2] - u[2] * v2[1], u[2] * v2[0] - u[0] * v2[2], u[0] * v2[1] - u[1] * v2[0]], l = Math.hypot(...n) || 1; const c = p.map((v, i) => v - SC[i]); return Math.sign(n[0] * c[0] + n[1] * c[1] + n[2] * c[2]) * 1 === -1 ? n.map(v => -v / l) : n.map(v => v / l); };
+  for (let a = 0; a < LAT; a++) for (let b = 0; b < LON; b++) for (const [i, j] of [[a, b], [a + 1, b], [a, b + 1], [a, b + 1], [a + 1, b], [a + 1, b + 1]]) sph.push(...sp(i, j), ...nn(Math.min(i, LAT - 0.02), j));
+  const cyl = []; for (let b = 0; b < 48; b++) { const a0 = (b / 48) * Math.PI * 2, a1 = ((b + 1) / 48) * Math.PI * 2, top = SC[1] - SR * 0.75; for (const [a, y] of [[a0, 0], [a1, 0], [a0, top], [a0, top], [a1, 0], [a1, top]]) cyl.push(Math.cos(a) * PED, y, Math.sin(a) * PED, Math.cos(a), 0, Math.sin(a)); }
+  const sphM = mesh(sph), cylM = mesh(cyl);
+  const fv = gl.createVertexArray(); gl.bindVertexArray(fv); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-12, -12, 12, -12, -12, 12, 12, -12, 12, 12, -12, 12]), gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  gl.bindVertexArray(null);
+
+  let W = 1, H = 1;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = canvas.width = Math.max(1, (stage.clientWidth * d) | 0); H = canvas.height = Math.max(1, (stage.clientHeight * d) | 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let E = [0, 0, 0];
+  const matrix = t => {
+    const az = 0.5 + 0.15 * Math.sin(t * 0.2), el = 0.28, dist = 6.4; E = [Math.sin(az) * Math.cos(el) * dist, 1.0 + Math.sin(el) * dist, Math.cos(az) * Math.cos(el) * dist]; const T = [0, 1.1, 0];
+    const f = T.map((v, i) => v - E[i]), fl = Math.hypot(...f); for (let i = 0; i < 3; i++) f[i] /= fl;
+    const rl = Math.hypot(f[2], f[0]), r = [-f[2] / rl, 0, f[0] / rl], u = [r[1] * f[2] - r[2] * f[1], r[2] * f[0] - r[0] * f[2], r[0] * f[1] - r[1] * f[0]];
+    const V = [r[0], u[0], -f[0], 0, r[1], u[1], -f[1], 0, r[2], u[2], -f[2], 0, -(r[0] * E[0] + r[1] * E[1] + r[2] * E[2]), -(u[0] * E[0] + u[1] * E[1] + u[2] * E[2]), f[0] * E[0] + f[1] * E[1] + f[2] * E[2], 1];
+    const F = 1 / Math.tan(0.38), A = W / H, n = 0.1, fa = 60, nf = 1 / (n - fa), P = [F / A, 0, 0, 0, 0, F, 0, 0, 0, 0, (fa + n) * nf, -1, 0, 0, 2 * fa * n * nf, 0], out = new Float32Array(16);
+    for (let c = 0; c < 4; c++) for (let rr = 0; rr < 4; rr++) { let s = 0; for (let k = 0; k < 4; k++) s += P[k * 4 + rr] * V[c * 4 + k]; out[c * 4 + rr] = s; }
+    return out;
+  };
+  const verts = new Float32Array(NP * 6), nrm = new Float32Array(NP * 3);
+  let raf, last = performance.now(), t = 0, c = 0, grab = null;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000) * PARAMS.speed; last = now; t += dt; c += dt;
+    // falls and drapes (3.2 s), a corner is grabbed and whipped up and away (1.8 s), the sculpture alone (2.6 s), again
+    let pin = null;
+    if (c > 3.2 && c < 5) {
+      if (!grab) { const k = id(G - 1, G - 1) * 3; grab = [x[k], x[k + 1], x[k + 2]]; }
+      const u = (c - 3.2) / 1.8, e = u * u;
+      pin = [grab[0] + 6 * e, grab[1] + 4.5 * Math.sin(Math.min(1, u * 1.3) * Math.PI / 2) + 1.5 * e, grab[2] + 5 * e];
+    }
+    if (c > 7.6) { c = 0; grab = null; drop(); }
+    const sub = 2; for (let s = 0; s < sub; s++) step(dt / sub, pin);
+    // normals for the silk
+    nrm.fill(0);
+    for (let q = 0; q < idx.length; q += 3) {
+      const a = idx[q] * 3, b = idx[q + 1] * 3, d = idx[q + 2] * 3, ux = x[b] - x[a], uy = x[b + 1] - x[a + 1], uz = x[b + 2] - x[a + 2], vx = x[d] - x[a], vy = x[d + 1] - x[a + 1], vz = x[d + 2] - x[a + 2];
+      const nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;
+      for (const k of [a, b, d]) { nrm[k] += nx; nrm[k + 1] += ny; nrm[k + 2] += nz; }
+    }
+    for (let i = 0; i < NP; i++) { verts.set([x[i * 3], x[i * 3 + 1], x[i * 3 + 2], nrm[i * 3], nrm[i * 3 + 1], nrm[i * 3 + 2]], i * 6); }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, W, H); gl.clearColor(0.025, 0.024, 0.027, 1); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.enable(gl.DEPTH_TEST);
+    const M = matrix(t);
+    gl.useProgram(floorP.p); gl.uniformMatrix4fv(floorP.u.M, false, M); gl.bindVertexArray(fv); gl.drawArrays(gl.TRIANGLES, 0, 6);
+    gl.useProgram(chromeP.p); gl.uniformMatrix4fv(chromeP.u.M, false, M); gl.uniform3f(chromeP.u.E, ...E);
+    gl.uniform1f(chromeP.u.MAT, 0); gl.bindVertexArray(sphM.v); gl.drawArrays(gl.TRIANGLES, 0, sphM.n);
+    gl.uniform1f(chromeP.u.MAT, 1); gl.bindVertexArray(cylM.v); gl.drawArrays(gl.TRIANGLES, 0, cylM.n);
+    gl.useProgram(clothP.p); gl.uniformMatrix4fv(clothP.u.M, false, M); gl.uniform3f(clothP.u.E, ...E);
+    gl.bindVertexArray(cv); gl.bindBuffer(gl.ARRAY_BUFFER, cb); gl.bufferSubData(gl.ARRAY_BUFFER, 0, verts); gl.drawElements(gl.TRIANGLES, idx.length, gl.UNSIGNED_SHORT, 0);
+    gl.bindVertexArray(null); gl.disable(gl.DEPTH_TEST);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/chrome/dna-helix.js

@@ -0,0 +1,52 @@
+// DNA double helix: two backbones winding round a common axis, a quarter turn apart in the minor/major groove way real
+// DNA is, joined by base pairs (A–T, C–G). Everything is built as points in 3D, turned, projected and drawn back to
+// front as shaded spheres, so it reads as solid without a 3D engine. A replication fork travels along it: there the
+// strands peel apart, rungs split into their two halves, then zip back together behind it.
+const PARAMS = { spin: 1, unzip: 1 };
+
+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 || 1; H = stage.clientHeight || 1; 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 BASES = { A: '#ff5d73', T: '#ffd166', C: '#4cc9f0', G: '#7bd389' }, PAIR = { A: 'T', T: 'A', C: 'G', G: 'C' };
+  const N = 44, seq = Array.from({ length: N }, () => 'ATCG'[Math.random() * 4 | 0]);
+  // a shaded sphere sprite per colour, made once
+  const ball = col => { const c = document.createElement('canvas'); c.width = c.height = 64; const g = c.getContext('2d'), gr = g.createRadialGradient(24, 22, 2, 32, 32, 31); gr.addColorStop(0, '#fff'); gr.addColorStop(0.25, col); gr.addColorStop(1, 'rgba(0,0,0,.85)'); g.fillStyle = gr; g.beginPath(); g.arc(32, 32, 31, 0, 7); g.fill(); return c; };
+  const SPR = Object.fromEntries([...Object.entries(BASES), ['bb1', '#9aa7ff'], ['bb2', '#c7a0ff']].map(([k, v]) => [k, ball(v)]));
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    const t = (now - t0) / 1000, S = Math.min(W, H), F = S * 2.4;
+    const bg = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.max(W, H) * 0.7); bg.addColorStop(0, '#141a33'); bg.addColorStop(1, '#05060d');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+    const spin = t * 0.6 * PARAMS.spin, tilt = 1.05, ct = Math.cos(tilt), st = Math.sin(tilt);
+    const fork = ((t * 0.09) % 1.4 - 0.2) * N;                             // where the strands are open, travelling along
+    const items = [];
+    const put = (x, y, z, spr, r) => {
+      // tilt the helix's axis diagonally across the view, then project
+      const X = x * ct - y * st, Y = x * st + y * ct, k = F / (F + z * S * 0.5);
+      items.push({ x: W / 2 + X * S * 0.34 * k, y: H / 2 + Y * S * 0.34 * k, z, s: r * S * 0.045 * k, spr });
+    };
+    for (let i = 0; i < N; i++) {
+      const y = (i / (N - 1) - 0.5) * 2.6, a = i * 0.6 + spin;
+      const open = PARAMS.unzip * Math.max(0, 1 - Math.abs(i - fork) / 5) ** 1.5;   // how far apart the strands are here
+      const R = 0.32 + open * 0.35, a2 = a + 2.4 + open * 0.8;               // the second strand sits ~140° round (the grooves)
+      const p1 = [Math.cos(a) * R, y, Math.sin(a) * R], p2 = [Math.cos(a2) * R, y, Math.sin(a2) * R];
+      put(...p1, 'bb1', 0.55); put(...p2, 'bb2', 0.55);
+      const b1 = seq[i], b2 = PAIR[b1], gap = 0.5 + open * 0.5;
+      for (let k = 1; k <= 4; k++) {                                       // the rung: each half its base's colour, split where open
+        const u = k / 9; put(p1[0] + (p2[0] - p1[0]) * u * gap, y, p1[2] + (p2[2] - p1[2]) * u * gap, b1, 0.36);
+        put(p2[0] + (p1[0] - p2[0]) * u * gap, y, p2[2] + (p1[2] - p2[2]) * u * gap, b2, 0.36);
+      }
+    }
+    items.sort((a, b) => b.z - a.z);
+    for (const it of items) { const fog = Math.min(1, Math.max(0.35, 0.75 - it.z * 0.5)); ctx.globalAlpha = fog; ctx.drawImage(SPR[it.spr], it.x - it.s, it.y - it.s, it.s * 2, it.s * 2); }
+    ctx.globalAlpha = 1;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}