motion-library 0.0.0-stage → 0.1.0

package/anims/fluid/bubbles.js

@@ -0,0 +1,152 @@
+// Soap bubbles: a wand blows them, they drift and wobble, and their thin film shows interference colours that
+// depend on its thickness: thinner at the top where it drains, banded lower down, darkening to gold just before
+// it pops. A pop tears the film open from one point and flings it out as droplets. Touch one to pop it.
+const PARAMS = { count: 12, wind: 0.3 };
+
+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';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 0, H = 0, u = 1, bg;
+  function paintBg() {
+    bg = document.createElement('canvas'); bg.width = W; bg.height = H;
+    const g = bg.getContext('2d'), lg = g.createLinearGradient(0, 0, W * 0.3, H);
+    lg.addColorStop(0, '#16263a'); lg.addColorStop(1, '#0a1220'); g.fillStyle = lg; g.fillRect(0, 0, W, H);
+    g.filter = `blur(${Math.round(8 * u)}px)`;                  // out-of-focus garden lights behind
+    for (let i = 0; i < 22; i++) {
+      const x = Math.random() * W, y = Math.random() * H * 0.8, r = (8 + Math.random() * 26) * u;
+      g.fillStyle = ['rgba(120,200,170,.18)', 'rgba(255,190,120,.16)', 'rgba(130,160,255,.16)', 'rgba(255,140,170,.12)'][i % 4];
+      g.beginPath(); g.arc(x, y, r, 0, 7); g.fill();
+    }
+    g.filter = 'none';
+  }
+  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); u = Math.min(W, H) / 256; paintBg(); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  // thin-film colour from thickness: three cosine bands out of phase approximate the interference palette
+  const film = (th, a) => {
+    if (th < 0.12) { const k = th / 0.12; return `rgba(${200 * k + 30 | 0},${160 * k + 20 | 0},${60 * k + 10 | 0},${a})`; }   // near-black, then gold
+    const r = 0.5 + 0.5 * Math.cos(6.283 * (th * 1.9 + 0.0)), g = 0.5 + 0.5 * Math.cos(6.283 * (th * 1.9 + 0.33)), b = 0.5 + 0.5 * Math.cos(6.283 * (th * 1.9 + 0.67));
+    return `rgba(${55 + 200 * r | 0},${55 + 200 * g | 0},${55 + 200 * b | 0},${a})`;
+  };
+  const wand = () => ({ x: W * 0.13, y: H * 0.74, r: 24 * u });
+  const bubbles = [], drops = [], puffs = [];
+  const make = (x, y, r, vx, vy, age = 0) => ({ x, y, r, vx, vy, age, life: 7 + Math.random() * 7, th: 0.9 + Math.random() * 0.5, spin: (Math.random() - 0.5) * 2, a2: 0.06, a3: 0.03, p2: Math.random() * 6, p3: Math.random() * 6, seed: Math.random() * 100, wob: 1 });
+  for (let i = 0; i < Math.min(6, PARAMS.count); i++) bubbles.push(make(W * (0.35 + Math.random() * 0.6), H * (0.15 + Math.random() * 0.6), (14 + Math.random() * 30) * u, 0, 0, Math.random() * 4));
+  let blowing = null, nextBlow = 0.3;
+
+  const shape = (b, t, k = 1) => {
+    const pts = [], amp = b.wob;
+    for (let i = 0; i < 44; i++) {
+      const a = i / 44 * 6.283;
+      const w = 1 + amp * (b.a2 * Math.cos(2 * a - b.p2) * Math.sin(t * 9 + b.seed) + b.a3 * Math.cos(3 * a - b.p3) * Math.sin(t * 13 + b.seed)) + 0.008 * Math.sin(3 * a + t * 2 + b.seed);
+      pts.push([b.x + Math.cos(a) * b.r * w * k, b.y + Math.sin(a) * b.r * w * k]);
+    }
+    return pts;
+  };
+  const trace = pts => { ctx.beginPath(); pts.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y)); ctx.closePath(); };
+  function drawBubble(b, t, open = 0) {
+    const fade = Math.min(1, b.age * 3);
+    const thin = b.th * Math.max(0, 1 - b.age / b.life);           // the film drains and thins with age
+    const cg = ctx.createConicGradient(-Math.PI / 2 + b.spin * t * 0.3, b.x, b.y);
+    for (let i = 0; i <= 12; i++) {
+      const a = i / 12 * 6.283, top = 0.5 + 0.5 * Math.cos(a);          // a = 0 is the top of the bubble: thinnest there
+      const th = thin * (0.55 + 0.45 * (1 - top)) + 0.07 * Math.sin(a * 3 + t * 1.5 + b.seed);
+      cg.addColorStop(i / 12, film(Math.max(0, th), 1));
+    }
+    ctx.globalCompositeOperation = 'screen';
+    if (open > 0) {                                                // popping: the film retracts away from the tear
+      ctx.save(); ctx.beginPath(); ctx.moveTo(b.x, b.y);
+      const a0 = b.popA + open * Math.PI, a1 = b.popA + Math.PI * 2 - open * Math.PI;
+      ctx.arc(b.x, b.y, b.r * 1.3, a0, a1); ctx.closePath(); ctx.clip();
+    }
+    const pts = shape(b, t);
+    ctx.globalAlpha = 0.06 * fade; trace(pts); ctx.fillStyle = cg; ctx.fill();
+    ctx.globalAlpha = 0.28 * fade; trace(shape(b, t, 0.84)); ctx.lineWidth = b.r * 0.3; ctx.strokeStyle = cg; ctx.stroke();
+    ctx.globalAlpha = 0.75 * fade; trace(shape(b, t, 0.965)); ctx.lineWidth = Math.max(1, b.r * 0.07); ctx.stroke();
+    // reflections: a curved glint hugging the upper-left rim, a soft sky spot, a faint bounce low right
+    ctx.globalAlpha = 0.8 * fade; ctx.strokeStyle = '#fff'; ctx.lineCap = 'round';
+    ctx.lineWidth = b.r * 0.09; ctx.beginPath(); ctx.arc(b.x, b.y, b.r * 0.78, Math.PI * 1.08, Math.PI * 1.36); ctx.stroke();
+    ctx.lineWidth = b.r * 0.05; ctx.beginPath(); ctx.arc(b.x, b.y, b.r * 0.78, Math.PI * 1.42, Math.PI * 1.47); ctx.stroke();
+    const hs = ctx.createRadialGradient(b.x - b.r * 0.32, b.y - b.r * 0.36, 0, b.x - b.r * 0.32, b.y - b.r * 0.36, b.r * 0.32);
+    hs.addColorStop(0, 'rgba(255,255,255,.35)'); hs.addColorStop(1, 'rgba(255,255,255,0)');
+    ctx.globalAlpha = fade; ctx.fillStyle = hs; ctx.fillRect(b.x - b.r, b.y - b.r, b.r, b.r);
+    ctx.globalAlpha = 0.35 * fade; ctx.lineWidth = b.r * 0.05; ctx.beginPath(); ctx.arc(b.x, b.y, b.r * 0.8, Math.PI * 0.18, Math.PI * 0.36); ctx.stroke();
+    if (open > 0) ctx.restore();
+    ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over';
+  }
+  function pop(b) {
+    if (b.pop != null) return;
+    b.pop = 0; b.popA = Math.random() * 6.283;
+    const n = Math.round(10 + b.r / u * 0.6);
+    for (let i = 0; i < n; i++) {
+      const a = b.popA + Math.PI + (Math.random() - 0.5) * 5.6, sp = (40 + Math.random() * 90) * u;
+      drops.push({ x: b.x + Math.cos(a) * b.r, y: b.y + Math.sin(a) * b.r, vx: Math.cos(a) * sp + b.vx, vy: Math.sin(a) * sp + b.vy, life: 0.5 + Math.random() * 0.5, age: 0, hue: Math.random() });
+    }
+    puffs.push({ x: b.x, y: b.y, r: b.r, age: 0 });
+  }
+
+  let px = -1e4, py = -1e4;
+  const onMove = e => { const r = canvas.getBoundingClientRect(); px = e.clientX - r.left; py = e.clientY - r.top; };
+  const onLeave = () => { px = py = -1e4; };
+  canvas.addEventListener('pointermove', onMove); canvas.addEventListener('pointerdown', onMove); canvas.addEventListener('pointerleave', onLeave);
+
+  let raf, last = performance.now();
+  const t0 = last;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now; const t = (now - t0) / 1000;
+    ctx.drawImage(bg, 0, 0, W, H);
+    const wd = wand();
+    // the wand: a membrane bulges out of the ring, grows into a bubble and pinches off
+    nextBlow -= dt;
+    if (!blowing && nextBlow <= 0 && bubbles.length < PARAMS.count) blowing = { k: 0, r: (16 + Math.random() * 22) * u };
+    if (blowing) {
+      blowing.k = Math.min(1, blowing.k + dt * 1.1);
+      const k = blowing.k, e = 1 - Math.pow(1 - k, 2), r = wd.r * 0.9 + (blowing.r - wd.r * 0.9) * e;
+      const b = { x: wd.x + (r + wd.r * 0.1) * e * 0.95, y: wd.y - e * 4 * u, r, age: 1, life: 99, th: 1.1, spin: 0.5, a2: 0, a3: 0, p2: 0, p3: 0, seed: 1, vx: 0, vy: 0, wob: 0 };
+      ctx.save(); ctx.translate(b.x, b.y); ctx.scale(1 - 0.18 * (1 - e), 1); ctx.translate(-b.x, -b.y); drawBubble(b, t); ctx.restore();
+      if (k >= 1) { const nb = make(b.x, b.y, r, (55 + 25 * Math.random()) * u, -14 * u); nb.age = 0.4; nb.a2 = 0.09; bubbles.push(nb); blowing = null; nextBlow = 0.9 + Math.random() * 0.8; }
+    }
+    for (const b of bubbles) {
+      b.age += dt; b.wob *= Math.exp(-dt * 1.1);
+      if (b.pop != null) { b.pop += dt / 0.11; continue; }
+      const fx = Math.sin(b.y * 0.012 / u + t * 0.7 + b.seed) * 10 * u, fy = Math.cos(b.x * 0.01 / u + t * 0.5) * 6 * u;
+      b.vx += (PARAMS.wind * 30 * u + fx - b.vx * 0.5) * dt;
+      b.vy += (fy + (-10 + b.age * 2.5) * u - b.vy * 0.5) * dt;          // rises on warm breath, then slowly sinks
+      b.x += b.vx * dt; b.y += b.vy * dt;
+      if (b.age > b.life || Math.hypot(b.x - px, b.y - py) < b.r) pop(b);
+      if (b.y - b.r < 0) { b.y = b.r; b.vy = Math.abs(b.vy) * 0.4; b.wob = Math.max(b.wob, 0.8); }
+    }
+    for (let i = 0; i < bubbles.length; i++) for (let j = i + 1; j < bubbles.length; j++) {   // soft bumps
+      const a = bubbles[i], c = bubbles[j]; if (a.pop != null || c.pop != null) continue;
+      const dx = c.x - a.x, dy = c.y - a.y, d = Math.hypot(dx, dy) || 1, o = a.r + c.r - d;
+      if (o > 0) { const nx = dx / d, ny = dy / d; a.x -= nx * o / 2; a.y -= ny * o / 2; c.x += nx * o / 2; c.y += ny * o / 2; const rv = (c.vx - a.vx) * nx + (c.vy - a.vy) * ny; if (rv < 0) { a.vx += nx * rv * 0.6; a.vy += ny * rv * 0.6; c.vx -= nx * rv * 0.6; c.vy -= ny * rv * 0.6; } a.p2 = c.p2 = Math.atan2(ny, nx) * 2; a.wob = Math.max(a.wob, 0.7); c.wob = Math.max(c.wob, 0.7); }
+    }
+    for (let i = bubbles.length - 1; i >= 0; i--) {
+      const b = bubbles[i];
+      if ((b.pop != null && b.pop >= 1) || b.x - b.r > W + 10 || b.y - b.r > H + 10 || b.x + b.r < -10) bubbles.splice(i, 1);
+      else drawBubble(b, t, b.pop != null ? b.pop : 0);
+    }
+    // the ring and handle drawn over the membrane's root
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = '#d9468a'; ctx.lineWidth = 4 * u; ctx.beginPath(); ctx.moveTo(wd.x - wd.r * 0.4, wd.y + wd.r * 0.95); ctx.lineTo(wd.x - wd.r * 1.4, H + 10); ctx.stroke();
+    ctx.lineWidth = 3.2 * u; ctx.beginPath(); ctx.ellipse(wd.x, wd.y, wd.r * 0.32, wd.r, 0, 0, 7); ctx.stroke();
+    ctx.strokeStyle = 'rgba(255,200,225,.6)'; ctx.lineWidth = 1 * u; ctx.beginPath(); ctx.ellipse(wd.x - 1 * u, wd.y, wd.r * 0.32, wd.r, 0, 2.2, 4); ctx.stroke();
+    // pop debris: droplets and a faint puff ring
+    ctx.globalCompositeOperation = 'screen';
+    for (let i = drops.length - 1; i >= 0; i--) {
+      const d = drops[i]; d.age += dt; if (d.age > d.life) { drops.splice(i, 1); continue; }
+      d.vy += 260 * u * dt; d.vx *= 0.97; d.vy *= 0.97; d.x += d.vx * dt; d.y += d.vy * dt;
+      ctx.fillStyle = film(0.4 + d.hue, 1 - d.age / d.life); ctx.beginPath(); ctx.arc(d.x, d.y, 1.2 * u, 0, 7); ctx.fill();
+    }
+    for (let i = puffs.length - 1; i >= 0; i--) {
+      const p = puffs[i]; p.age += dt; if (p.age > 0.35) { puffs.splice(i, 1); continue; }
+      ctx.strokeStyle = `rgba(220,235,255,${0.35 * (1 - p.age / 0.35)})`; ctx.lineWidth = 1.2 * u; ctx.beginPath(); ctx.arc(p.x, p.y, p.r * (1 + p.age * 1.4), 0, 7); ctx.stroke();
+    }
+    ctx.globalCompositeOperation = 'source-over';
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); canvas.removeEventListener('pointerdown', onMove); canvas.removeEventListener('pointerleave', onLeave); canvas.remove(); };
+}

