motion-library 0.0.0-stage → 0.1.0

package/anims/flow/galton-board.js

@@ -0,0 +1,155 @@
+// Galton board: glass beads pour through a triangle of brass pegs. At every peg a bead goes left or right, more or
+// less a coin toss, so where it lands is the sum of a dozen coin tosses, and sums of coin tosses pile up as a bell
+// curve: the binomial distribution, which tends to the normal one. The beads are real little bodies: they bounce
+// off pegs, knock into each other and stack in the bins. Their colour shifts as the run goes on, so each bin shows its
+// history in layers. The chalk line is what theory expects for this many beads. Then the floor opens and it starts again.
+const PARAMS = { beads: 400, rows: 12, rate: 26 };
+
+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 = 1, H = 1, u = 1, ox = 0, oy = 0;
+  const R = Math.max(4, Math.min(16, Math.round(PARAMS.rows))), NB = Math.max(50, Math.round(PARAMS.beads));
+  const resize = () => {
+    const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth || 1; H = stage.clientHeight || 1;
+    canvas.width = Math.max(1, (W * d) | 0); canvas.height = Math.max(1, (H * d) | 0); ctx.setTransform(d, 0, 0, d, 0, 0);
+    u = Math.min(W * 0.92, (H * 0.96) / 1.04); ox = (W - u) / 2; oy = (H - u * 1.04) / 2;
+    sprites = makeSprites(); restart();
+  };
+  // geometry in board units (the board is 1 wide)
+  const dx = 0.78 / (R + 1), dy = dx * 0.86, rb = Math.min(0.0058, dx * 0.085), rp = rb * 1.3;
+  const top = 0.15, rowY = i => top + i * dy, binTop = rowY(R - 1) + dy * 0.7, floor = 1.0;
+  // a full lattice of pegs between the side walls: rows alternate by half a step, and the top row has one dead centre
+  const pegs = []; for (let i = 0; i < R; i++) for (let k = -R; k <= R; k++) { const x = 0.5 + (k + (i % 2) * 0.5) * dx; if (Math.abs(x - 0.5) < (R + 1) / 2 * dx - dx * 0.35) pegs.push([x, rowY(i)]); }
+  const dividers = []; for (let k = 0; k <= R + 1; k++) dividers.push(0.5 + (k - (R + 1) / 2) * dx);
+  const funnel = [[0.28, 0.0, 0.475, 0.085], [0.72, 0.0, 0.525, 0.085]];
+  const walls = funnel;
+
+  // a shaded glass bead per hue, drawn once
+  let sprites = [];
+  const makeSprites = () => Array.from({ length: 16 }, (_, k) => {
+    const c = document.createElement('canvas'), s = 24; c.width = c.height = s; const g = c.getContext('2d');
+    const hue = 195 - k * 11, gr = g.createRadialGradient(s * 0.38, s * 0.34, 0, s / 2, s / 2, s / 2);
+    gr.addColorStop(0, `hsl(${hue} 90% 88%)`); gr.addColorStop(0.35, `hsl(${hue} 75% 58%)`); gr.addColorStop(0.85, `hsl(${hue} 70% 28%)`); gr.addColorStop(1, `hsla(${hue} 70% 18% / 0)`);
+    g.fillStyle = gr; g.beginPath(); g.arc(s / 2, s / 2, s / 2, 0, 7); g.fill();
+    g.fillStyle = 'rgba(255,255,255,.85)'; g.beginPath(); g.arc(s * 0.36, s * 0.32, s * 0.09, 0, 7); g.fill();
+    return c;
+  });
+
+  let bx, by, vx, vy, hue, bin, live, made, phase, phaseT;
+  function restart() { bx = new Float32Array(NB); by = new Float32Array(NB); vx = new Float32Array(NB); vy = new Float32Array(NB); hue = new Uint8Array(NB); bin = new Int8Array(NB).fill(-1); live = 0; made = 0; phase = 'pour'; phaseT = 0; }
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const G = 2.4, E = 0.2, WALL = 0.0015;
+  const hashCell = rb * 2.2, grid = new Map();
+  function step(h, open) {
+    for (let i = 0; i < live; i++) { vy[i] = Math.min(0.95, vy[i] + G * h); vx[i] *= 1 - 1.5 * h; bx[i] += vx[i] * h; by[i] += vy[i] * h; }   // a speed cap, so nothing tunnels through a peg
+    for (let i = 0; i < live; i++) {
+      // pegs: push out, bounce, and a hair of noise (real boards are chaotic: tiny differences decide left or right)
+      if (by[i] > top - 0.03 && by[i] < binTop) for (const [px, py] of pegs) {
+        const ex = bx[i] - px, ey = by[i] - py, d2 = ex * ex + ey * ey, m = rb + rp;
+        if (d2 < m * m && d2 > 1e-12) {
+          const d = Math.sqrt(d2), nx = ex / d, ny = ey / d; bx[i] = px + nx * m; by[i] = py + ny * m;
+          const vn = vx[i] * nx + vy[i] * ny;
+          if (vn < 0) {
+            vx[i] -= (1 + E) * vn * nx; vy[i] -= (1 + E) * vn * ny;
+            vx[i] = Math.max(-0.21, Math.min(0.21, vx[i] * 0.6 + (Math.random() - 0.5) * 0.05)); vy[i] *= 0.5;   // pegs soak up energy: about half a step sideways per row
+          }
+        }
+      }
+      // the funnel's two slopes
+      for (const [x1, y1, x2, y2] of walls) {
+        const sx = x2 - x1, sy = y2 - y1, t = Math.max(0, Math.min(1, ((bx[i] - x1) * sx + (by[i] - y1) * sy) / (sx * sx + sy * sy)));
+        const qx = x1 + sx * t, qy = y1 + sy * t, ex = bx[i] - qx, ey = by[i] - qy, d = Math.hypot(ex, ey);
+        if (d < rb && d > 1e-9) { const nx = ex / d, ny = ey / d; bx[i] = qx + nx * rb; by[i] = qy + ny * rb; const vn = vx[i] * nx + vy[i] * ny; if (vn < 0) { vx[i] -= 1.3 * vn * nx; vy[i] -= 1.3 * vn * ny; } }
+      }
+      // bin walls and the floor
+      if (bin[i] < 0 && by[i] > binTop) bin[i] = Math.max(0, Math.min(R, Math.floor((bx[i] - dividers[0]) / dx)));   // once in a bin, it stays there
+      if (bx[i] < dividers[0] + rb) { bx[i] = dividers[0] + rb; vx[i] = Math.abs(vx[i]) * 0.3; }
+      if (bx[i] > dividers[R + 1] - rb) { bx[i] = dividers[R + 1] - rb; vx[i] = -Math.abs(vx[i]) * 0.3; }
+      if (!open && by[i] > floor - rb) { by[i] = floor - rb; if (vy[i] > 0) vy[i] *= -0.15; vx[i] *= 0.6; }
+    }
+    // beads against beads: a spatial hash, then push overlapping pairs apart and kill their closing speed
+    for (let pass = 0; pass < 2; pass++) {                      // two relaxation passes keep the stacks from sagging
+    grid.clear();
+    for (let i = 0; i < live; i++) { const k = ((bx[i] / hashCell) | 0) * 4096 + ((by[i] / hashCell) | 0); let a = grid.get(k); if (!a) grid.set(k, a = []); a.push(i); }
+    for (let i = 0; i < live; i++) {
+      const cx = (bx[i] / hashCell) | 0, cy = (by[i] / hashCell) | 0;
+      for (let gx = cx - 1; gx <= cx + 1; gx++) for (let gy = cy - 1; gy <= cy + 1; gy++) {
+        const a = grid.get(gx * 4096 + gy); if (!a) continue;
+        for (const j of a) {
+          if (j <= i) continue;
+          const ex = bx[j] - bx[i], ey = by[j] - by[i], d2 = ex * ex + ey * ey, m = rb * 2;
+          if (d2 < m * m && d2 > 1e-12) {
+            const d = Math.sqrt(d2), nx = ex / d, ny = ey / d, push = (m - d) * 0.5;
+            bx[i] -= nx * push; by[i] -= ny * push; bx[j] += nx * push; by[j] += ny * push;
+            const rel = (vx[j] - vx[i]) * nx + (vy[j] - vy[i]) * ny;
+            if (rel < 0) { const imp = rel * 0.55; vx[i] += imp * nx; vy[i] += imp * ny; vx[j] -= imp * nx; vy[j] -= imp * ny; }
+          }
+        }
+      }
+    }
+    }
+    for (let i = 0; i < live; i++) {
+      const b = bin[i]; if (b < 0) continue;
+      const lo = dividers[b] + rb + WALL, hi = dividers[b + 1] - rb - WALL;
+      if (bx[i] < lo) { bx[i] = lo; vx[i] = Math.abs(vx[i]) * 0.3; } else if (bx[i] > hi) { bx[i] = hi; vx[i] = -Math.abs(vx[i]) * 0.3; }
+      vx[i] *= 0.97; if (Math.abs(vy[i]) < 0.03) vy[i] *= 0.85;   // settle the stacks
+      if (!open && by[i] > floor - rb) by[i] = floor - rb;
+    }
+  }
+
+  // the bell curve: expected beads per bin for this many beads, as a stack height
+  const choose = (n, k) => { let r = 1; for (let i = 1; i <= k; i++) r = (r * (n - k + i)) / i; return r; };
+  const perRow = dx / (rb * 2), rowH = rb * 1.62;                // how tightly the beads actually pack
+
+  let raf, last = performance.now(), spawnAcc = 0;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now; phaseT += dt;
+    if (phase === 'pour') {
+      spawnAcc += dt * PARAMS.rate;
+      while (spawnAcc > 1 && made < NB) { spawnAcc--; const i = live++; bx[i] = 0.47 + Math.random() * 0.06; by[i] = -0.02 - Math.random() * 0.03; vx[i] = (Math.random() - 0.5) * 0.05; vy[i] = 0.2; hue[i] = Math.min(15, Math.floor((made / NB) * 16)); made++; }
+      if (made >= NB && phaseT > NB / PARAMS.rate + 4) { phase = 'drain'; phaseT = 0; }
+    } else if (phase === 'drain' && phaseT > 3.2) restart();
+    const sub = 6, h = dt / sub;
+    for (let s = 0; s < sub; s++) step(h, phase === 'drain' && phaseT > 0.9);
+
+    // draw the board
+    const g = ctx.createLinearGradient(0, 0, 0, H); g.addColorStop(0, '#1a1d24'); g.addColorStop(1, '#101217');
+    ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
+    const X = x => ox + x * u, Y = y => oy + y * u;
+    ctx.fillStyle = 'rgba(255,255,255,.035)'; ctx.fillRect(X(dividers[0]) - 6, Y(0.11), (dividers[R + 1] - dividers[0]) * u + 12, (floor - 0.11) * u + 6);   // the glass panel
+    ctx.strokeStyle = '#8b6a3a'; ctx.lineWidth = Math.max(1.5, u * 0.006); ctx.lineCap = 'round';
+    ctx.beginPath(); for (const [x1, y1, x2, y2] of funnel) { ctx.moveTo(X(x1), Y(y1)); ctx.lineTo(X(x2), Y(y2)); } ctx.stroke();
+    ctx.strokeStyle = 'rgba(210,220,235,.32)'; ctx.lineWidth = Math.max(1, u * 0.0028);
+    ctx.beginPath(); for (const x of dividers) { ctx.moveTo(X(x), Y(binTop)); ctx.lineTo(X(x), Y(floor)); } ctx.stroke();
+    const open = phase === 'drain' && phaseT > 0.9;
+    ctx.strokeStyle = open ? 'rgba(210,220,235,.12)' : 'rgba(210,220,235,.5)'; ctx.lineWidth = Math.max(1.5, u * 0.004);
+    ctx.beginPath(); ctx.moveTo(X(dividers[0]), Y(floor)); ctx.lineTo(X(dividers[R + 1]), Y(floor)); ctx.stroke();
+    for (const [px, py] of pegs) {                              // brass pegs
+      const r = rp * u, pg = ctx.createRadialGradient(X(px) - r * 0.35, Y(py) - r * 0.35, 0, X(px), Y(py), r);
+      pg.addColorStop(0, '#fff1c4'); pg.addColorStop(0.4, '#d4a64a'); pg.addColorStop(1, '#6b4c18');
+      ctx.fillStyle = pg; ctx.beginPath(); ctx.arc(X(px), Y(py), r, 0, 7); ctx.fill();
+    }
+    // the curve theory predicts for the beads poured so far
+    if (made > 20) {
+      ctx.strokeStyle = 'rgba(255,248,230,.55)'; ctx.lineWidth = 1.4; ctx.setLineDash([4, 4]); ctx.beginPath();
+      const mean = R / 2, sd = Math.sqrt(R) / 2;
+      for (let k = 0; k <= 80; k++) {
+        const b = (k / 80) * (R + 1) - 0.5, x = 0.5 + (b - mean) * dx, expect = (made / (sd * Math.sqrt(2 * Math.PI))) * Math.exp(-((b - mean) ** 2) / (2 * sd * sd));
+        const y = floor - (expect / perRow) * rowH; k ? ctx.lineTo(X(x), Y(Math.max(binTop - 0.02, y))) : ctx.moveTo(X(x), Y(Math.max(binTop - 0.02, y)));
+      }
+      ctx.stroke(); ctx.setLineDash([]);
+    }
+    // beads
+    const br = rb * u * 1.12;
+    for (let i = 0; i < live; i++) { if (by[i] > 1.2) continue; ctx.drawImage(sprites[hue[i]], X(bx[i]) - br, Y(by[i]) - br, br * 2, br * 2); }
+    ctx.fillStyle = 'rgba(230,236,245,.5)'; ctx.font = `500 ${Math.max(10, Math.round(u * 0.022))}px ui-monospace, Menlo, monospace`; ctx.textAlign = 'left';
+    ctx.fillText(`${made} beads · ${R} rows · p = ½`, X(dividers[0]), Y(0.035));
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/flow/gpu-particles.js

