motion-library 0.0.0-stage → 0.1.0

package/anims/flow/cloud-chamber.js

@@ -0,0 +1,101 @@
+// Cloud chamber: radiation made visible. The air is supersaturated with alcohol vapour, so every charged particle
+// that passes leaves a trail of droplets, lit from the side. A thoriated welding rod sends out alpha particles:
+// short, fat, dead-straight tracks. Beta electrons are thin and wander, and in the magnet under the chamber they
+// curl into tightening spirals as they lose energy. Every few seconds a cosmic-ray muon cuts clean across the whole
+// chamber, sometimes knocking loose a little electron of its own (a delta ray). Trails fade, swell and drift.
+const PARAMS = { activity: 1, field: 1, mist: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;background:#020304';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 1, H = 1, S = 1;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth || 1; H = stage.clientHeight || 1; S = Math.min(W, H); canvas.width = Math.max(1, (W * d) | 0); canvas.height = Math.max(1, (H * d) | 0); ctx.setTransform(d, 0, 0, d, 0, 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  // one soft droplet, drawn once and stamped thousands of times
+  const dot = document.createElement('canvas'); dot.width = dot.height = 32;
+  { const g = dot.getContext('2d'), r = g.createRadialGradient(16, 16, 0, 16, 16, 16); r.addColorStop(0, 'rgba(235,242,255,1)'); r.addColorStop(0.35, 'rgba(200,215,240,.55)'); r.addColorStop(1, 'rgba(160,180,220,0)'); g.fillStyle = r; g.fillRect(0, 0, 32, 32); }
+  // the mist: a little noise canvas that drifts, scaled up soft
+  const FW = 128, FH = 80, fog = document.createElement('canvas'); fog.width = FW; fog.height = FH; const fg = fog.getContext('2d'), fimg = fg.createImageData(FW, FH);
+  const hash = (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, a = hash(xi, yi), b = hash(xi + 1, yi), c = hash(xi, yi + 1), d = hash(xi + 1, yi + 1), su = u * u * (3 - 2 * u), sv = v * v * (3 - 2 * v); return a + (b - a) * su + (c - a) * sv + (a - b - c + d) * su * sv; };
+
+  const tracks = [], rand = (a, b) => a + Math.random() * (b - a);
+  const source = () => ({ x: W * 0.17, y: H * 0.7 });
+  // a track is a list of droplets, each with its own spread so the trail diffuses as it ages
+  function addTrack(kind, x, y, ang, len) {
+    const drops = [], B = 0.9 * PARAMS.field;
+    let px = x, py = y, a = ang, s = 0;
+    const step = kind === 'alpha' ? 1.1 : kind === 'muon' ? 2.2 : 1.6, sign = Math.random() < 0.9 ? 1 : -1;   // the odd positron curls the other way
+    while (s < len) {
+      const left = 1 - s / len;
+      if (kind === 'beta' || kind === 'delta') {
+        a += sign * B * step / (S * 0.32 * Math.pow(Math.max(0.05, left), 0.8));   // tighter as it slows: a spiral
+        a += (Math.random() - 0.5) * (0.05 + 0.5 * (1 - left) ** 2);                 // and multiple scattering
+      } else if (kind === 'alpha') { if (left < 0.12) a += (Math.random() - 0.5) * 0.12; }
+      px += Math.cos(a) * step; py += Math.sin(a) * step; s += step;
+      if (px < -20 || px > W + 20 || py < -20 || py > H + 20) break;
+      const n = kind === 'alpha' ? 1 : kind === 'muon' ? (Math.random() < 0.6 ? 1 : 0) : (Math.random() < 0.75 ? 1 : 0);
+      for (let k = 0; k < n; k++) drops.push({ x: px + rand(-0.6, 0.6), y: py + rand(-0.6, 0.6), dx: rand(-1, 1), dy: rand(-1, 1), r: kind === 'alpha' ? rand(1.1, 1.9) * (1 + (1 - left) * 0.6) : rand(0.6, 1.1) });
+      if (kind === 'muon' && Math.random() < 0.0016) addTrack('delta', px, py, a + rand(-1.6, 1.6), rand(0.04, 0.1) * S);
+    }
+    tracks.push({ kind, drops, age: 0, life: kind === 'alpha' ? 2.8 : kind === 'muon' ? 3 : 2.5, bright: kind === 'alpha' ? 0.2 : kind === 'muon' ? 0.5 : 0.62 });
+  }
+  const emit = kind => {
+    if (kind === 'alpha') { const s = source(); addTrack('alpha', s.x + rand(-2, 2), s.y + rand(-2, 2), rand(-1.9, 0.7), rand(0.16, 0.28) * S); }
+    else if (kind === 'beta') { const fromRod = Math.random() < 0.5, s = source(); addTrack('beta', fromRod ? s.x : rand(0, W), fromRod ? s.y : rand(0, H), rand(0, 6.283), rand(0.2, 0.75) * S); }
+    else {                                                        // a muon: in at one edge, straight out the other
+      const a = rand(0, 6.283), cx = rand(W * 0.2, W * 0.8), cy = rand(H * 0.2, H * 0.8), R = Math.hypot(W, H);
+      addTrack('muon', cx - Math.cos(a) * R / 2, cy - Math.sin(a) * R / 2, a, R);
+    }
+  };
+  const rates = { alpha: 2.2, beta: 2.2, muon: 0.45 };
+  const acc = { alpha: 0.8, beta: 0.3, muon: 0.85 };
+  // a little backlog so the chamber is never empty when it first appears
+  for (let i = 0; i < 3; i++) emit('alpha'); emit('beta'); emit('muon');
+  tracks.forEach((t, i) => { t.age = 0.15 + i * 0.25; });
+
+  let raf, last = performance.now(), time = 0;
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now; time += dt;
+    for (const k in rates) { acc[k] += dt * rates[k] * PARAMS.activity; while (acc[k] > 1) { acc[k] -= 1 + Math.random() * 0.6; emit(k); } }
+    // the chamber floor, lit by a lamp off the left edge
+    ctx.globalCompositeOperation = 'source-over';
+    const bg = ctx.createLinearGradient(0, 0, W, 0); bg.addColorStop(0, '#0b0f15'); bg.addColorStop(0.35, '#040507'); bg.addColorStop(1, '#020203');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+    // mist drifting across the light
+    for (let y = 0; y < FH; y++) for (let x = 0; x < FW; x++) {
+      const n = vn(x * 0.07 + time * 0.25, y * 0.085 - time * 0.08) * 0.6 + vn(x * 0.19 - time * 0.4, y * 0.19 + time * 0.1) * 0.4, i = (y * FW + x) * 4;
+      const v = Math.max(0, n - 0.3) * 55 * PARAMS.mist * (1.2 - x / FW);
+      fimg.data[i] = 170; fimg.data[i + 1] = 185; fimg.data[i + 2] = 215; fimg.data[i + 3] = v;
+    }
+    fg.putImageData(fimg, 0, 0); ctx.imageSmoothingEnabled = true; ctx.drawImage(fog, 0, 0, W, H);
+    // the source: a grey rod reaching in from the corner
+    const s = source();
+    ctx.save(); ctx.translate(s.x, s.y); ctx.rotate(Math.PI * 0.82);
+    const rg = ctx.createLinearGradient(0, -4, 0, 4); rg.addColorStop(0, '#9aa0a8'); rg.addColorStop(0.5, '#e4e7ea'); rg.addColorStop(1, '#4a4e55');
+    ctx.fillStyle = rg; ctx.fillRect(0, -3.2, S * 0.5, 6.4); ctx.beginPath(); ctx.arc(0, 0, 3.2, Math.PI / 2, -Math.PI / 2); ctx.fill(); ctx.restore();
+    // the tracks, and a fine drizzle of droplets falling out of the sensitive layer
+    ctx.globalCompositeOperation = 'lighter';
+    for (let i = 0; i < 140; i++) {
+      const h = (i * 0.6180339 + Math.floor(time * 0.7 + i * 0.37) * 0.17) % 1, x = h * W, y = ((i * 0.7548776) % 1) * H + ((time * 0.7 + i * 0.37) % 1) * 8;
+      ctx.globalAlpha = 0.18 * Math.sin(((time * 0.7 + i * 0.37) % 1) * Math.PI); ctx.drawImage(dot, x - 1.5, y - 1.5, 3, 3);
+    }
+    for (let i = tracks.length - 1; i >= 0; i--) {
+      const t = tracks[i]; t.age += dt;
+      if (t.age > t.life) { tracks.splice(i, 1); continue; }
+      const a = t.age, k = Math.min(1, a / 0.07) * Math.exp(-a / (t.life * 0.45)) * t.bright, swell = 1 + a * 0.9, spread = a * a * 4;
+      const driftX = Math.sin(time * 0.3) * a * 3, driftY = a * a * 5;   // convection, and droplets starting to fall
+      for (const d of t.drops) {
+        const x = d.x + d.dx * spread + driftX, y = d.y + d.dy * spread + driftY, r = d.r * swell * 2;
+        ctx.globalAlpha = Math.min(1, k * (0.75 + 0.5 * (1 - x / W)));   // nearer the lamp, brighter
+        ctx.drawImage(dot, x - r, y - r, r * 2, r * 2);
+      }
+    }
+    ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over';
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/flow/confetti.js

@@ -0,0 +1,46 @@
+// 3D paper confetti: each piece tumbles around its own axis (drawn as a squash of its width by cos(angle)),
+// so pieces flash their front and back colours. Drag slows the fall; a sideways flutter keeps them drifting.
+const PARAMS = { pieces: 160, gravity: 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; 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 colours = [['#ff4d6d', '#c9184a'], ['#ffd43b', '#f08c00'], ['#4dabf7', '#1864ab'], ['#69db7c', '#2b8a3e'], ['#ffffff', '#ced4da'], ['#ff922b', '#d9480f']];
+  let pieces = [];
+  function burst(x, y, n) {
+    const S = Math.min(W, H);
+    for (let i = 0; i < n; i++) {
+      const a = -Math.PI / 2 + (Math.random() - 0.5) * 1.6, sp = S * (1.4 + Math.random() * 1.6);
+      const c = colours[Math.floor(Math.random() * colours.length)];
+      pieces.push({ x, y, vx: Math.cos(a) * sp, vy: Math.sin(a) * sp, w: 5 + Math.random() * 6, h: 8 + Math.random() * 8, spin: Math.random() * 6.28, vs: 8 + Math.random() * 14, tilt: Math.random() * 6.28, vt: (Math.random() - 0.5) * 6, front: c[0], back: c[1], wob: Math.random() * 6.28, round: Math.random() < 0.25 });
+    }
+  }
+  let next = 0, last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now;
+    if (now > next) { const n = Math.round(PARAMS.pieces / 2); burst(W * 0.25, H, n); burst(W * 0.75, H, n); next = now + 2600; }
+    const g = Math.min(W, H) * 1.6 * PARAMS.gravity;
+    ctx.fillStyle = '#1b1530'; ctx.fillRect(0, 0, W, H);
+    for (const p of pieces) {
+      p.vy += g * dt;
+      p.vx *= Math.exp(-2.2 * dt); p.vy *= Math.exp(-2.2 * dt);             // paper is mostly drag
+      p.wob += dt * 5; p.x += (p.vx + Math.sin(p.wob) * 40) * dt; p.y += p.vy * dt;
+      p.spin += p.vs * dt; p.tilt += p.vt * dt;
+      const c = Math.cos(p.spin);
+      ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.tilt); ctx.scale(1, Math.abs(c) < 0.08 ? 0.08 : c);
+      ctx.fillStyle = c > 0 ? p.front : p.back;
+      if (p.round) { ctx.beginPath(); ctx.arc(0, 0, p.w * 0.6, 0, 7); ctx.fill(); }
+      else ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+      ctx.restore();
+    }
+    pieces = pieces.filter(p => p.y < H + 30);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/flow/curl-flow.js

@@ -0,0 +1,52 @@
+// Curl-noise flow field: particles follow the curl of a smooth stream function, which has no sources or sinks,
+// so they swirl without ever bunching up. A faint fill each frame leaves the trails.
+const PARAMS = { count: 4000, speed: 1, scale: 0.0025 };
+
+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); ctx.fillStyle = '#07161c'; ctx.fillRect(0, 0, W, H); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  // stream function ψ = Σ a·sin(kx·x + p)·cos(ky·y + q); velocity = (∂ψ/∂y, −∂ψ/∂x)
+  const waves = [[1, 1.0, 1.3, 0.0, 0.7], [0.6, 2.1, 1.7, 1.3, 2.2], [0.35, 3.7, 4.1, 2.6, 0.4]];
+  const field = (x, y, t) => {
+    let vx = 0, vy = 0; const s = PARAMS.scale;
+    for (const [a, kx, ky, p, q] of waves) {
+      const X = kx * x * s + p + t * 0.15 * kx, Y = ky * y * s + q - t * 0.1 * ky;
+      vx += -a * ky * Math.sin(X) * Math.sin(Y);   // ∂ψ/∂y
+      vy += -a * kx * Math.cos(X) * Math.cos(Y);   // −∂ψ/∂x
+    }
+    return [vx, vy];
+  };
+  const n = Math.round(PARAMS.count);
+  const P = new Float32Array(n * 3);
+  const spawn = i => { P[i * 3] = Math.random() * W; P[i * 3 + 1] = Math.random() * H; P[i * 3 + 2] = 60 + Math.random() * 200; };
+  for (let i = 0; i < n; i++) spawn(i);
+  const palette = ['#3bc9db', '#99e9f2', '#0a87a6', '#ffffff'];
+  let raf;
+  function frame(now) {
+    const t = now / 1000;
+    ctx.fillStyle = 'rgba(7, 22, 28, 0.09)'; ctx.fillRect(0, 0, W, H);
+    ctx.lineWidth = 1;
+    for (let c = 0; c < palette.length; c++) {
+      ctx.strokeStyle = palette[c]; ctx.globalAlpha = c === 3 ? 0.35 : 0.55; ctx.beginPath();
+      for (let i = c; i < n; i += palette.length) {
+        const x = P[i * 3], y = P[i * 3 + 1];
+        const [vx, vy] = field(x, y, t);
+        const nx = x + vx * PARAMS.speed * 0.9, ny = y + vy * PARAMS.speed * 0.9;
+        ctx.moveTo(x, y); ctx.lineTo(nx, ny);
+        P[i * 3] = nx; P[i * 3 + 1] = ny;
+        if (--P[i * 3 + 2] < 0 || nx < 0 || nx > W || ny < 0 || ny > H) spawn(i);
+      }
+      ctx.stroke();
+    }
+    ctx.globalAlpha = 1;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/flow/dandelion.js

@@ -0,0 +1,80 @@
+// Dandelion clock: a sphere of seeds (spread evenly by the golden angle) turning slowly in 3D. Gusts tear seeds loose
+// from the windward side; each one then floats on its parachute, tumbling slowly, carried by the gust and sinking a
+// little. A seed is a thin stalk with a fan of fine filaments, drawn in perspective. When the head is bare it regrows.
+const PARAMS = { seeds: 150, 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 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 N = Math.round(PARAMS.seeds), GA = Math.PI * (3 - Math.sqrt(5));
+  let seeds = [];
+  const grow = () => {
+    seeds = Array.from({ length: N }, (_, i) => {
+      const y = 1 - (i + 0.5) / N * 2, r = Math.sqrt(1 - y * y), a = i * GA;   // even points on a sphere
+      return { d: [Math.cos(a) * r, y, Math.sin(a) * r], free: false, x: 0, y: 0, z: 0, vx: 0, vy: 0, vz: 0, spin: 0, tilt: 0, fade: 1 };
+    });
+  };
+  grow();
+  let raf, last = performance.now(), regrow = 0;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now;
+    const t = now / 1000, S = Math.min(W, H), head = { x: W * 0.36, y: H * 0.45 }, R = S * 0.19;
+    const gust = Math.max(0, Math.sin(t * 0.55) * 0.7 + Math.sin(t * 1.3) * 0.3) * PARAMS.wind;   // gusts come and go
+    const bg = ctx.createLinearGradient(0, 0, W, H); bg.addColorStop(0, '#2f4d3f'); bg.addColorStop(1, '#14231d');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+    // soft bokeh behind
+    for (let i = 0; i < 9; i++) { const x = (i * 0.13 + 0.05) % 1 * W, y = ((i * 0.37) % 1) * H, r = S * (0.05 + (i % 3) * 0.03); const g = ctx.createRadialGradient(x, y, 0, x, y, r); g.addColorStop(0, 'rgba(210,235,170,.10)'); g.addColorStop(1, 'rgba(210,235,170,0)'); ctx.fillStyle = g; ctx.fillRect(x - r, y - r, r * 2, r * 2); }
+    // stem
+    ctx.strokeStyle = '#6f8f5a'; ctx.lineWidth = S * 0.012; ctx.lineCap = 'round';
+    ctx.beginPath(); ctx.moveTo(head.x, head.y); ctx.quadraticCurveTo(head.x - S * 0.04, head.y + S * 0.4, head.x + S * 0.02, H + 10); ctx.stroke();
+    ctx.fillStyle = '#7d6b3c'; ctx.beginPath(); ctx.arc(head.x, head.y, S * 0.025, 0, 7); ctx.fill();
+    const rot = t * 0.25, cr = Math.cos(rot), sr = Math.sin(rot), F = S * 2.2;
+    const proj = (x, y, z) => { const k = F / (F + z * R); return [head.x + x * R * k, head.y - y * R * k, k]; };
+    const list = [];
+    let attached = 0;
+    for (const s of seeds) {
+      if (!s.free) {
+        attached++;
+        const dx = s.d[0] * cr - s.d[2] * sr, dz = s.d[0] * sr + s.d[2] * cr;
+        // the wind takes seeds from the side it blows from, a few at a time
+        if (gust > 0.4 && dx < -0.2 && Math.random() < gust * dt * 0.9) {
+          Object.assign(s, { free: true, x: dx, y: s.d[1], z: dz, vx: 0.4 + gust * 1.2, vy: 0.2 + Math.random() * 0.4, vz: (Math.random() - 0.5) * 0.6, spin: (Math.random() - 0.5) * 2, tilt: Math.atan2(s.d[1], dx) });
+        } else { list.push({ s, x: dx, y: s.d[1], z: dz, a: Math.atan2(s.d[1], dx), att: true }); continue; }
+      }
+      // floating: drag pulls it toward the wind's speed, it sinks slowly, and it tumbles a little
+      s.vx += ((0.5 + gust * 1.6) - s.vx) * dt * 0.8; s.vy += (-0.12 - s.vy) * dt * 0.6 + Math.sin(t * 2 + s.spin * 9) * dt * 0.3; s.vz *= 1 - dt * 0.5;
+      s.x += s.vx * dt; s.y += s.vy * dt; s.z += s.vz * dt; s.tilt += s.spin * dt * 0.6;
+      if (head.x + s.x * R > W + 60 || head.y - s.y * R > H + 60) { s.fade = 0; continue; }
+      list.push({ s, x: s.x, y: s.y, z: s.z, a: s.tilt + Math.sin(t + s.spin * 5) * 0.4, att: false });
+    }
+    list.sort((p, q) => q.z - p.z);                                         // far first
+    for (const it of list) {
+      const [x, y, k] = proj(it.x, it.y, it.z), len = R * 0.55 * k, ca = Math.cos(it.a), sa = Math.sin(it.a);
+      // attached seeds point outward from the head; free ones hang under their parachute
+      const ux = it.att ? ca : Math.sin(it.a * 0.3) * 0.5, uy = it.att ? -sa : -1;
+      const bx = it.att ? head.x + (x - head.x) * 0.25 : x - ux * len * 0.6, by = it.att ? head.y + (y - head.y) * 0.25 : y - uy * len * 0.6;
+      const tx = it.att ? x : x + ux * len * 0.4, ty = it.att ? y : y + uy * len * 0.4;
+      const a = Math.min(1, 0.45 + k * 0.55);
+      ctx.strokeStyle = `rgba(240,236,220,${a * 0.7})`; ctx.lineWidth = Math.max(0.5, k * 0.8);
+      ctx.beginPath(); ctx.moveTo(bx, by); ctx.lineTo(tx, ty); ctx.stroke();
+      ctx.fillStyle = `rgba(120,100,60,${a})`; ctx.beginPath(); ctx.arc(bx, by, 1.2 * k, 0, 7); ctx.fill();
+      // the pappus: a fan of filaments, foreshortened by how it faces us
+      ctx.strokeStyle = `rgba(255,255,250,${a * 0.55})`; ctx.lineWidth = 0.5;
+      const pr = len * 0.42, dirA = Math.atan2(ty - by, tx - bx);
+      ctx.beginPath();
+      for (let j = 0; j < 14; j++) { const q = dirA + (j / 13 - 0.5) * 2.6; ctx.moveTo(tx, ty); ctx.lineTo(tx + Math.cos(q) * pr, ty + Math.sin(q) * pr * (0.55 + 0.45 * Math.abs(Math.cos(t * 0.3 + j)))); }
+      ctx.stroke();
+    }
+    seeds = seeds.filter(s => s.fade > 0);
+    if (!attached && !seeds.length) { regrow += dt; if (regrow > 1.2) { grow(); regrow = 0; } }
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/flow/dla-crystal.js

@@ -0,0 +1,57 @@
+// Diffusion-limited aggregation: particles wander at random until they touch the crystal, then stick where they hit.
+// Tips stick out further into the wandering particles than the hollows between them, so they catch more and grow
+// faster: that feedback is what grows the branching, coral-like fractal. Walkers start on a circle just outside the
+// crystal and are dropped if they stray too far. Colour follows the order things stuck, so you can read its growth.
+const PARAMS = { speed: 1, stickiness: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 0, H = 0, GW = 0, GH = 0, grid, img, ictx, idata, cx, cy, rmax, count;
+  const CELL = 2;
+  const reset = () => {
+    GW = Math.max(16, Math.ceil(W / CELL)); GH = Math.max(16, Math.ceil(H / CELL));
+    grid = new Uint8Array(GW * GH); img = document.createElement('canvas'); img.width = GW; img.height = GH;
+    ictx = img.getContext('2d'); idata = ictx.createImageData(GW, GH);
+    for (let i = 0; i < GW * GH; i++) { idata.data[i * 4] = 8; idata.data[i * 4 + 1] = 10; idata.data[i * 4 + 2] = 20; idata.data[i * 4 + 3] = 255; }
+    cx = GW >> 1; cy = GH >> 1; rmax = 2; count = 0; stick(cx, cy);
+  };
+  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); reset(); };
+  // colour along the growth: deep blue at the seed through cyan to a pale ice at the tips
+  const hue = k => { const s = Math.min(1, k); return [40 + 160 * s ** 1.5, 90 + 150 * s, 200 + 55 * s]; };
+  function stick(x, y) {
+    grid[y * GW + x] = 1; count++;
+    const r = Math.hypot(x - cx, y - cy); rmax = Math.max(rmax, r);
+    const [R, G, B] = hue(r / (Math.min(GW, GH) * 0.48)), k = (y * GW + x) * 4;
+    idata.data[k] = R; idata.data[k + 1] = G; idata.data[k + 2] = B;
+  }
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  const touching = (x, y) => grid[y * GW + x - 1] | grid[y * GW + x + 1] | grid[(y - 1) * GW + x] | grid[(y + 1) * GW + x];
+  let raf, done = 0;
+  function frame() {
+    if (done > 0) { done--; if (!done) reset(); }
+    else {
+      const limit = Math.min(GW, GH) / 2 - 3;
+      // a budget of random-walk steps per frame; each walker is released near the crystal so few steps are wasted
+      let budget = 160000 * PARAMS.speed, x = 0, y = 0, alive = false;
+      while (budget > 0) {
+        if (!alive) { const a = Math.random() * 6.28, r = rmax + 6; x = Math.round(cx + Math.cos(a) * r); y = Math.round(cy + Math.sin(a) * r); alive = true; }
+        const s = Math.random() * 4 | 0; x += s === 0 ? 1 : s === 1 ? -1 : 0; y += s === 2 ? 1 : s === 3 ? -1 : 0; budget--;
+        const d = Math.hypot(x - cx, y - cy);
+        if (d > rmax + 18 || x < 1 || y < 1 || x >= GW - 1 || y >= GH - 1) { alive = false; continue; }   // strayed: drop it
+        if (touching(x, y) && Math.random() < 0.35 + 0.65 * Math.min(1, PARAMS.stickiness)) { stick(x, y); alive = false; if (rmax > limit) { done = 120; break; } }
+      }
+      ictx.putImageData(idata, 0, 0);
+    }
+    ctx.fillStyle = '#080a14'; ctx.fillRect(0, 0, W, H);
+    ctx.imageSmoothingEnabled = false; ctx.drawImage(img, 0, 0, GW * CELL, GH * CELL);
+    // a soft bloom: the same image, blurred and added
+    ctx.globalCompositeOperation = 'lighter'; ctx.globalAlpha = 0.35; ctx.filter = 'blur(4px)'; ctx.drawImage(img, 0, 0, GW * CELL, GH * CELL);
+    ctx.filter = 'none'; ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over';
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}