package/anims/fluid/caustics.js

@@ -0,0 +1,45 @@
+// Pool caustics: light focused by a rippling surface. The pattern comes from bending sample points through
+// a few layers of moving waves and measuring how tightly they bunch up; bright threads where light converges.
+const PARAMS = { speed: 0.6, intensity: 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) { 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, I;
+  float caustic(vec2 q, float t) {
+    vec2 p = mod(q * 6.2832, 6.2832) - 250.; vec2 i = p; float c = 1.;
+    for (int n = 0; n < 5; n++) { float tt = t * (1. - 3.5 / float(n + 1)); i = p + vec2(cos(tt - i.x) + sin(tt + i.y), sin(tt - i.y) + cos(tt + i.x)); c += 1. / length(vec2(p.x / (sin(i.x + tt) / .005), p.y / (cos(i.y + tt) / .005))); }
+    c /= 5.; c = 1.17 - pow(c, 1.4); return pow(abs(c), 8.);
+  }
+  void main() {
+    vec2 a = vec2(R.x / R.y, 1.), q = uv * a;
+    float t = T + 23.;
+    // pool floor: pale tiles with darker grout
+    vec2 tile = fract(q * 7.); float grout = smoothstep(.0, .05, min(min(tile.x, 1. - tile.x), min(tile.y, 1. - tile.y)));
+    vec3 floorC = mix(vec3(.55, .78, .86), vec3(.82, .94, .97), grout);
+    // chromatic caustics: each channel sampled at a slight offset
+    float r = caustic(q * .9 + vec2(.004, 0), t), g = caustic(q * .9, t), b = caustic(q * .9 - vec2(.004, 0), t);
+    vec3 light = vec3(r, g, b) * I;
+    vec3 water = mix(vec3(.05, .38, .55), vec3(.15, .62, .74), uv.y);
+    vec3 c = floorC * water * 1.3 + light * vec3(.85, 1., 1.);
+    c *= .8 + .2 * smoothstep(1.2, .2, length(uv - .5));
+    o = vec4(c, 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 uR = gl.getUniformLocation(prog, 'R'), uT = gl.getUniformLocation(prog, 'T'), uI = gl.getUniformLocation(prog, 'I');
+  const resize = () => { const d = Math.min(devicePixelRatio, 1.5); canvas.width = stage.clientWidth * d | 0; canvas.height = stage.clientHeight * d | 0; gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf;
+  function frame(now) { gl.uniform2f(uR, canvas.width, canvas.height); gl.uniform1f(uT, now / 1000 * PARAMS.speed); gl.uniform1f(uI, PARAMS.intensity); 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/fluid/dripping-text.js

@@ -0,0 +1,53 @@
+// Dripping text: drops swell under the letters, stretch, pinch off and fall. A blur + alpha-threshold filter
+// (the gooey trick) melts drop and letter into one liquid shape, so the necks thin and snap like real paint.
+const PARAMS = { drips: 14, viscosity: 1 };
+
+export default function (stage) {
+  const id = 'drip-' + Math.random().toString(36).slice(2, 8);
+  const wrap = document.createElement('div');
+  wrap.style.cssText = 'position:absolute;inset:0;background:#f6efe3';
+  wrap.innerHTML = `<svg width="0" height="0" style="position:absolute"><filter id="${id}"><feGaussianBlur stdDeviation="5"/><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -11"/></filter></svg>`;
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = `position:absolute;inset:0;width:100%;height:100%;display:block;filter:url(#${id})`;
+  wrap.append(canvas); stage.append(wrap);
+  const ctx = canvas.getContext('2d');
+  let W = 0, H = 0, font = 0, baseY = 0, spots = [];
+  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);
+    font = Math.min(W * 0.24, H * 0.42); baseY = H * 0.46;
+    // find where the letters' bottom edges are, so drops start under real ink
+    const off = document.createElement('canvas'); off.width = Math.ceil(W); off.height = Math.ceil(H); const o = off.getContext('2d');
+    o.font = `900 ${font}px "Mona Sans", system-ui, sans-serif`; o.textAlign = 'center'; o.textBaseline = 'alphabetic'; o.fillText('DRIP', W / 2, baseY);
+    const data = o.getImageData(0, 0, off.width, off.height).data; spots = [];
+    for (let x = 2; x < off.width - 2; x += 3) { for (let y = Math.min(off.height - 1, Math.ceil(baseY + 4)); y > baseY - font; y--) if (data[(y * off.width + x) * 4 + 3] > 200) { if (y > baseY - font * 0.15) spots.push([x, y]); break; } }
+  };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let drips = [], raf, last = performance.now();
+  const newDrip = () => { const [x, y] = spots[Math.floor(Math.random() * spots.length)] || [W / 2, baseY]; return { x, y0: y, len: 0, r: 2 + Math.random() * font * 0.025, grow: (8 + Math.random() * 18) / PARAMS.viscosity, falling: false, fy: 0, fv: 0 }; };
+  for (let i = 0; i < PARAMS.drips; i++) { const d = newDrip(); d.len = Math.random() * font * 0.3; drips.push(d); }
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now;
+    ctx.clearRect(0, 0, W, H);
+    ctx.fillStyle = '#d62839';
+    ctx.font = `900 ${font}px "Mona Sans", system-ui, sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'alphabetic'; ctx.fillText('DRIP', W / 2, baseY);
+    for (const d of drips) {
+      if (!d.falling) {
+        d.len += d.grow * dt * (1 + d.len / (font * 0.2));            // drips accelerate as they get heavier
+        d.r = Math.min(font * 0.06, d.r + dt * 2);
+        if (d.len > font * (0.35 + Math.random() * 0.002)) { d.falling = true; d.fy = d.y0 + d.len; d.fv = 40; }
+        // neck: a column of shrinking circles down to the bulb
+        const steps = Math.max(2, d.len / 3);
+        for (let i = 0; i <= steps; i++) { const k = i / steps, r = d.r * (0.35 + 0.25 * Math.sin(k * Math.PI)) * (k > 0.85 ? 1.7 : 1); ctx.beginPath(); ctx.arc(d.x, d.y0 + d.len * k, r, 0, 7); ctx.fill(); }
+      } else {
+        d.fv += 1400 * dt; d.fy += d.fv * dt;
+        ctx.beginPath(); ctx.ellipse(d.x, d.fy, d.r * 1.5, d.r * 1.9, 0, 0, 7); ctx.fill();
+      }
+    }
+    // a puddle collects at the bottom
+    ctx.fillRect(0, H - H * 0.05, W, H * 0.05);
+    drips = drips.map(d => (d.falling && d.fy > H) ? newDrip() : d);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); wrap.remove(); };
+}

package/anims/fluid/ferrofluid.js

@@ -0,0 +1,56 @@
+// Ferrofluid: a glossy black blob whose surface rises into spikes, strongest on the side facing the magnet.
+// The outline is a distance field (circle + sharpened cosine spikes); its gradient gives a normal for the gloss.
+const PARAMS = { spikes: 22, strength: 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) { 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, M; uniform float T, N, S;
+  float blob(vec2 q) {
+    float a = atan(q.y, q.x), r = length(q);
+    vec2 toM = M - vec2(0); float face = max(0., dot(normalize(q + 1e-4), normalize(toM + 1e-4)));   // spikes grow toward the magnet
+    float pull = S * (.35 + .65 * pow(face, 2.)) * clamp(1.2 - length(toM) * .6, .3, 1.);
+    float spikes = pow(max(0., cos(a * N + sin(T * .7) * .4)), 6.) * .16 * pull + pow(max(0., cos(a * N * 2. + 1.)), 10.) * .05 * pull;
+    float base = .3 + .03 * sin(a * 3. + T) + pull * .04;
+    return r - (base + spikes);
+  }
+  void main() {
+    vec2 a = vec2(R.x / R.y, 1.), q = (uv - .5) * a * 1.1;
+    float d = blob(q), e = 1.5 / R.y;
+    vec2 g = vec2(blob(q + vec2(e, 0)) - blob(q - vec2(e, 0)), blob(q + vec2(0, e)) - blob(q - vec2(0, e)));
+    float h = clamp(-d * 8., 0., 1.);                               // height: rises away from the edge
+    vec3 n = normalize(vec3(-g / (2. * e) * (1. - h) * .9, .45 + h));
+    vec3 l = normalize(vec3(-.4, .6, .7)), v = vec3(0, 0, 1);
+    float spec = pow(max(0., dot(reflect(-l, n), v)), 60.), rim = pow(1. - n.z, 2.);
+    vec3 bg = mix(vec3(.93, .92, .9), vec3(.82, .8, .78), length(uv - .5));
+    vec3 ink = vec3(.02, .02, .03) + spec * vec3(1.) + rim * vec3(.12, .14, .2) + max(0., n.x) * .05;
+    float cover = smoothstep(e * 1.5, -e * 1.5, d);
+    float shadow = smoothstep(.12, -.05, blob(q - vec2(.02, -.04))) * .25;
+    o = vec4(mix(bg * (1. - shadow), ink, cover), 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 = n => gl.getUniformLocation(prog, n), uR = u('R'), uM = u('M'), uT = u('T'), uN = u('N'), uS = u('S');
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); canvas.width = stage.clientWidth * d | 0; canvas.height = stage.clientHeight * d | 0; gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let mx = 0.4, my = 0.2, tx = mx, ty = my, lastMove = -1e9, raf;
+  const onMove = e => { const b = canvas.getBoundingClientRect(), a = b.width / b.height; tx = ((e.clientX - b.left) / b.width - 0.5) * a * 1.1; ty = (0.5 - (e.clientY - b.top) / b.height) * 1.1; lastMove = performance.now(); };
+  canvas.addEventListener('pointermove', onMove);
+  function frame(now) {
+    const t = now / 1000;
+    if (now - lastMove > 1500) { tx = Math.cos(t * 0.6) * 0.5; ty = Math.sin(t * 0.9) * 0.35; }
+    mx += (tx - mx) * 0.08; my += (ty - my) * 0.08;
+    gl.uniform2f(uR, canvas.width, canvas.height); gl.uniform2f(uM, mx, my); gl.uniform1f(uT, t); gl.uniform1f(uN, Math.round(PARAMS.spikes)); gl.uniform1f(uS, PARAMS.strength);
+    gl.drawArrays(gl.TRIANGLES, 0, 3); raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/fluid/fire-smoke.js

@@ -0,0 +1,83 @@
+// Fire & smoke: a GPU fluid solver with buoyancy. Heat rises (it pushes the velocity field up), cools as it
+// travels and leaves smoke behind. Colour comes from temperature through a blackbody ramp: white, yellow, red, smoke.
+const PARAMS = { heat: 1, cooling: 0.95, curl: 22 };
+
+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', { alpha: false, antialias: false });
+  if (!gl || !gl.getExtension('EXT_color_buffer_float')) { stage.textContent = 'This needs WebGL2 with float render targets.'; return () => canvas.remove(); }
+  const VS = `#version 300 es
+  in vec2 p; out vec2 uv, vL, vR, vT, vB; uniform vec2 texel;
+  void main() { uv = p * .5 + .5; vL = uv - vec2(texel.x, 0); vR = uv + vec2(texel.x, 0); vT = uv + vec2(0, texel.y); vB = uv - vec2(0, texel.y); gl_Position = vec4(p, 0, 1); }`;
+  const head = `#version 300 es
+  precision highp float; precision highp sampler2D; in vec2 uv, vL, vR, vT, vB; out vec4 o;`;
+  const FS = {
+    // the burner: heat (x), smoke (y) and an upward kick near the bottom, flickering
+    source: `uniform sampler2D tgt; uniform float T, amt; uniform vec2 aspect; uniform int mode;
+      float n(vec2 p) { return fract(sin(dot(p, vec2(12.9, 78.2))) * 43758.5); }
+      void main() { vec4 v = texture(tgt, uv); vec2 d = (uv - vec2(.5 + .04 * sin(T * 3.1), .07)) * aspect; float r = exp(-dot(d * vec2(1.7, 4.5), d * vec2(1.7, 4.5)) * 90.);
+        float flick = .7 + .3 * n(floor(uv * 40.) + floor(T * 20.));
+        if (mode == 0) o = v + vec4(0, r * 2.2 * amt, 0, 0); else o = v + vec4(r * flick * amt * .9, r * amt * .25, 0, 0); }`,
+    advect: `uniform sampler2D vel, src; uniform vec2 simTexel; uniform float dt; uniform vec4 keep;
+      void main() { vec2 c = uv - dt * texture(vel, uv).xy * simTexel; o = keep * texture(src, c); }`,
+    buoy: `uniform sampler2D vel, dye; uniform float dt;
+      void main() { vec4 v = texture(vel, uv); vec2 d = texture(dye, uv).xy; o = vec4(v.xy + vec2(0, d.x * 260. - d.y * 18.) * dt, 0, 1); }`,
+    divergence: `uniform sampler2D vel;
+      void main() { float L = texture(vel, vL).x, R = texture(vel, vR).x, T = texture(vel, vT).y, B = texture(vel, vB).y; vec2 C = texture(vel, uv).xy;
+        if (vL.x < 0.) L = -C.x; if (vR.x > 1.) R = -C.x; if (vT.y > 1.) T = -C.y; if (vB.y < 0.) B = -C.y; o = vec4(.5 * (R - L + T - B), 0, 0, 1); }`,
+    curl: `uniform sampler2D vel; void main() { o = vec4(.5 * (texture(vel, vR).y - texture(vel, vL).y - texture(vel, vT).x + texture(vel, vB).x), 0, 0, 1); }`,
+    vorticity: `uniform sampler2D vel, crl; uniform float strength, dt;
+      void main() { float L = texture(crl, vL).x, R = texture(crl, vR).x, T = texture(crl, vT).x, B = texture(crl, vB).x, C = texture(crl, uv).x;
+        vec2 f = .5 * vec2(abs(T) - abs(B), abs(R) - abs(L)); f /= length(f) + 1e-4; f *= strength * C; f.y *= -1.; o = vec4(texture(vel, uv).xy + f * dt, 0, 1); }`,
+    pressure: `uniform sampler2D prs, div; void main() { o = vec4((texture(prs, vL).x + texture(prs, vR).x + texture(prs, vB).x + texture(prs, vT).x - texture(div, uv).x) * .25, 0, 0, 1); }`,
+    gradient: `uniform sampler2D prs, vel; void main() { o = vec4(texture(vel, uv).xy - .5 * vec2(texture(prs, vR).x - texture(prs, vL).x, texture(prs, vT).x - texture(prs, vB).x), 0, 1); }`,
+    scale: `uniform sampler2D src; uniform float k; void main() { o = k * texture(src, uv); }`,
+    display: `uniform sampler2D dye;
+      vec3 black(float t) { return clamp(vec3(t * 3.2, t * t * 2.4, pow(t, 4.) * 3.), 0., 1.); }
+      void main() { vec2 d = texture(dye, uv).xy; vec3 bg = mix(vec3(.04, .035, .05), vec3(.08, .06, .07), uv.y);
+        vec3 smoke = vec3(.32, .3, .31) * (1. - exp(-d.y * 1.4));
+        vec3 c = bg * exp(-d.y * 1.2) + smoke + black(clamp(d.x * .75, 0., 1.)) * 1.3;
+        o = vec4(c / (1. + c * .25), 1); }`,
+  };
+  const compile = (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 vs = compile(gl.VERTEX_SHADER, VS), progs = {};
+  for (const k in FS) {
+    const p = gl.createProgram(); gl.attachShader(p, vs); gl.attachShader(p, compile(gl.FRAGMENT_SHADER, head + FS[k])); gl.bindAttribLocation(p, 0, 'p'); gl.linkProgram(p);
+    const u = {}; const n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS); for (let i = 0; i < n; i++) { const name = gl.getActiveUniform(p, i).name; u[name] = gl.getUniformLocation(p, name); }
+    progs[k] = { p, u };
+  }
+  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 fbo = (w, h) => { const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); 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); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, w, h, 0, gl.RGBA, gl.HALF_FLOAT, null);
+    const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); return { tex, fb, w, h }; };
+  const pair = (w, h) => { let a = fbo(w, h), b = fbo(w, h); return { get read() { return a; }, get write() { return b; }, swap() { [a, b] = [b, a]; } }; };
+  let W = 0, H = 0, vel, dye, div, crl, prs;
+  const resize = () => { const d = Math.min(devicePixelRatio, 1.5); W = Math.max(2, stage.clientWidth * d | 0); H = Math.max(2, stage.clientHeight * d | 0); canvas.width = W; canvas.height = H;
+    const ar = W / H, sw = Math.round(128 * Math.max(1, ar)), sh = Math.round(128 * Math.max(1, 1 / ar)); vel = pair(sw, sh); prs = pair(sw, sh); div = fbo(sw, sh); crl = fbo(sw, sh); dye = pair(sw * 3, sh * 3); };
+  resize(); const ro = new ResizeObserver(resize); ro.observe(stage);
+  const bind = (u, t) => { gl.activeTexture(gl.TEXTURE0 + u); gl.bindTexture(gl.TEXTURE_2D, t.tex); return u; };
+  const run = (prog, target, set) => { gl.useProgram(prog.p); const w = target ? target.w : W, h = target ? target.h : H; gl.uniform2f(prog.u.texel, 1 / w, 1 / h); set(prog.u); gl.viewport(0, 0, w, h); gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.fb : null); gl.drawArrays(gl.TRIANGLES, 0, 3); };
+  let last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.016, (now - last) / 1000); last = now; const t = now / 1000, st = [1 / vel.read.w, 1 / vel.read.h], asp = [W / H, 1];
+    run(progs.source, vel.write, u => { gl.uniform1i(u.tgt, bind(0, vel.read)); gl.uniform1f(u.T, t); gl.uniform1f(u.amt, 60 * PARAMS.heat * dt * 60); gl.uniform2f(u.aspect, ...asp); gl.uniform1i(u.mode, 0); }); vel.swap();
+    run(progs.source, dye.write, u => { gl.uniform1i(u.tgt, bind(0, dye.read)); gl.uniform1f(u.T, t); gl.uniform1f(u.amt, PARAMS.heat * dt * 60 * 0.4); gl.uniform2f(u.aspect, ...asp); gl.uniform1i(u.mode, 1); }); dye.swap();
+    run(progs.buoy, vel.write, u => { gl.uniform1i(u.vel, bind(0, vel.read)); gl.uniform1i(u.dye, bind(1, dye.read)); gl.uniform1f(u.dt, dt); }); vel.swap();
+    run(progs.curl, crl, u => gl.uniform1i(u.vel, bind(0, vel.read)));
+    run(progs.vorticity, vel.write, u => { gl.uniform1i(u.vel, bind(0, vel.read)); gl.uniform1i(u.crl, bind(1, crl)); gl.uniform1f(u.strength, PARAMS.curl); gl.uniform1f(u.dt, dt); }); vel.swap();
+    run(progs.divergence, div, u => gl.uniform1i(u.vel, bind(0, vel.read)));
+    run(progs.scale, prs.write, u => { gl.uniform1i(u.src, bind(0, prs.read)); gl.uniform1f(u.k, 0.8); }); prs.swap();
+    for (let i = 0; i < 20; i++) { run(progs.pressure, prs.write, u => { gl.uniform1i(u.prs, bind(0, prs.read)); gl.uniform1i(u.div, bind(1, div)); }); prs.swap(); }
+    run(progs.gradient, vel.write, u => { gl.uniform1i(u.prs, bind(0, prs.read)); gl.uniform1i(u.vel, bind(1, vel.read)); }); vel.swap();
+    run(progs.advect, vel.write, u => { gl.uniform1i(u.vel, bind(0, vel.read)); gl.uniform1i(u.src, bind(0, vel.read)); gl.uniform2f(u.simTexel, ...st); gl.uniform1f(u.dt, dt); gl.uniform4f(u.keep, 0.995, 0.995, 1, 1); }); vel.swap();
+    const cool = Math.pow(PARAMS.cooling, dt * 60);
+    run(progs.advect, dye.write, u => { gl.uniform1i(u.vel, bind(0, vel.read)); gl.uniform1i(u.src, bind(1, dye.read)); gl.uniform2f(u.simTexel, ...st); gl.uniform1f(u.dt, dt); gl.uniform4f(u.keep, cool, Math.pow(0.992, dt * 60), 1, 1); }); dye.swap();
+    run(progs.display, null, u => gl.uniform1i(u.dye, bind(0, dye.read)));
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/fluid/honey-drip.js

@@ -0,0 +1,167 @@
+// Honey drip: a strand hangs from a twirling dipper. Honey flows down into a bulb at its end, the bulb's weight
+// stretches the strand (viscous creep that speeds up as it gets longer and heavier), the neck thins until it
+// snaps, the strand springs back, and the drop plops into a slow, thick pool. The strand is a Verlet chain.
+const PARAMS = { viscosity: 1, flow: 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, u = 1;
+  const COLS = 96, ph = new Float32Array(COLS), pv = new Float32Array(COLS), mound = new Float32Array(COLS);
+  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); u = H / 215; };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const N = 18;
+  const pts = Array.from({ length: N }, () => ({ x: 0, y: 0, px: 0, py: 0 }));
+  let L = 18, Lv = 0, M = 0.3, state = 'grow', stateT = 0, snapAt = 0.8;
+  const drops = [];
+  const tipOf = (t) => {                     // the dipper sways from a pivot above the frame; its tip carries the strand
+    const a = Math.sin(t * 0.9) * 0.06 + Math.sin(t * 2.3) * 0.012, px = W * 0.5, py = -70 * u, r = 70 * u + 72 * u;
+    return { a, x: px - Math.sin(a) * r, y: py + Math.cos(a) * r };
+  };
+  { const tp = tipOf(0); pts.forEach((p, i) => { p.x = p.px = tp.x; p.y = p.py = tp.y + i * L * u / (N - 1); }); }
+  const poolY = x => { const i = Math.max(0, Math.min(COLS - 1, Math.round(x / W * (COLS - 1)))); return H - 34 * u - ph[i] - mound[i]; };
+
+  function physics(dt, t) {
+    const tp = tipOf(t), visc = PARAMS.viscosity;
+    stateT += dt;
+    if (state === 'grow') {
+      M = Math.min(1.5, M + dt * 0.36 * PARAMS.flow / Math.sqrt(visc));      // honey runs down into the bulb
+      Lv = Math.min(420, M * M * L / visc);                                     // the heavier and longer, the faster it creeps
+      L += Lv * dt;
+      const neck = Math.max(0.3, 5.5 * Math.pow(18 / L, 1.2));
+      if (neck < 0.6 || L * u > (H - 34 * u - tp.y) * snapAt) snap();
+    } else if (state === 'recoil') {
+      Lv += (-(L - 16) * 140 - Lv * 7) * dt; L += Lv * dt;                      // elastic snap-back, a little overshoot
+      if (stateT > 0.7) { state = 'grow'; stateT = 0; M = 0.22; }
+    }
+    // Verlet chain: pinned at the dipper, segment rest length = current strand length / segments
+    const rest = L * u / (N - 1), g = 700 * u;
+    for (let i = 1; i < N; i++) {
+      const p = pts[i], vx = (p.x - p.px) * 0.985, vy = (p.y - p.py) * 0.985;
+      p.px = p.x; p.py = p.y; p.x += vx; p.y += vy + g * dt * dt;
+    }
+    pts[0].x = pts[0].px = tp.x; pts[0].y = pts[0].py = tp.y;
+    const heavy = state === 'grow' ? 0.12 : 1;
+    for (let k = 0; k < 14; k++) for (let i = 0; i < N - 1; i++) {
+      const a = pts[i], b = pts[i + 1], dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy) || 1e-6;
+      const wa = i === 0 ? 0 : 1, wb = i + 1 === N - 1 ? heavy : 1, diff = (d - rest) / d / (wa + wb);
+      a.x += dx * diff * wa; a.y += dy * diff * wa; b.x -= dx * diff * wb; b.y -= dy * diff * wb;
+    }
+    // falling drops and the beaded tail
+    for (let i = drops.length - 1; i >= 0; i--) {
+      const d = drops[i]; d.vy += g * 1.25 * dt; d.x += d.vx * dt; d.y += d.vy * dt; d.age += dt;
+      if (d.y + d.r * 0.6 > poolY(d.x)) { splash(d.x, d.r, d.vy); drops.splice(i, 1); }
+    }
+    // the pool: a damped row of springs for ripples, plus a mound that spreads like thick honey
+    for (let s = 0; s < 3; s++) {
+      for (let i = 0; i < COLS; i++) { const l = ph[Math.max(0, i - 1)] + ph[Math.min(COLS - 1, i + 1)] - 2 * ph[i]; pv[i] += (l * 380 - ph[i] * 6 - pv[i] * 4.5 / visc) * dt / 3; }
+      for (let i = 0; i < COLS; i++) ph[i] += pv[i] * dt / 3;
+      let mean = 0; const m2 = Float32Array.from(mound);
+      for (let i = 0; i < COLS; i++) { mound[i] += (m2[Math.max(0, i - 1)] + m2[Math.min(COLS - 1, i + 1)] - 2 * m2[i]) * 0.03 / Math.sqrt(visc); mean += mound[i]; }
+      mean /= COLS; for (let i = 0; i < COLS; i++) mound[i] -= mean;
+    }
+  }
+  function snap() {
+    const b = pts[N - 1], prev = pts[N - 2], rb = bulbR();
+    const vy = Math.max(Lv * u, (b.y - b.py) * 60);
+    drops.push({ x: b.x, y: b.y, vx: (b.x - b.px) * 60, vy, r: rb, age: 0, main: true });
+    for (let k = 1; k <= 5; k++) {                         // the neck breaks into a string of tiny beads
+      const f = k / 6; drops.push({ x: prev.x + (b.x - prev.x) * f * 0.5, y: b.y - rb - k * 4.5 * u, vx: 0, vy: vy * (0.75 - k * 0.07), r: (0.5 + Math.random() * 0.8) * u, age: 0 });
+    }
+    state = 'recoil'; stateT = 0; Lv = -Lv * 0.2; L = Math.max(18, L * 0.32); snapAt = 0.7 + Math.random() * 0.18;
+  }
+  function splash(x, r, vy) {
+    const i = Math.round(x / W * (COLS - 1)), big = r / u;
+    for (let k = -3; k <= 3; k++) { const j = i + k; if (j >= 0 && j < COLS) { pv[j] -= vy * 0.02 * big * Math.exp(-k * k / 4) / 6; mound[j] += big * 0.7 * Math.exp(-k * k / 2.5) * u; } }
+  }
+  const bulbR = () => (3 + 9 * Math.cbrt(M)) * u;
+
+  // ── drawing
+  function dipper(t) {
+    const tp = tipOf(t);
+    ctx.save(); ctx.translate(W * 0.5, -70 * u); ctx.rotate(tp.a);
+    // handle
+    const hg = ctx.createLinearGradient(-5 * u, 0, 5 * u, 0); hg.addColorStop(0, '#7a4a22'); hg.addColorStop(0.4, '#c48a52'); hg.addColorStop(1, '#6a3d1a');
+    ctx.fillStyle = hg; ctx.fillRect(-4.5 * u, 0, 9 * u, 90 * u);
+    // grooved head: a barrel with ring grooves
+    const y0 = 80 * u, y1 = 138 * u, R = 31 * u, steps = 60, prof = [];
+    for (let s = 0; s <= steps; s++) {
+      const f = s / steps, env = Math.pow(Math.sin(Math.PI * (0.08 + 0.84 * f)), 0.45), gr = Math.pow(0.5 + 0.5 * Math.cos(f * Math.PI * 2 * 6), 6);
+      prof.push([R * env * (1 - 0.16 * gr), y0 + (y1 - y0) * f]);
+    }
+    ctx.beginPath(); prof.forEach(([r, y], i) => i ? ctx.lineTo(r, y) : ctx.moveTo(r, y)); for (let i = prof.length - 1; i >= 0; i--) ctx.lineTo(-prof[i][0], prof[i][1]); ctx.closePath();
+    const wg = ctx.createLinearGradient(-R, 0, R, 0); wg.addColorStop(0, '#5e3415'); wg.addColorStop(0.32, '#d29a5e'); wg.addColorStop(0.55, '#b07640'); wg.addColorStop(1, '#4a280f');
+    ctx.fillStyle = wg; ctx.fill();
+    ctx.strokeStyle = 'rgba(60,30,10,.45)'; ctx.lineWidth = 1.2 * u;
+    for (let k = 1; k < 6; k++) { const f = k / 6, y = y0 + (y1 - y0) * f, r = R * Math.pow(Math.sin(Math.PI * (0.08 + 0.84 * f)), 0.45) * 0.86; ctx.beginPath(); ctx.ellipse(0, y, r, 2.6 * u, 0, 0.1, Math.PI - 0.1); ctx.stroke(); }
+    // honey coating the lower half and gathering at the tip, with sagging drips in the grooves
+    ctx.beginPath();
+    const start = Math.floor(steps * 0.56);
+    for (let s = start; s <= steps; s++) { const [r, y] = prof[s]; const sag = Math.sin(s * 0.9 + t * 0.6) * 1.2 * u; ctx.lineTo(r + 2 * u, y + sag); }
+    ctx.quadraticCurveTo(10 * u, y1 + 6 * u, 3.5 * u, y1 + 8 * u); ctx.lineTo(-3.5 * u, y1 + 8 * u); ctx.quadraticCurveTo(-10 * u, y1 + 6 * u, -prof[steps][0] - 2 * u, prof[steps][1]);
+    for (let s = steps; s >= start; s--) { const [r, y] = prof[s]; const sag = Math.sin(s * 1.1 - t * 0.5) * 1.2 * u; ctx.lineTo(-r - 2 * u, y + sag); }
+    ctx.quadraticCurveTo(0, prof[start][1] - 6 * u, prof[start][0] + 2 * u, prof[start][1]);
+    const cg = ctx.createLinearGradient(-R, 0, R, 0); cg.addColorStop(0, 'rgba(150,72,6,.85)'); cg.addColorStop(0.35, 'rgba(250,180,50,.66)'); cg.addColorStop(0.7, 'rgba(214,128,18,.74)'); cg.addColorStop(1, 'rgba(120,56,4,.88)');
+    ctx.fillStyle = cg; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,240,200,.75)'; ctx.lineWidth = 1.4 * u; ctx.beginPath();
+    for (let s = start + 3; s < steps - 4; s++) { const [r, y] = prof[s]; ctx.lineTo(-r * 0.55, y); } ctx.stroke();
+    ctx.restore();
+  }
+  function strand() {
+    const neck = Math.max(0.3, 5.5 * Math.pow(18 / L, 1.2)) * u, tipW = 8 * u, n = pts.length;
+    const left = [], right = [];
+    for (let i = 0; i < n; i++) {
+      const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)], dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy) || 1;
+      const s = i / (n - 1), w = (neck + (tipW - neck) * Math.pow(1 - s, 2.4)) / 2;
+      left.push([pts[i].x - dy / d * w, pts[i].y + dx / d * w, w]); right.push([pts[i].x + dy / d * w, pts[i].y - dx / d * w]);
+    }
+    ctx.beginPath(); left.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y)); for (let i = n - 1; i >= 0; i--) ctx.lineTo(right[i][0], right[i][1]); ctx.closePath();
+    ctx.fillStyle = 'rgba(206,124,14,.93)'; ctx.fill();
+    // a brighter core (light passing through the thick part) and a hairline highlight
+    ctx.strokeStyle = 'rgba(255,205,90,.7)'; ctx.lineCap = 'round';
+    for (let i = 0; i < n - 1; i++) { ctx.lineWidth = Math.max(0.3, left[i][2] * 0.7); ctx.beginPath(); ctx.moveTo(pts[i].x - left[i][2] * 0.15, pts[i].y); ctx.lineTo(pts[i + 1].x - left[i + 1][2] * 0.15, pts[i + 1].y); ctx.stroke(); }
+    ctx.strokeStyle = 'rgba(255,250,235,.85)'; ctx.lineWidth = Math.max(0.5, 0.9 * u); ctx.beginPath();
+    for (let i = 0; i < n * 0.8; i++) { const x = pts[i].x - left[i][2] * 0.55, y = pts[i].y; i ? ctx.lineTo(x, y) : ctx.moveTo(x, y); } ctx.stroke();
+  }
+  function drop(x, y, r, stretch) {
+    const ry = r * (1 + stretch), rx = r / Math.sqrt(1 + stretch);
+    const g = ctx.createRadialGradient(x - rx * 0.1, y + ry * 0.35, r * 0.1, x, y, Math.max(rx, ry));
+    g.addColorStop(0, '#ffe08a'); g.addColorStop(0.45, '#eaa022'); g.addColorStop(0.85, '#b25f08'); g.addColorStop(1, '#7c3a03');
+    ctx.fillStyle = g; ctx.beginPath(); ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = 'rgba(255,255,255,.85)'; ctx.beginPath(); ctx.ellipse(x - rx * 0.38, y - ry * 0.42, rx * 0.22, ry * 0.13, -0.5, 0, Math.PI * 2); ctx.fill();
+  }
+  function pool() {
+    const top = H - 34 * u;
+    ctx.beginPath(); ctx.moveTo(0, H);
+    for (let i = 0; i < COLS; i++) ctx.lineTo(i / (COLS - 1) * W, top - ph[i] - mound[i]);
+    ctx.lineTo(W, H); ctx.closePath();
+    const g = ctx.createLinearGradient(0, top - 6 * u, 0, H); g.addColorStop(0, '#f2ae35'); g.addColorStop(0.18, '#d98516'); g.addColorStop(1, '#6e3104');
+    ctx.fillStyle = g; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,236,180,.9)'; ctx.lineWidth = 1.3 * u; ctx.beginPath();
+    for (let i = 0; i < COLS; i++) ctx.lineTo(i / (COLS - 1) * W, top - ph[i] - mound[i] + 1.2 * u); ctx.stroke();
+    ctx.strokeStyle = 'rgba(255,255,255,.25)'; ctx.lineWidth = 3 * u; ctx.beginPath();
+    for (let i = 0; i < COLS; i++) ctx.lineTo(i / (COLS - 1) * W, top - ph[i] - mound[i] + 5 * u); ctx.stroke();
+  }
+
+  let raf, last = performance.now();
+  const t0 = last;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now; const t = (now - t0) / 1000;
+    physics(dt / 2, t); physics(dt / 2, t);
+    const bg = ctx.createRadialGradient(W * 0.3, H * 0.15, 0, W * 0.5, H * 0.5, Math.max(W, H) * 0.8);
+    bg.addColorStop(0, '#fbf5ea'); bg.addColorStop(1, '#e6d6bc'); ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+    strand();
+    dipper(t);
+    const b = pts[N - 1];
+    if (state === 'grow') drop(b.x, b.y, bulbR(), Math.min(0.6, Lv / 220));
+    else drop(b.x, b.y, (1.5 + 3 * Math.max(0, 1 - stateT * 2)) * u, 0);
+    for (const d of drops) drop(d.x, d.y, d.r, d.main ? Math.min(0.5, d.vy / (900 * u)) : 0);
+    pool();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/fluid/ink-drop.js

@@ -0,0 +1,50 @@
+// Ink drop in water: a falling drop rolls up into a vortex ring. Thousands of ink particles circle the ring's
+// core while the ring sinks, widens and slows; it then breaks into curling plumes that hang in the water.
+const PARAMS = { particles: 2600, interval: 3.2 };
+
+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 = '#f3f1ec'; ctx.fillRect(0, 0, W, H); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  const inks = ['20, 40, 120', '170, 20, 60', '10, 90, 80', '30, 30, 40'];
+  let drops = [], k = 0, next = 0, raf;
+  function spawn(now) {
+    const S = Math.min(W, H), n = Math.round(PARAMS.particles), x = W * (0.3 + Math.random() * 0.4);
+    const parts = Array.from({ length: n }, () => ({ a: Math.random() * Math.PI * 2, b: Math.random() * Math.PI * 2, rr: Math.sqrt(Math.random()) * 0.35, drift: (Math.random() - 0.5) * 0.6, wisp: Math.random() }));
+    drops.push({ x, y: H * 0.08, t0: now, S, parts, col: inks[k++ % inks.length] });
+  }
+  function frame(now) {
+    if (now > next) { spawn(now); next = now + PARAMS.interval * 1000; }
+    ctx.fillStyle = 'rgba(243, 241, 236, 0.08)'; ctx.fillRect(0, 0, W, H);                  // the water slowly clears
+    for (const d of drops) {
+      const age = (now - d.t0) / 1000;
+      // ring: sinks fast then slows, widens as it goes
+      const depth = H * 0.08 + H * 0.62 * (1 - Math.exp(-age * 0.9));
+      const R = d.S * (0.02 + 0.13 * (1 - Math.exp(-age * 0.7)));
+      const core = R * 0.45, spin = age * 4.5;
+      for (const p of d.parts) {
+        // particle on a torus: angle a around the ring, angle b around the core
+        const breakup = Math.max(0, age - 1.6) * p.wisp;                                     // late: plumes curl away
+        const a = p.a + Math.sin(p.a * 6 + age) * 0.05 * breakup;
+        const b = p.b + spin * (1 - p.rr);
+        const rc = core * (p.rr + 0.15) * (1 + breakup * 0.5);
+        const ringX = Math.cos(a) * (R + Math.cos(b) * rc), ringZ = Math.sin(a) * (R + Math.cos(b) * rc);
+        const y = depth + Math.sin(b) * rc + breakup * breakup * p.drift * d.S * 0.12 + breakup * d.S * 0.03 * Math.sin(a * 3);
+        const x = d.x + ringX + ringZ * 0.15 + breakup * p.drift * d.S * 0.08;
+        const alpha = Math.max(0, 0.16 - age * 0.012) * (0.5 + 0.5 * (ringZ / R + 1) / 2);
+        if (alpha <= 0.002) continue;
+        ctx.fillStyle = `rgba(${d.col}, ${alpha})`; ctx.fillRect(x, y, 1.8, 1.8);
+      }
+      // the short tail that connects ring to surface early on
+      if (age < 1.2) { ctx.strokeStyle = `rgba(${d.col}, ${0.25 * (1 - age / 1.2)})`; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(d.x, H * 0.08); ctx.lineTo(d.x, depth); ctx.stroke(); }
+    }
+    drops = drops.filter(d => now - d.t0 < 14000);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}