@@ -0,0 +1,73 @@
+// GPU particles: 262,144 particles whose positions live in a float texture. A fragment shader moves every one
+// through 3D curl noise each frame (ping-pong between two textures); the vertex shader reads them back as points.
+const PARAMS = { size: 512, 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: false });
+  if (!gl || !gl.getExtension('EXT_color_buffer_float')) { stage.textContent = 'This needs WebGL2 with float render targets.'; return () => canvas.remove(); }
+  const N = Math.max(64, Math.round(PARAMS.size)), COUNT = N * N;
+  const quadVS = `#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, 0, 1); }`;
+  const simFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D S; uniform float T, dt;
+  vec3 h3(vec3 p) { p = fract(p * vec3(.1031, .103, .0973)); p += dot(p, p.yxz + 33.33); return fract((p.xxy + p.yxx) * p.zyx) * 2. - 1.; }
+  float n3(vec3 p) { vec3 i = floor(p), f = fract(p), u = f * f * (3. - 2. * f);
+    return mix(mix(mix(dot(h3(i), f), dot(h3(i + vec3(1,0,0)), f - vec3(1,0,0)), u.x), mix(dot(h3(i + vec3(0,1,0)), f - vec3(0,1,0)), dot(h3(i + vec3(1,1,0)), f - vec3(1,1,0)), u.x), u.y),
+               mix(mix(dot(h3(i + vec3(0,0,1)), f - vec3(0,0,1)), dot(h3(i + vec3(1,0,1)), f - vec3(1,0,1)), u.x), mix(dot(h3(i + vec3(0,1,1)), f - vec3(0,1,1)), dot(h3(i + vec3(1,1,1)), f - vec3(1,1,1)), u.x), u.y), u.z); }
+  vec3 pot(vec3 p) { return vec3(n3(p), n3(p + 31.4), n3(p - 17.9)); }
+  vec3 curl(vec3 p) { const float e = .05; vec3 dx = vec3(e, 0, 0), dy = vec3(0, e, 0), dz = vec3(0, 0, e);
+    vec3 a = (pot(p + dy) - pot(p - dy)), b = (pot(p + dz) - pot(p - dz)), c = (pot(p + dx) - pot(p - dx));
+    return vec3(a.z - b.y, b.x - c.z, c.y - a.x) / (2. * e); }
+  void main() {
+    vec4 s = texture(S, uv); vec3 p = s.xyz; float life = s.w - dt * .12;
+    p += curl(p * 1.1 + T * .05) * dt * .18;
+    p -= p * dt * .05 * dot(p, p);                                   // a soft pull keeps the cloud together
+    if (life < 0.) { vec3 r = h3(vec3(uv * 91.7, T)); p = normalize(r) * .35 * (.5 + .5 * fract(r.x * 7.)); life = 1.; }
+    o = vec4(p, life);
+  }`;
+  const drawVS = `#version 300 es
+  uniform sampler2D S; uniform int N; uniform float T; uniform vec2 R; out float k; out float l;
+  void main() {
+    ivec2 c = ivec2(gl_VertexID % N, gl_VertexID / N); vec4 s = texelFetch(S, c, 0); vec3 p = s.xyz;
+    float a = T * .15, ca = cos(a), sa = sin(a); p = vec3(p.x * ca - p.z * sa, p.y, p.x * sa + p.z * ca);
+    float z = p.z + 2.2;
+    gl_Position = vec4(p.x / z * 2.4 * R.y / R.x, p.y / z * 2.4, 0, 1); gl_PointSize = R.y / 700. + 1.;
+    k = clamp(length(s.xyz) * 1.4, 0., 1.); l = s.w;
+  }`;
+  const drawFS = `#version 300 es
+  precision mediump float; in float k; in float l; out vec4 o;
+  void main() { vec3 c = mix(vec3(1., .55, .18), vec3(.25, .65, 1.), k); o = vec4(c * .09 * smoothstep(0., .2, l) * smoothstep(1., .85, l), 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 mk = (v, f) => { const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, v)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, f)); gl.bindAttribLocation(p, 0, 'p'); gl.linkProgram(p); return p; };
+  const sim = mk(quadVS, simFS), draw = mk(drawVS, drawFS);
+  const quad = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, quad); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  const init = new Float32Array(COUNT * 4);
+  for (let i = 0; i < COUNT; i++) { const r = Math.cbrt(Math.random()) * 0.6, t = Math.random() * 6.28, u = Math.random() * 2 - 1, s = Math.sqrt(1 - u * u); init.set([Math.cos(t) * s * r, u * r, Math.sin(t) * s * r, Math.random()], i * 4); }
+  const tgt = () => { const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, N, N, 0, gl.RGBA, gl.FLOAT, init);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); return { tex, fb }; };
+  let A = tgt(), B = tgt();
+  const vao = gl.createVertexArray();
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); canvas.width = stage.clientWidth * d | 0; canvas.height = stage.clientHeight * d | 0; };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000) * PARAMS.speed; last = now;
+    gl.disable(gl.BLEND); gl.useProgram(sim); gl.bindBuffer(gl.ARRAY_BUFFER, quad); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, B.fb); gl.viewport(0, 0, N, N); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, A.tex);
+    gl.uniform1i(gl.getUniformLocation(sim, 'S'), 0); gl.uniform1f(gl.getUniformLocation(sim, 'T'), now / 1000); gl.uniform1f(gl.getUniformLocation(sim, 'dt'), dt);
+    gl.drawArrays(gl.TRIANGLES, 0, 3); [A, B] = [B, A];
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, canvas.width, canvas.height);
+    gl.clearColor(0.015, 0.018, 0.03, 1); gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE); gl.useProgram(draw); gl.bindVertexArray(vao);
+    gl.bindTexture(gl.TEXTURE_2D, A.tex); gl.uniform1i(gl.getUniformLocation(draw, 'S'), 0); gl.uniform1i(gl.getUniformLocation(draw, 'N'), N);
+    gl.uniform1f(gl.getUniformLocation(draw, 'T'), now / 1000); gl.uniform2f(gl.getUniformLocation(draw, 'R'), canvas.width, canvas.height);
+    gl.drawArrays(gl.POINTS, 0, COUNT); gl.bindVertexArray(null);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/flow/harmonograph.js

@@ -0,0 +1,61 @@
+// Harmonograph: the Victorian drawing machine. Two pendulums move the pen left-right and up-down, and a third swings
+// the paper; each is a decaying sine. When their frequencies sit near a simple ratio (2:3, 3:4, 1:2) the pen traces
+// a slowly precessing rosette, and the tiny detuning is what makes the loops creep round. As the swing dies down the
+// figure spirals into the centre; then the paper is changed and a new ratio is drawn.
+const PARAMS = { speed: 1, decay: 0.6 };
+
+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');
+  const paper = document.createElement('canvas'), pctx = paper.getContext('2d');
+  let W = 0, H = 0, d = 1;
+  const resize = () => { d = Math.min(devicePixelRatio, 2); W = stage.clientWidth || 1; H = stage.clientHeight || 1; canvas.width = paper.width = W * d; canvas.height = paper.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); pctx.setTransform(d, 0, 0, d, 0, 0); fresh(); };
+  const RATIOS = [[2, 3], [3, 4], [1, 2], [3, 5], [4, 5], [1, 3], [2, 5]];
+  const INKS = ['#1d3c6e', '#7a1e3a', '#1f5b4a', '#5a3d8a', '#8a4a12'];
+  let pend, time = 0, prev = null, ink, nth = 0;
+  function fresh() {
+    const [p, q] = RATIOS[nth % RATIOS.length], base = 1.6, det = () => (Math.random() - 0.5) * 0.012;
+    pend = [
+      { f: base * p + det(), ph: Math.random() * 6.28, a: 1 },                          // pen x
+      { f: base * q + det(), ph: Math.random() * 6.28, a: 1 },                          // pen y
+      { f: base * p + det() * 2, ph: Math.random() * 6.28, a: 0.35 + Math.random() * 0.2 },   // paper x
+      { f: base * q + det() * 2, ph: Math.random() * 6.28, a: 0.35 + Math.random() * 0.2 },   // paper y
+    ];
+    ink = INKS[nth % INKS.length]; nth++; time = 0; prev = null;
+    pctx.fillStyle = '#f3ede0'; pctx.fillRect(0, 0, W, H);
+    for (let i = 0; i < 600; i++) { pctx.fillStyle = `rgba(120,100,70,${Math.random() * 0.04})`; pctx.fillRect(Math.random() * W, Math.random() * H, 1, 1); }   // paper grain
+  }
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  const pos = t => {
+    const k = 0.01 + 0.05 * PARAMS.decay, e = Math.exp(-k * t), S = Math.min(W, H) * 0.42;
+    const [a, b, c, dd] = pend;
+    return [W / 2 + S * e * (a.a * Math.sin(a.f * t + a.ph) + c.a * Math.sin(c.f * t + c.ph)) / 1.5, H / 2 + S * e * (b.a * Math.sin(b.f * t + b.ph) + dd.a * Math.sin(dd.f * t + dd.ph)) / 1.5, e];
+  };
+  let raf, last = performance.now(), hold = 0;
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now;
+    if (hold > 0) { hold -= dt; if (hold <= 0) fresh(); }
+    else {
+      // many small sub-steps per frame keep the curve smooth
+      const steps = 80, h = dt * PARAMS.speed * 5 / steps;
+      pctx.strokeStyle = ink; pctx.lineCap = 'round'; pctx.lineJoin = 'round';
+      for (let i = 0; i < steps; i++) {
+        time += h; const [x, y, e] = pos(time);
+        if (prev) { pctx.globalAlpha = 0.55 + 0.4 * e; pctx.lineWidth = 0.55 + 0.5 * e; pctx.beginPath(); pctx.moveTo(prev[0], prev[1]); pctx.lineTo(x, y); pctx.stroke(); }
+        prev = [x, y];
+        if (e < 0.04) { hold = 1.6; break; }                               // the swing has died: admire it, then change the paper
+      }
+      pctx.globalAlpha = 1;
+    }
+    ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.drawImage(paper, 0, 0); ctx.setTransform(d, 0, 0, d, 0, 0);
+    if (prev && hold <= 0) {                                              // the pen nib
+      ctx.fillStyle = ink; ctx.beginPath(); ctx.arc(prev[0], prev[1], 3, 0, 7); ctx.fill();
+      ctx.strokeStyle = 'rgba(0,0,0,.18)'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(prev[0], prev[1]); ctx.lineTo(prev[0] + 40, prev[1] - 60); ctx.stroke();
+    }
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/flow/holi.js

@@ -0,0 +1,153 @@
+// Holi powder: handfuls of coloured powder thrown up into a bright sky, billowing and drifting as they slow. Every
+// burst is a few thousand soft puffs that drag to a stop, swell and swirl in turbulence. To make them read as clouds
+// rather than flat blobs, the puffs shade each other: each frame their density is splatted into a coarse 3D grid,
+// light is marched through the grid from the sun, and each puff is lit by what gets through. The sun is behind the
+// powder, so thin edges glow and thick cores go dusky. Puffs are sorted far to near and drawn over one another.
+const PARAMS = { bursts: 1, puffs: 1100, wind: 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: false, premultipliedAlpha: true });
+  if (!gl) { stage.textContent = 'This needs WebGL2.'; return () => canvas.remove(); }
+  const PAL = [[0.95, 0.12, 0.55], [1, 0.82, 0.08], [0.1, 0.55, 0.95], [0.15, 0.78, 0.35], [1, 0.45, 0.08], [0.55, 0.22, 0.9], [0.98, 0.3, 0.3]];
+  const SUN = (() => { const v = [0.35, 0.55, 0.75]; const l = Math.hypot(...v); return v.map(x => x / l); })();   // high, a little right, behind the powder
+  const MAXP = 14000;
+  const P = { x: new Float32Array(MAXP), y: new Float32Array(MAXP), z: new Float32Array(MAXP), vx: new Float32Array(MAXP), vy: new Float32Array(MAXP), vz: new Float32Array(MAXP), age: new Float32Array(MAXP), life: new Float32Array(MAXP), s: new Float32Array(MAXP), r: new Float32Array(MAXP), g: new Float32Array(MAXP), b: new Float32Array(MAXP), rot: new Float32Array(MAXP), light: new Float32Array(MAXP) };
+  let count = 0;
+  const hands = [-3.6, -1.6, 0.4, 2.3, 4.1];
+  function burst() {
+    const n = Math.round(PARAMS.puffs), hx = hands[(Math.random() * hands.length) | 0] + (Math.random() - 0.5) * 0.6, hz = 7 + Math.random() * 2, col = PAL[(Math.random() * PAL.length) | 0];
+    const ax = (Math.random() - 0.5) * 1.1, power = 10 + Math.random() * 5;
+    for (let k = 0; k < n; k++) {
+      let i = count < MAXP ? count++ : (Math.random() * MAXP) | 0;   // when full, overwrite an old puff
+      const u = Math.random(), a = Math.random() * 6.283, spread = 0.62 * Math.sqrt(u);
+      P.x[i] = hx; P.y[i] = -1.2; P.z[i] = hz;
+      const sp = power * (0.35 + 0.65 * Math.random());
+      P.vx[i] = (ax + Math.cos(a) * spread) * sp; P.vy[i] = sp; P.vz[i] = Math.sin(a) * spread * sp;
+      P.age[i] = 0; P.life[i] = 4.5 + Math.random() * 3; P.s[i] = 0.08 + Math.random() * 0.08; P.rot[i] = Math.random() * 6.283;
+      const j = (Math.random() - 0.5) * 0.12; P.r[i] = Math.min(1, col[0] + j); P.g[i] = Math.min(1, col[1] + j); P.b[i] = Math.min(1, col[2] + j);
+    }
+  }
+  // the shadow grid over the space where powder flies
+  const GX = 30, GY = 20, GZ = 16, X0 = -8, X1 = 8, Y0 = 0, Y1 = 9, Z0 = 3, Z1 = 13;
+  const dens = new Float32Array(GX * GY * GZ), trans = new Float32Array(GX * GY * GZ);
+  const cell = (x, y, z) => { const i = Math.floor((x - X0) / (X1 - X0) * GX), j = Math.floor((y - Y0) / (Y1 - Y0) * GY), k = Math.floor((z - Z0) / (Z1 - Z0) * GZ); return i < 0 || j < 0 || k < 0 || i >= GX || j >= GY || k >= GZ ? -1 : (k * GY + j) * GX + i; };
+  function shade() {
+    dens.fill(0);
+    for (let i = 0; i < count; i++) { const c = cell(P.x[i], P.y[i], P.z[i]); if (c >= 0) dens[c] += alphaOf(i) * P.s[i] * P.s[i] * 3; }
+    // march toward the sun from every cell, summing density: how much light reaches it
+    const sx = SUN[0] / (X1 - X0) * GX, sy = SUN[1] / (Y1 - Y0) * GY, sz = SUN[2] / (Z1 - Z0) * GZ, sl = Math.max(Math.abs(sx), Math.abs(sy), Math.abs(sz)), dx = sx / sl, dy = sy / sl, dz = sz / sl;
+    for (let k = 0; k < GZ; k++) for (let j = 0; j < GY; j++) for (let i = 0; i < GX; i++) {
+      let x = i + 0.5, y = j + 0.5, z = k + 0.5, tau = 0;
+      for (let s = 0; s < 20; s++) { x += dx; y += dy; z += dz; if (x < 0 || y < 0 || z < 0 || x >= GX || y >= GY || z >= GZ) break; tau += dens[((z | 0) * GY + (y | 0)) * GX + (x | 0)]; }
+      trans[(k * GY + j) * GX + i] = Math.exp(-tau * 0.6);
+    }
+    for (let i = 0; i < count; i++) { const c = cell(P.x[i], P.y[i], P.z[i]); P.light[i] = c >= 0 ? trans[c] : 1; }
+  }
+  const alphaOf = i => { const a = P.age[i], l = P.life[i]; return Math.min(1, a / 0.15) * Math.max(0, 1 - a / l) * 0.55 / (1 + a * 0.6); };
+
+  // GL: the sky and a crowd's silhouette; then the puffs as textured, rotated sprites
+  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 QUAD = `#version 300 es
+  layout(location = 0) in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, 0, 1); }`;
+  const skyP = prog(QUAD, `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform vec2 R; uniform vec3 SUNS;
+  void main() {
+    vec3 c = mix(vec3(1., .9, .78), vec3(.36, .6, .93), smoothstep(.0, .95, uv.y));
+    vec2 q = (uv - SUNS.xy) * vec2(R.x / R.y, 1.); float d = length(q);
+    c += vec3(1., .95, .8) * (exp(-d * 9.) * .6 + smoothstep(.045, .035, d) * .9);
+    o = vec4(c, 1);
+  }`);
+  const puffP = prog(`#version 300 es
+  layout(location = 0) in vec2 c; layout(location = 1) in vec4 PS; layout(location = 2) in vec4 CL;   // PS: x y z size; CL: r g b alpha
+  layout(location = 3) in vec2 RL;                               // rotation, light
+  uniform float A, FOC; uniform vec3 SUN; out vec2 q; out vec4 col; out float lit, rot, back;
+  void main() {
+    vec3 p = PS.xyz; vec2 v = vec2(p.x, p.y - 2.2) / p.z * FOC;
+    gl_Position = vec4((v.x + c.x * PS.w * FOC / p.z) / A, v.y + c.y * PS.w * FOC / p.z, 0, 1);
+    q = c; col = CL; lit = RL.y; rot = RL.x;
+    back = pow(max(0., dot(normalize(p), SUN)), 4.);             // looking toward the sun through thin powder
+  }`, `#version 300 es
+  precision highp float; in vec2 q; in vec4 col; in float lit, rot, back; out vec4 o; uniform sampler2D TX;
+  void main() {
+    float c = cos(rot), s = sin(rot); vec2 r = mat2(c, -s, s, c) * q;
+    float tex = texture(TX, r * .5 + .5).r, a = col.a * tex;
+    if (a < .004) discard;
+    vec3 sky = vec3(.55, .7, .95), sunc = vec3(1., .93, .78);
+    vec3 cc = col.rgb * (sky * .55 + sunc * (.25 + lit * .8)) + col.rgb * sunc * lit * back * (1. - tex) * 1.6;   // thin edges glow when backlit
+    o = vec4(cc * a, a);
+  }`);
+  // a soft, lumpy puff texture: noise inside a falling-off disc
+  const TS = 64, tdata = new Uint8Array(TS * TS * 4);
+  const hh = (x, y) => { const s = Math.sin(x * 127.1 + y * 311.7) * 43758.5453; return s - Math.floor(s); };
+  const vn = (x, y) => { const xi = Math.floor(x), yi = Math.floor(y), u = x - xi, v = y - yi, su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v); return hh(xi, yi) * (1 - su) * (1 - sv) + hh(xi + 1, yi) * su * (1 - sv) + hh(xi, yi + 1) * (1 - su) * sv + hh(xi + 1, yi + 1) * su * sv; };
+  for (let y = 0; y < TS; y++) for (let x = 0; x < TS; x++) {
+    const u = (x / (TS - 1)) * 2 - 1, v = (y / (TS - 1)) * 2 - 1, r = Math.hypot(u, v), n = vn(u * 3 + 9, v * 3) * 0.6 + vn(u * 7, v * 7 + 4) * 0.4;
+    const val = Math.max(0, Math.min(1, (1 - r) * 1.9 - 0.45 + (n - 0.5) * 1.3)) ** 1.1;
+    tdata.set([val * 255, 0, 0, 255], (y * TS + x) * 4);
+  }
+  const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, TS, TS, 0, gl.RGBA, gl.UNSIGNED_BYTE, tdata);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  const quadV = gl.createVertexArray(); gl.bindVertexArray(quadV);
+  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 puffV = gl.createVertexArray(); gl.bindVertexArray(puffV);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  const inst = new Float32Array(MAXP * 10), ib = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, ib); gl.bufferData(gl.ARRAY_BUFFER, inst.byteLength, gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 40, 0); gl.vertexAttribDivisor(1, 1);
+  gl.enableVertexAttribArray(2); gl.vertexAttribPointer(2, 4, gl.FLOAT, false, 40, 16); gl.vertexAttribDivisor(2, 1);
+  gl.enableVertexAttribArray(3); gl.vertexAttribPointer(3, 2, gl.FLOAT, false, 40, 32); gl.vertexAttribDivisor(3, 1);
+  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();
+  const FOC = 1.5;
+  let raf, last = performance.now(), t = 0, next = 0, order = new Uint32Array(MAXP), depth = new Float32Array(MAXP);
+  for (let i = 0; i < 4; i++) { burst(); for (let s = 0; s < 40 + i * 30; s++) step(1 / 60); }   // a sky already full of colour
+  function step(dt) {
+    t += dt;
+    for (let i = 0; i < count; i++) {
+      if (P.age[i] > P.life[i]) continue;
+      const drag = Math.exp(-dt * (2.4 + P.age[i]));
+      // turbulence: a smooth swirling field, plus a breeze to the right
+      const tx = Math.sin(P.y[i] * 1.3 + t * 0.7) + Math.sin(P.z[i] * 0.9 - t * 0.4), ty = Math.sin(P.z[i] * 1.1 + t * 0.6) * 0.6, tz = Math.cos(P.x[i] * 1.2 - t * 0.5);
+      P.vx[i] = P.vx[i] * drag + (tx * 0.9 + 0.6 * PARAMS.wind) * dt; P.vy[i] = P.vy[i] * drag + (ty * 0.9 - 0.25) * dt; P.vz[i] = P.vz[i] * drag + tz * 0.9 * dt;
+      P.x[i] += P.vx[i] * dt; P.y[i] += P.vy[i] * dt; P.z[i] += P.vz[i] * dt;
+      P.age[i] += dt; P.s[i] += dt * (0.14 + 0.3 / (1 + P.age[i] * 2)); P.rot[i] += dt * 0.3 * ((i & 1) * 2 - 1);
+    }
+  }
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now;
+    step(dt);
+    if (t > next) { burst(); next = t + (0.7 + Math.random() * 0.9) / Math.max(0.2, PARAMS.bursts); }
+    // compact out the dead now and then
+    if (Math.random() < 0.05) { let j = 0; for (let i = 0; i < count; i++) if (P.age[i] <= P.life[i]) { if (i !== j) for (const k in P) P[k][j] = P[k][i]; j++; } count = j; }
+    shade();
+    // sort far to near, then pack the instance buffer
+    let n = 0; for (let i = 0; i < count; i++) if (P.age[i] <= P.life[i]) { order[n] = i; depth[i] = P.z[i]; n++; }
+    const ord = order.subarray(0, n).sort((a, b) => depth[b] - depth[a]);
+    for (let k = 0; k < n; k++) { const i = ord[k], o = k * 10; inst[o] = P.x[i]; inst[o + 1] = P.y[i]; inst[o + 2] = P.z[i]; inst[o + 3] = P.s[i]; inst[o + 4] = P.r[i]; inst[o + 5] = P.g[i]; inst[o + 6] = P.b[i]; inst[o + 7] = alphaOf(i); inst[o + 8] = P.rot[i]; inst[o + 9] = P.light[i]; }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, W, H); gl.disable(gl.BLEND);
+    gl.useProgram(skyP.p); gl.uniform2f(skyP.u.R, W, H);
+    // where the sun sits on screen
+    const sz = SUN[2], sv = [SUN[0] / sz * FOC / (W / H), (SUN[1] / sz) * FOC]; gl.uniform3f(skyP.u.SUNS, sv[0] * 0.5 + 0.5, Math.min(0.92, sv[1] * 0.5 + 0.5), 0);
+    gl.bindVertexArray(quadV); gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.useProgram(puffP.p); gl.uniform1f(puffP.u.A, W / H); gl.uniform1f(puffP.u.FOC, FOC); gl.uniform3f(puffP.u.SUN, ...SUN);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, tex); gl.uniform1i(puffP.u.TX, 0);
+    gl.bindVertexArray(puffV); gl.bindBuffer(gl.ARRAY_BUFFER, ib); gl.bufferSubData(gl.ARRAY_BUFFER, 0, inst, 0, n * 10);
+    gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, n);
+    gl.disable(gl.BLEND); gl.bindVertexArray(null);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/flow/iron-filings.js

@@ -0,0 +1,112 @@
+// Iron filings: thousands of steel slivers scattered on paper over hidden bar magnets. Each sliver turns to lie along
+// the field, as a tiny compass would. When the paper is tapped the filings hop, and they settle onto field lines:
+// they are pulled across the field toward the nearest contour of the flux function (in 2D, the sum of each pole's
+// angle, weighted by its charge), which is where real filings chain up end to end. Drag a magnet and tap again.
+const PARAMS = { filings: 9000, lines: 36, taps: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 1, H = 1, D = 1, paper = null;
+  // paper: warm cream, a little fibre, a vignette, all drawn once
+  const makePaper = () => {
+    paper = document.createElement('canvas'); paper.width = canvas.width; paper.height = canvas.height;
+    const g = paper.getContext('2d'); g.setTransform(D, 0, 0, D, 0, 0);
+    g.fillStyle = '#ece4d2'; g.fillRect(0, 0, W, H);
+    for (let i = 0; i < W * H / 60; i++) { g.fillStyle = `rgba(${Math.random() < 0.5 ? '120,100,70' : '255,255,245'},${Math.random() * 0.06})`; g.fillRect(Math.random() * W, Math.random() * H, 1 + Math.random() * 3, 0.6); }
+    const v = g.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.3, W / 2, H / 2, Math.max(W, H) * 0.75); v.addColorStop(0, 'rgba(0,0,0,0)'); v.addColorStop(1, 'rgba(60,45,25,.22)');
+    g.fillStyle = v; g.fillRect(0, 0, W, H);
+  };
+  const N = Math.max(500, Math.round(PARAMS.filings));
+  const fx = new Float32Array(N), fy = new Float32Array(N), fa = new Float32Array(N), fl = new Float32Array(N), shade = new Uint8Array(N);
+  const scatter = () => { for (let i = 0; i < N; i++) { fx[i] = Math.random() * W; fy[i] = Math.random() * H; fa[i] = Math.random() * Math.PI; fl[i] = 2.2 + Math.random() * 3.2; shade[i] = (Math.random() * 3) | 0; } };
+  const resize = () => {
+    D = Math.min(devicePixelRatio, 2); W = stage.clientWidth || 1; H = stage.clientHeight || 1;
+    canvas.width = Math.max(1, (W * D) | 0); canvas.height = Math.max(1, (H * D) | 0); ctx.setTransform(D, 0, 0, D, 0, 0); makePaper(); scatter(); place();
+  };
+  // two bar magnets, each a north and a south pole a bar-length apart
+  const mags = [{ x: 0, y: 0, a: 0, len: 0, tx: 0, ty: 0 }, { x: 0, y: 0, a: 0, len: 0, tx: 0, ty: 0 }];
+  function place() {
+    const s = Math.min(W, H);
+    Object.assign(mags[0], { x: W * 0.36, y: H * 0.5, a: 0.2, len: s * 0.34 }); Object.assign(mags[1], { x: W * 0.68, y: H * 0.52, a: Math.PI / 2 + 0.3, len: s * 0.28 });
+    mags.forEach(m => { m.tx = m.x; m.ty = m.y; });
+  }
+  const poles = () => mags.flatMap(m => { const c = Math.cos(m.a) * m.len / 2, s = Math.sin(m.a) * m.len / 2; return [[m.x + c, m.y + s, 1], [m.x - c, m.y - s, -1]]; });
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  // drag a magnet
+  let drag = null;
+  const at = e => { const r = canvas.getBoundingClientRect(); return [e.clientX - r.left, e.clientY - r.top]; };
+  const down = e => { const [x, y] = at(e); let best = null, bd = Math.min(W, H) * 0.2; for (const m of mags) { const d = Math.hypot(x - m.x, y - m.y); if (d < bd) { bd = d; best = m; } } if (best) { drag = { m: best, dx: best.x - x, dy: best.y - y }; canvas.setPointerCapture(e.pointerId); canvas.style.cursor = 'grabbing'; } };
+  const move = e => { if (!drag) return; const [x, y] = at(e); drag.m.tx = x + drag.dx; drag.m.ty = y + drag.dy; };
+  const up = () => { if (drag) tapAt = time; drag = null; canvas.style.cursor = 'grab'; };
+  canvas.addEventListener('pointerdown', down); canvas.addEventListener('pointermove', move); canvas.addEventListener('pointerup', up); canvas.addEventListener('pointercancel', up);
+
+  let raf, last = performance.now(), time = 0, tapAt = 0.6, nextTap = 0.6;
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now; time += dt;
+    // left alone, the second magnet drifts slowly round, and the paper is tapped every few seconds
+    if (!drag) { const m = mags[1]; m.tx = W * (0.66 + 0.1 * Math.sin(time * 0.17)); m.ty = H * (0.5 + 0.18 * Math.sin(time * 0.23)); m.a += dt * 0.12; }
+    for (const m of mags) { m.x += (m.tx - m.x) * Math.min(1, dt * 6); m.y += (m.ty - m.y) * Math.min(1, dt * 6); }
+    if (time > nextTap) { tapAt = time; nextTap = time + 2.4 / Math.max(0.2, PARAMS.taps); }
+    const since = time - tapAt, hop = since < 0.55 ? Math.exp(-since * 5) : 0;   // how loose the filings are right now
+    const P = poles(), K = 2 * Math.max(2, Math.round(PARAMS.lines / 2)), s = Math.min(W, H);   // even, so the lines meet seamlessly round each pole
+    for (let i = 0; i < N; i++) {
+      let bx = 0, by = 0, gpx = 0, gpy = 0, psi = 0;
+      for (const [px, py, q] of P) {
+        const dx = fx[i] - px, dy = fy[i] - py, r2 = dx * dx + dy * dy + 30;
+        bx += (q * dx) / r2; by += (q * dy) / r2;                  // a 2D pole's field falls off as 1/r
+        psi += q * Math.atan2(dy, dx); gpx += (-q * dy) / r2; gpy += (q * dx) / r2;   // the flux function and its gradient
+      }
+      const b = Math.hypot(bx, by) + 1e-9;
+      // turn toward the field (a filing has no head or tail, so the nearest of the two directions)
+      let da = Math.atan2(by, bx) - fa[i]; da -= Math.PI * Math.round(da / Math.PI);
+      fa[i] += da * Math.min(1, dt * (2 + 30 * hop) * Math.min(1, b * s * 0.6));
+      if (hop > 0.01) {
+        // a gentle pull across the field toward the nearest field line (filings chain up there), lost in the shake far
+        // from the magnets where the field is weak; and a slide along the field toward the stronger end
+        const g = Math.hypot(gpx, gpy) + 1e-9, pull = -Math.sin(K * psi / 2), grip = Math.min(1, b * s * 0.35);
+        const across = Math.max(-1, Math.min(1, pull * 1.5)) * 1.1 * grip * hop;
+        fx[i] += (gpx / g) * across + (Math.random() - 0.5) * hop * 2.6;
+        fy[i] += (gpy / g) * across + (Math.random() - 0.5) * hop * 2.6;
+        const along = (Math.random() - 0.5) * 3.2 * hop;
+        fx[i] += (bx / b) * along; fy[i] += (by / b) * along;
+        if (fx[i] < 0) fx[i] += W; else if (fx[i] > W) fx[i] -= W; if (fy[i] < 0) fy[i] += H; else if (fy[i] > H) fy[i] -= H;
+      }
+    }
+    // draw: the paper (it jumps a pixel when tapped), the magnets' faint shadows through it, then the filings
+    const j = hop * 1.2;
+    ctx.save(); ctx.translate((Math.random() - 0.5) * j, (Math.random() - 0.5) * j);
+    ctx.drawImage(paper, 0, 0, W, H);
+    for (const m of mags) {
+      ctx.save(); ctx.translate(m.x, m.y); ctx.rotate(m.a);
+      const w = m.len * 1.08, h = m.len * 0.2, g = ctx.createLinearGradient(-w / 2, 0, w / 2, 0);
+      g.addColorStop(0, 'rgba(150,40,30,.09)'); g.addColorStop(0.5, 'rgba(60,50,40,.05)'); g.addColorStop(1, 'rgba(30,60,120,.09)');
+      ctx.fillStyle = g; ctx.filter = 'blur(6px)'; ctx.fillRect(-w / 2, -h / 2, w, h); ctx.filter = 'none';
+      ctx.fillStyle = 'rgba(80,60,40,.18)'; ctx.font = `600 ${Math.round(h * 0.55)}px system-ui, sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.fillText('N', w * 0.38, 0); ctx.fillText('S', -w * 0.38, 0);
+      ctx.restore();
+    }
+    ctx.lineCap = 'round';
+    ctx.lineWidth = 1.5; ctx.strokeStyle = 'rgba(70,55,35,.16)'; ctx.beginPath();          // tiny cast shadows
+    for (let i = 0; i < N; i++) { const c = Math.cos(fa[i]) * fl[i], s2 = Math.sin(fa[i]) * fl[i]; ctx.moveTo(fx[i] - c + 0.8, fy[i] - s2 + 1); ctx.lineTo(fx[i] + c + 0.8, fy[i] + s2 + 1); }
+    ctx.stroke();
+    const tones = ['#2e2f33', '#46484d', '#5d6066'];
+    ctx.lineWidth = 1.1;
+    for (let k = 0; k < 3; k++) {
+      ctx.strokeStyle = tones[k]; ctx.beginPath();
+      for (let i = 0; i < N; i++) { if (shade[i] !== k) continue; const c = Math.cos(fa[i]) * fl[i], s2 = Math.sin(fa[i]) * fl[i]; ctx.moveTo(fx[i] - c, fy[i] - s2); ctx.lineTo(fx[i] + c, fy[i] + s2); }
+      ctx.stroke();
+    }
+    ctx.restore();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => {
+    cancelAnimationFrame(raf); ro.disconnect();
+    canvas.removeEventListener('pointerdown', down); canvas.removeEventListener('pointermove', move); canvas.removeEventListener('pointerup', up); canvas.removeEventListener('pointercancel', up);
+    canvas.remove();
+  };
+}

package/anims/flow/lightning.js

@@ -0,0 +1,72 @@
+// Lightning arcs: midpoint displacement makes a fractal path (split each segment, push the middle sideways,
+// repeat), some segments fork into fading branches, and a blurred under-stroke plus a white core makes the glow.
+const PARAMS = { branches: 0.5, rate: 14 };
+
+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 = 0, py = 0, 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);
+
+  function bolt(x1, y1, x2, y2, rough, depth, out, width) {
+    const pts = [[x1, y1], [x2, y2]];
+    let disp = Math.hypot(x2 - x1, y2 - y1) * rough;
+    for (let k = 0; k < depth; k++) {
+      for (let i = pts.length - 1; i > 0; i--) {
+        const [ax, ay] = pts[i - 1], [bx, by] = pts[i], mx = (ax + bx) / 2, my = (ay + by) / 2, nx = -(by - ay), ny = bx - ax, l = Math.hypot(nx, ny) || 1, o = (Math.random() - 0.5) * disp;
+        pts.splice(i, 0, [mx + nx / l * o, my + ny / l * o]);
+      }
+      disp *= 0.55;
+    }
+    out.push({ pts, width });
+    if (width > 0.6) for (let i = 2; i < pts.length - 2; i++) {
+      if (Math.random() < PARAMS.branches * 0.06) {
+        const [sx, sy] = pts[i], ang = Math.atan2(y2 - y1, x2 - x1) + (Math.random() - 0.5) * 1.8, len = Math.hypot(x2 - x1, y2 - y1) * (0.15 + Math.random() * 0.3);
+        bolt(sx, sy, sx + Math.cos(ang) * len, sy + Math.sin(ang) * len, rough, Math.max(2, depth - 2), out, width * 0.45);
+      }
+    }
+    return out;
+  }
+  const nodes = () => [[W * 0.18, H * 0.22], [W * 0.82, H * 0.2], [W * 0.5, H * 0.86]];
+  let strikes = [], acc = 0, last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now;
+    let tx = px, ty = py;
+    if (now - lastMove > 1500) { const t = now / 1000; tx = W / 2 + Math.cos(t * 0.8) * W * 0.18; ty = H * 0.5 + Math.sin(t * 1.3) * H * 0.14; }
+    acc += dt * PARAMS.rate;
+    while (acc >= 1) {
+      acc -= 1;
+      const [nx, ny] = nodes()[Math.floor(Math.random() * 3)];
+      strikes.push({ segs: bolt(tx, ty, nx, ny, 0.22, 7, [], 2.2), life: 1 });
+    }
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = 'rgba(6, 8, 18, 0.32)'; ctx.fillRect(0, 0, W, H);
+    ctx.globalCompositeOperation = 'lighter';
+    ctx.lineJoin = 'round'; ctx.lineCap = 'round';
+    for (const s of strikes) {
+      const flick = 0.6 + Math.random() * 0.4;
+      for (const { pts, width } of s.segs) {
+        ctx.beginPath(); pts.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
+        ctx.strokeStyle = `rgba(110, 150, 255, ${0.35 * s.life * flick})`; ctx.lineWidth = width * 7; ctx.shadowColor = 'rgba(120,160,255,.9)'; ctx.shadowBlur = 18; ctx.stroke();
+        ctx.shadowBlur = 0; ctx.strokeStyle = `rgba(235, 242, 255, ${s.life * flick})`; ctx.lineWidth = width; ctx.stroke();
+      }
+      s.life -= dt * 7;
+    }
+    strikes = strikes.filter(s => s.life > 0);
+    // electrodes and the pointer's charge
+    ctx.globalCompositeOperation = 'source-over';
+    for (const [x, y] of nodes()) { ctx.fillStyle = '#c9d6ff'; ctx.beginPath(); ctx.arc(x, y, 5, 0, 7); ctx.fill(); }
+    const g = ctx.createRadialGradient(tx, ty, 0, tx, ty, 26); g.addColorStop(0, 'rgba(220,230,255,.9)'); g.addColorStop(1, 'rgba(120,150,255,0)');
+    ctx.fillStyle = g; ctx.beginPath(); ctx.arc(tx, ty, 26, 0, 7); ctx.fill();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); canvas.remove(); };
+}