motion-library 0.0.0-stage → 0.1.0

package/anims/fluid/ink-fluid.js

@@ -0,0 +1,125 @@
+// Ink fluid: a Navier–Stokes "stable fluids" solver on the GPU. Each frame: curl, vorticity, divergence,
+// a pressure solve to keep it incompressible, then advect velocity and dye. Rendered as ink soaking into paper.
+const PARAMS = { curl: 30, dissipation: 0.97, splatRadius: 0.25 };
+
+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 gl = canvas.getContext('webgl2', { alpha: false, antialias: false, depth: 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 = {
+    splat: `uniform sampler2D tgt; uniform float aspect, radius; uniform vec3 color; uniform vec2 point;
+      void main() { vec2 d = uv - point; d.x *= aspect; o = vec4(texture(tgt, uv).xyz + exp(-dot(d, d) / radius) * color, 1); }`,
+    advect: `uniform sampler2D vel, src; uniform vec2 simTexel; uniform float dt, keep;
+      void main() { vec2 c = uv - dt * texture(vel, uv).xy * simTexel; o = keep * texture(src, c); }`,
+    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() { vec2 v = texture(vel, uv).xy - .5 * vec2(texture(prs, vR).x - texture(prs, vL).x, texture(prs, vT).x - texture(prs, vB).x); o = vec4(v, 0, 1); }`,
+    scale: `uniform sampler2D src; uniform float k; void main() { o = k * texture(src, uv); }`,
+    display: `uniform sampler2D dye;
+      void main() { vec3 d = texture(dye, uv).rgb; vec3 paper = vec3(.965, .972, .985);
+        o = vec4(paper * exp(-d * 1.6), 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);
+  const 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 sim = 128, dyeRes = 512, ar = W / H;
+    const sw = ar > 1 ? Math.round(sim * ar) : sim, sh = ar > 1 ? sim : Math.round(sim / ar);
+    const dw = ar > 1 ? Math.round(dyeRes * ar) : dyeRes, dh = ar > 1 ? dyeRes : Math.round(dyeRes / ar);
+    vel = pair(sw, sh); prs = pair(sw, sh); div = fbo(sw, sh); crl = fbo(sw, sh); dye = pair(dw, dh);
+  };
+  resize();
+  const ro = new ResizeObserver(resize); ro.observe(stage);
+
+  const bindTex = (unit, t) => { gl.activeTexture(gl.TEXTURE0 + unit); gl.bindTexture(gl.TEXTURE_2D, t.tex); return unit; };
+  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);
+  };
+  const splat = (x, y, dx, dy, color) => {
+    const r = PARAMS.splatRadius / 100 * (W > H ? W / H : 1);
+    run(progs.splat, vel.write, u => { gl.uniform1i(u.tgt, bindTex(0, vel.read)); gl.uniform1f(u.aspect, W / H); gl.uniform2f(u.point, x, y); gl.uniform3f(u.color, dx, dy, 0); gl.uniform1f(u.radius, r); }); vel.swap();
+    run(progs.splat, dye.write, u => { gl.uniform1i(u.tgt, bindTex(0, dye.read)); gl.uniform1f(u.aspect, W / H); gl.uniform2f(u.point, x, y); gl.uniform3f(u.color, ...color); gl.uniform1f(u.radius, r); }); dye.swap();
+  };
+  // ink colours as absorption: what each ink removes from white paper
+  const inks = [[0.9, 0.45, 0.05], [0.05, 0.55, 0.9], [0.1, 0.85, 0.65], [0.85, 0.15, 0.6]];
+  const randomSplat = () => { const a = Math.random() * Math.PI * 2, f = 900 + Math.random() * 900; splat(0.2 + Math.random() * 0.6, 0.2 + Math.random() * 0.6, Math.cos(a) * f, Math.sin(a) * f, inks[Math.floor(Math.random() * inks.length)].map(c => c * 0.9)); };
+
+  let lastPtr = null, ptrInk = inks[1];
+  const onMove = e => {
+    const b = canvas.getBoundingClientRect(), x = (e.clientX - b.left) / b.width, y = 1 - (e.clientY - b.top) / b.height;
+    if (lastPtr) splat(x, y, (x - lastPtr[0]) * 6000, (y - lastPtr[1]) * 6000, ptrInk.map(c => c * 0.35));
+    lastPtr = [x, y];
+  };
+  const onLeave = () => { lastPtr = null; ptrInk = inks[Math.floor(Math.random() * inks.length)]; };
+  canvas.addEventListener('pointermove', onMove); canvas.addEventListener('pointerleave', onLeave);
+
+  let last = performance.now(), acc = 0, raf;
+  for (let i = 0; i < 4; i++) randomSplat();
+  function frame(now) {
+    const dt = Math.min(0.016, (now - last) / 1000); last = now;
+    acc += dt; if (acc > 0.45) { acc = 0; randomSplat(); }
+    const simTexel = [1 / vel.read.w, 1 / vel.read.h];
+    run(progs.curl, crl, u => gl.uniform1i(u.vel, bindTex(0, vel.read)));
+    run(progs.vorticity, vel.write, u => { gl.uniform1i(u.vel, bindTex(0, vel.read)); gl.uniform1i(u.crl, bindTex(1, crl)); gl.uniform1f(u.strength, PARAMS.curl); gl.uniform1f(u.dt, dt); }); vel.swap();
+    run(progs.divergence, div, u => gl.uniform1i(u.vel, bindTex(0, vel.read)));
+    run(progs.scale, prs.write, u => { gl.uniform1i(u.src, bindTex(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, bindTex(0, prs.read)); gl.uniform1i(u.div, bindTex(1, div)); }); prs.swap(); }
+    run(progs.gradient, vel.write, u => { gl.uniform1i(u.prs, bindTex(0, prs.read)); gl.uniform1i(u.vel, bindTex(1, vel.read)); }); vel.swap();
+    run(progs.advect, vel.write, u => { gl.uniform1i(u.vel, bindTex(0, vel.read)); gl.uniform1i(u.src, bindTex(0, vel.read)); gl.uniform2f(u.simTexel, ...simTexel); gl.uniform1f(u.dt, dt); gl.uniform1f(u.keep, 0.99); }); vel.swap();
+    run(progs.advect, dye.write, u => { gl.uniform1i(u.vel, bindTex(0, vel.read)); gl.uniform1i(u.src, bindTex(1, dye.read)); gl.uniform2f(u.simTexel, ...simTexel); gl.uniform1f(u.dt, dt); gl.uniform1f(u.keep, Math.pow(PARAMS.dissipation, dt * 60 * 0.25)); }); dye.swap();
+    run(progs.display, null, u => gl.uniform1i(u.dye, bindTex(0, dye.read)));
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => {
+    cancelAnimationFrame(raf); ro.disconnect();
+    canvas.removeEventListener('pointermove', onMove); canvas.removeEventListener('pointerleave', onLeave);
+    gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove();
+  };
+}

package/anims/fluid/lava-lamp.js

@@ -0,0 +1,56 @@
+// Lava lamp: metaballs. Every blob adds a field that falls off with distance; where the sum passes a threshold
+// the pixel is lava. Because fields add up, nearby blobs bulge toward each other and merge smoothly.
+const PARAMS = { blobs: 8, speed: 0.5 };
+
+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 MAX = 14;
+  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 vec3 B[${MAX}]; uniform int N; uniform vec2 R;
+  void main() {
+    vec2 q = uv * vec2(R.x / R.y, 1.);
+    float f = 0.;
+    for (int i = 0; i < ${MAX}; i++) { if (i >= N) break; vec2 d = q - B[i].xy; f += B[i].z * B[i].z / (dot(d, d) + 1e-4); }
+    vec3 bg = mix(vec3(.04, .09, .2), vec3(.09, .18, .36), uv.y);
+    float edge = smoothstep(.95, 1.05, f);
+    // height rises from 0 at the edge toward 1 inside; its screen-space slope gives a smooth normal
+    float hgt = clamp(1. - 1. / max(f, 1e-3), 0., 1.);
+    vec3 n = normalize(vec3(-dFdx(hgt) * R.y * .35, -dFdy(hgt) * R.y * .35, 1.));
+    float light = clamp(dot(n, normalize(vec3(-.45, .55, .7))), 0., 1.);
+    vec3 lava = mix(vec3(.95, .25, .2), vec3(1., .72, .25), clamp(hgt * .9 + uv.y * .25, 0., 1.));
+    lava *= .55 + .6 * light; lava += pow(light, 18.) * .35;
+    float glow = smoothstep(.25, 1., f) * (1. - edge) * .35;
+    o = vec4(mix(bg + glow * vec3(1., .4, .2), lava, edge), 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 uB = gl.getUniformLocation(prog, 'B'), uN = gl.getUniformLocation(prog, 'N'), uR = gl.getUniformLocation(prog, 'R');
+  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();
+  const n = Math.min(MAX, Math.round(PARAMS.blobs));
+  const blobs = Array.from({ length: n }, (_, i) => ({ x: 0.15 + 0.7 * ((i * 0.618) % 1), r: 0.07 + 0.05 * ((i * 0.37) % 1), f: 0.15 + 0.2 * ((i * 0.53) % 1), ph: i * 1.7 }));
+  const data = new Float32Array(MAX * 3);
+  let raf;
+  function frame(now) {
+    const t = now / 1000 * PARAMS.speed, ar = canvas.width / canvas.height;
+    blobs.forEach((b, i) => {
+      data[i * 3] = (b.x + 0.06 * Math.sin(t * 0.7 + b.ph)) * ar;
+      data[i * 3 + 1] = 0.5 - 0.42 * Math.cos(t * b.f * 2 + b.ph);     // slow rise and fall
+      data[i * 3 + 2] = b.r * (1 + 0.15 * Math.sin(t * 1.3 + b.ph));
+    });
+    gl.uniform3fv(uB, data); gl.uniform1i(uN, n); gl.uniform2f(uR, canvas.width, canvas.height);
+    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/liquid-distort.js

@@ -0,0 +1,64 @@
+// Liquid image distortion: the picture is a texture, and every pixel samples it from a spot shifted by
+// flowing noise. Near the pointer the shift grows, like a finger dragged through water.
+const PARAMS = { strength: 0.04, speed: 0.4 };
+
+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(); }
+
+  // The "image": painted once on a 2D canvas, then uploaded as a texture.
+  const pic = document.createElement('canvas'); pic.width = 1024; pic.height = 768;
+  const p = pic.getContext('2d');
+  const bands = ['#0b3d91', '#1c7ed6', '#4dabf7', '#a5d8ff', '#e7f5ff', '#ffd43b', '#ff922b'];
+  bands.forEach((c, i) => { p.fillStyle = c; p.fillRect(0, i * 768 / bands.length, 1024, 768 / bands.length + 1); });
+  p.fillStyle = '#ffffff'; p.font = '900 230px "Mona Sans", system-ui, sans-serif'; p.textAlign = 'center'; p.textBaseline = 'middle';
+  p.fillText('LIQUID', 512, 384);
+
+  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 sampler2D img; uniform float T, S; uniform vec2 M, R;
+  vec2 hash(vec2 p) { p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3))); return -1. + 2. * fract(sin(p) * 43758.5453); }
+  float noise(vec2 p) { vec2 i = floor(p), f = fract(p), u = f * f * (3. - 2. * f);
+    return mix(mix(dot(hash(i), f), dot(hash(i + vec2(1, 0)), f - vec2(1, 0)), u.x), mix(dot(hash(i + vec2(0, 1)), f - vec2(0, 1)), dot(hash(i + vec2(1, 1)), f - vec2(1, 1)), u.x), u.y); }
+  void main() {
+    vec2 q = uv * vec2(R.x / R.y, 1.);
+    vec2 n = vec2(noise(q * 2.2 + vec2(T, T * .7)), noise(q * 2.2 + vec2(-T * .8, T) + 7.3));
+    vec2 m = M * vec2(R.x / R.y, 1.); float near = exp(-dot(q - m, q - m) * 9.);
+    vec2 swirl = vec2(-(q - m).y, (q - m).x) * near * 1.6;
+    vec2 st = uv + n * S + swirl * S;
+    // cover-fit the 4:3 picture into the frame
+    vec2 ar = vec2(R.x / R.y / (4. / 3.), 1.); if (ar.x < 1.) ar = vec2(1., (4. / 3.) / (R.x / R.y));
+    vec2 tc = (st - .5) * (ar.x > 1. ? vec2(1., 1. / ar.x) : vec2(1. / ar.y, 1.)) + .5;
+    o = vec4(texture(img, vec2(tc.x, 1. - tc.y)).rgb, 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 tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, pic);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
+  const U = n => gl.getUniformLocation(prog, n);
+  const uT = U('T'), uS = U('S'), uM = U('M'), uR = U('R');
+
+  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 mx = 0.5, my = 0.5, tx = 0.5, ty = 0.5, lastMove = -1e9, raf;
+  const onMove = e => { const b = canvas.getBoundingClientRect(); tx = (e.clientX - b.left) / b.width; ty = 1 - (e.clientY - b.top) / b.height; lastMove = performance.now(); };
+  canvas.addEventListener('pointermove', onMove);
+  function frame(now) {
+    const t = now / 1000;
+    if (now - lastMove > 1500) { tx = 0.5 + Math.cos(t * 0.7) * 0.3; ty = 0.5 + Math.sin(t * 1.1) * 0.25; }
+    mx += (tx - mx) * 0.08; my += (ty - my) * 0.08;
+    gl.uniform1f(uT, t * PARAMS.speed); gl.uniform1f(uS, PARAMS.strength); gl.uniform2f(uM, mx, my); gl.uniform2f(uR, canvas.width, canvas.height);
+    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/liquid-glass-fill.js

@@ -0,0 +1,53 @@
+// Liquid in a glass: the surface is a row of springs (a 1D wave equation). Tilting the glass pushes the
+// surface and the wave sloshes back and forth; bubbles rise and the fill level breathes up and down.
+const PARAMS = { slosh: 1, fill: 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');
+  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 N = 48, hgt = new Float32Array(N), vel = new Float32Array(N);
+  let bubbles = [], tiltV = 0, prevTilt = 0, last = performance.now(), raf;
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now; const t = now / 1000;
+    const tilt = Math.sin(t * 1.3) * 0.22 * PARAMS.slosh * (Math.sin(t * 0.31) > 0 ? 1 : 0.3);
+    const tiltAcc = (tilt - prevTilt) / dt - tiltV; tiltV = (tilt - prevTilt) / dt; prevTilt = tilt;
+    // springs: each column pulled to rest and to its neighbours; tilting acceleration shoves the water sideways
+    for (let s = 0; s < 4; s++) {
+      const h = dt / 4;
+      for (let i = 0; i < N; i++) { const l = hgt[Math.max(0, i - 1)], r = hgt[Math.min(N - 1, i + 1)]; vel[i] += ((l + r - 2 * hgt[i]) * 900 - hgt[i] * 6 - vel[i] * 1.6 + (i / (N - 1) - 0.5) * tiltAcc * 14) * h; }
+      for (let i = 0; i < N; i++) hgt[i] += vel[i] * h;
+    }
+    const S = Math.min(W, H), gw = S * 0.42, gh = S * 0.62, cx = W / 2, base = H * 0.85;
+    const level = PARAMS.fill * (0.85 + 0.15 * Math.sin(t * 0.4));
+    ctx.fillStyle = '#e9eef3'; ctx.fillRect(0, 0, W, H);
+    ctx.save(); ctx.translate(cx, base); ctx.rotate(tilt);
+    // glass: slightly tapered tumbler
+    const glass = new Path2D(); glass.moveTo(-gw / 2, -gh); glass.lineTo(gw / 2, -gh); glass.lineTo(gw * 0.42, 0); glass.lineTo(-gw * 0.42, 0); glass.closePath();
+    ctx.fillStyle = 'rgba(210, 225, 238, .35)'; ctx.fill(glass);
+    ctx.save(); ctx.clip(glass);
+    const top = -gh * level;
+    ctx.beginPath(); ctx.moveTo(-gw, 4);
+    for (let i = 0; i < N; i++) { const x = -gw / 2 + (gw * i) / (N - 1), y = top + hgt[i] - Math.sin(-tilt) * x * 0.95; ctx.lineTo(x, y); }   // the surface stays level as the glass tilts
+    ctx.lineTo(gw, 4); ctx.closePath();
+    const juice = ctx.createLinearGradient(0, top, 0, 0); juice.addColorStop(0, '#ffb347'); juice.addColorStop(1, '#f2711c');
+    ctx.fillStyle = juice; ctx.fill();
+    ctx.strokeStyle = 'rgba(255,240,200,.9)'; ctx.lineWidth = 2; ctx.stroke();
+    if (Math.random() < dt * 18) bubbles.push({ x: (Math.random() - 0.5) * gw * 0.7, y: -4, r: 1 + Math.random() * 3, v: 30 + Math.random() * 40 });
+    ctx.fillStyle = 'rgba(255, 245, 220, .7)';
+    for (const b of bubbles) { b.y -= b.v * dt; b.x += Math.sin(b.y * 0.1) * 0.2; ctx.beginPath(); ctx.arc(b.x, b.y, b.r, 0, 7); ctx.fill(); }
+    bubbles = bubbles.filter(b => b.y > top + 6);
+    ctx.restore();
+    ctx.strokeStyle = 'rgba(120, 140, 160, .6)'; ctx.lineWidth = 3; ctx.stroke(glass);
+    ctx.fillStyle = 'rgba(255,255,255,.55)'; ctx.fillRect(-gw * 0.36, -gh * 0.92, gw * 0.05, gh * 0.8);   // highlight
+    ctx.restore();
+    ctx.fillStyle = 'rgba(40, 50, 60, .1)'; ctx.beginPath(); ctx.ellipse(cx, base + 6, gw * 0.5, 8, 0, 0, 7); ctx.fill();
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/fluid/marbling.js

@@ -0,0 +1,53 @@
+// Paper marbling: bands of floating paint, combed and swirled. Each pixel traces backward through a comb pass
+// (sideways waves), a swirl around the stylus and a slow drift, then reads its colour from the original stripes.
+const PARAMS = { comb: 1, swirl: 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, C, S;
+  vec3 paint(float v) {
+    vec3 cols[5] = vec3[5](vec3(.95, .9, .8), vec3(.62, .16, .14), vec3(.06, .33, .4), vec3(.86, .6, .2), vec3(.12, .1, .1));
+    float f = fract(v) * 5.; int i = int(f); float k = smoothstep(.82, 1., fract(f));
+    return mix(cols[i], cols[(i + 1) % 5], k);
+  }
+  void main() {
+    vec2 a = vec2(R.x / R.y, 1.), q = uv * a;
+    // undo the stylus swirl: rotate around the pointer, more strongly close to it
+    vec2 d = q - M * a; float r = length(d), ang = S * 2.6 * exp(-r * r * 9.) * sin(T * .5);
+    q = M * a + mat2(cos(ang), -sin(ang), sin(ang), cos(ang)) * d;
+    // undo the comb: alternating sideways waves
+    q.x += C * .06 * sin(q.y * 18. + T * .4) + C * .03 * sin(q.y * 41. - T * .3);
+    q.y += C * .05 * sin(q.x * 9. + T * .25);
+    // the original floated bands, with a little drift
+    float v = q.x * 2.2 + .25 * sin(q.y * 3. + T * .1) + T * .015;
+    vec3 c = paint(v);
+    float grain = fract(sin(dot(uv * R, vec2(12.9, 78.2))) * 43758.5);
+    o = vec4(c * (.96 + .04 * grain), 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'), uC = u('C'), uS = u('S');
+  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 mx = 0.5, my = 0.5, tx = mx, ty = my, lastMove = -1e9, raf;
+  const onMove = e => { const b = canvas.getBoundingClientRect(); tx = (e.clientX - b.left) / b.width; ty = 1 - (e.clientY - b.top) / b.height; lastMove = performance.now(); };
+  canvas.addEventListener('pointermove', onMove);
+  function frame(now) {
+    const t = now / 1000;
+    if (now - lastMove > 1500) { tx = 0.5 + Math.cos(t * 0.35) * 0.25; ty = 0.5 + Math.sin(t * 0.5) * 0.25; }
+    mx += (tx - mx) * 0.05; my += (ty - my) * 0.05;
+    gl.uniform2f(uR, canvas.width, canvas.height); gl.uniform2f(uM, mx, my); gl.uniform1f(uT, t); gl.uniform1f(uC, PARAMS.comb); gl.uniform1f(uS, PARAMS.swirl);
+    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/mercury.js

@@ -0,0 +1,177 @@
+// Mercury: beads of liquid metal on a tray. JavaScript moves the beads (they pull together and merge, and a
+// fast stroke splits them); the shader turns them into one metaball surface, builds a height from it and
+// reflects a studio (pale floor at the rim, dark room, bright softboxes on top) off its normal.
+const PARAMS = { beads: 14, cohesion: 1, tilt: 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';
+  stage.append(canvas);
+  const gl = canvas.getContext('webgl2', { antialias: false });
+  if (!gl) { stage.textContent = 'This needs WebGL2.'; return () => canvas.remove(); }
+  const MAX = 24;
+  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 int N; uniform vec4 B[${MAX}]; uniform vec2 V[${MAX}];
+  // metaball field; w returns the field-weighted radius so big puddles can be flatter than small beads
+  float field(vec2 p, out float w) {
+    float f = 0., wr = 0.;
+    for (int i = 0; i < ${MAX}; i++) {
+      if (i >= N) break;
+      vec2 d = p - B[i].xy, v = V[i]; float s = length(v);
+      if (s > 1e-3) { vec2 vn = v / s; d -= vn * dot(d, vn) * (1. - 1. / (1. + s * .9)); }   // moving beads stretch along their path
+      float r = B[i].z, k = r * r / (dot(d, d) + 1e-6);
+      f += k; wr += k * r;
+    }
+    w = wr / max(f, 1e-6); return f;
+  }
+  float height(vec2 p) { float w; float f = field(p, w); return f > 1. ? min(w, .065) * sqrt(1. - 1. / f) : 0.; }
+  vec3 env(vec3 d) {
+    float up = d.z;
+    vec3 floorC = vec3(.84, .83, .8), room = vec3(.06, .065, .075), ceil = vec3(.62, .65, .69);
+    vec3 c = up < 0. ? mix(room, floorC, smoothstep(0., -.35, up)) : mix(room, ceil, smoothstep(.03, .32, up));
+    vec2 q = d.xy / max(d.z, .06);                                       // where the ray meets the ceiling
+    float key = smoothstep(.75, .4, length((q - vec2(-.4, .45)) * vec2(1., 1.5))), fill = smoothstep(.5, .2, length((q - vec2(.6, -.1)) * vec2(1.4, 1.)));
+    float strip = smoothstep(.08, .035, abs(q.y + .62 + .12 * q.x)) * smoothstep(1.6, 1.2, abs(q.x - .25));
+    c += step(0., up) * (vec3(1.) * key * 1.6 + vec3(.9, .95, 1.) * fill * .7 + vec3(1., .96, .9) * strip * 1.2);
+    float az = atan(d.y, d.x), hz = exp(-pow((up - .16) / .07, 2.));     // a window glow just above the horizon
+    c += hz * vec3(.45, .55, .7) * smoothstep(.3, .95, sin(az * 2. + .6)) * .8;
+    return c;
+  }
+  float hash(vec2 p) { return fract(sin(dot(p, vec2(41.3, 289.1))) * 43758.5); }
+  void main() {
+    vec2 A = vec2(R.x / R.y, 1.), p = (uv - .5) * A;
+    float w, f = field(p, w);
+    // the tray: warm pale paper with grain and a soft vignette
+    vec3 bg = vec3(.86, .85, .82) * (.93 + .07 * smoothstep(.95, .2, length(uv - .5)));
+    bg += (hash(floor(uv * R)) - .5) * .025;
+    float ws, fs2 = field(p - vec2(-.018, .03), ws);                     // shadow: the field again, nudged away from the key light
+    bg *= 1. - smoothstep(.22, 1.15, fs2) * .38;
+    bg *= 1. - smoothstep(.78, 1., f) * .16;                             // contact darkening hugging each bead
+    float e = 1. / R.y;
+    vec3 n = normalize(vec3(-(height(p + vec2(e, 0)) - height(p - vec2(e, 0))) / (2. * e), -(height(p + vec2(0, e)) - height(p - vec2(0, e))) / (2. * e), 1.));
+    vec3 vd = normalize(vec3(p * .35, -1.));
+    vec3 rd = reflect(vd, n);
+    float fr = .78 + .22 * pow(1. - max(0., dot(-vd, n)), 4.);           // metal: reflective everywhere, more at grazing angles
+    vec3 metal = env(rd) * fr * vec3(.9, .92, .95);
+    float aa = fwidth(f) * 1.2;
+    float m = smoothstep(1. - aa, 1. + aa, f);
+    vec3 c = mix(bg, metal, m);
+    o = vec4(pow(c, vec3(.95)), 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'), uN = u('N'), uB = u('B'), uV = u('V');
+  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();
+
+  // beads live in shader units: the frame is 1 tall and aspect wide, centred on 0
+  const aspect = () => canvas.width / Math.max(1, canvas.height);
+  const beads = [];
+  const bead = (x, y, r, vx = 0, vy = 0) => ({ x, y, r, vx, vy, age: 0, jig: 0.6 });
+  for (let i = 0; i < Math.round(PARAMS.beads); i++) {
+    const a = aspect();
+    beads.push(bead((Math.random() - 0.5) * (a - 0.2), (Math.random() - 0.5) * 0.8, 0.022 + Math.random() * 0.042));
+  }
+  // pointer as a stylus; when idle, a virtual finger swipes through every few seconds
+  let px = 99, py = 99, pvx = 0, pvy = 0, lastMove = -1e9, lastT = 0;
+  const onMove = e => {
+    const b = canvas.getBoundingClientRect(), a = b.width / b.height, now = performance.now();
+    const x = ((e.clientX - b.left) / b.width - 0.5) * a, y = 0.5 - (e.clientY - b.top) / b.height;
+    const dt = Math.max(0.008, (now - lastT) / 1000);
+    if (now - lastMove < 100) { pvx = pvx * 0.5 + (x - px) / dt * 0.5; pvy = pvy * 0.5 + (y - py) / dt * 0.5; }
+    px = x; py = y; lastMove = lastT = now;
+  };
+  const onLeave = () => { px = py = 99; pvx = pvy = 0; };
+  canvas.addEventListener('pointermove', onMove); canvas.addEventListener('pointerleave', onLeave);
+  const rnd = n => { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); };
+  const t0 = performance.now(), sweep = { k: -1, ang: 0, off: 0 };
+  let raf, last = t0;
+  const Bf = new Float32Array(MAX * 4), Vf = new Float32Array(MAX * 2);
+
+  function step(dt, t) {
+    const a = aspect(), hw = a / 2, hh = 0.5;
+    let sx = px, sy = py, svx = pvx, svy = pvy;
+    if (performance.now() - lastMove > 1500) {
+      const ph = (t - 0.6) / 3.6, k = Math.floor(ph), f = ph - k, dur = 1.1 / 3.6;
+      if (ph >= 0 && f < dur) {
+        if (k !== sweep.k) {                              // each swipe is aimed through the biggest puddle
+          const big = beads.reduce((m, b) => b.r > m.r ? b : m, beads[0]);
+          sweep.k = k; sweep.ang = rnd(k) * Math.PI * 2; sweep.off = -Math.sin(sweep.ang) * big.x + Math.cos(sweep.ang) * big.y;
+        }
+        const ang = sweep.ang, off = sweep.off, s = f / dur;
+        const dx = Math.cos(ang), dy = Math.sin(ang), L = a * 0.65;
+        sx = -dy * off + dx * (s - 0.5) * 2 * L; sy = dx * off + dy * (s - 0.5) * 2 * L;
+        svx = dx * 2 * L / (dur * 3.6); svy = dy * 2 * L / (dur * 3.6);
+      } else { sx = sy = 99; svx = svy = 0; }
+    }
+    const sp = Math.hypot(svx, svy), gx = Math.sin(t * 0.37 + 1) * 0.16 * PARAMS.tilt, gy = Math.cos(t * 0.29) * 0.13 * PARAMS.tilt;
+    for (const b of beads) {
+      b.age += dt; b.jig *= Math.exp(-dt * 3.5);
+      let ax = gx, ay = gy;
+      const dx = b.x - sx, dy = b.y - sy, d = Math.hypot(dx, dy), reach = b.r + 0.055;
+      if (d < reach && d > 1e-5) {                       // the stylus shoves and drags the metal
+        const k = 1 - d / reach; ax += dx / d * k * 9 + svx * k * 2.5; ay += dy / d * k * 9 + svy * k * 2.5;
+      }
+      b.ax = ax; b.ay = ay;
+    }
+    // cohesion: beads that are close pull together, the pull shared by size
+    for (let i = 0; i < beads.length; i++) for (let j = i + 1; j < beads.length; j++) {
+      const A = beads[i], B = beads[j]; if (A.age < 0.35 || B.age < 0.35) continue;
+      // surfaces touch at about 1.35x the summed radii (where the metaballs bridge): touching beads snap together
+      const dx = B.x - A.x, dy = B.y - A.y, d = Math.hypot(dx, dy) + 1e-6, gap = d - (A.r + B.r) * 1.35;
+      if (gap > 0.09) continue;
+      const k = gap < 0 ? 6 : PARAMS.cohesion * 0.9 * (1 - gap / 0.09), ma = A.r * A.r, mb = B.r * B.r;
+      A.ax += dx / d * k * mb / (ma + mb); A.ay += dy / d * k * mb / (ma + mb);
+      B.ax -= dx / d * k * ma / (ma + mb); B.ay -= dy / d * k * ma / (ma + mb);
+    }
+    for (const b of beads) {
+      const damp = 1.4 + 0.012 / b.r;                    // tiny beads stick to the tray more than big ones
+      b.vx = (b.vx + b.ax * dt) * Math.exp(-damp * dt); b.vy = (b.vy + b.ay * dt) * Math.exp(-damp * dt);
+      b.x += b.vx * dt; b.y += b.vy * dt;
+      const m = b.r * 1.1 + 0.015;
+      if (b.x < -hw + m) { b.x = -hw + m; b.vx *= -0.35; } if (b.x > hw - m) { b.x = hw - m; b.vx *= -0.35; }
+      if (b.y < -hh + m) { b.y = -hh + m; b.vy *= -0.35; } if (b.y > hh - m) { b.y = hh - m; b.vy *= -0.35; }
+    }
+    // merge: centres close enough become one bead with the same area and momentum
+    for (let i = 0; i < beads.length; i++) for (let j = beads.length - 1; j > i; j--) {
+      const A = beads[i], B = beads[j], d = Math.hypot(B.x - A.x, B.y - A.y);
+      if (d < (A.r + B.r) * 0.42 && A.age > 0.35 && B.age > 0.35) {
+        const ma = A.r * A.r, mb = B.r * B.r, m = ma + mb;
+        A.x = (A.x * ma + B.x * mb) / m; A.y = (A.y * ma + B.y * mb) / m;
+        A.vx = (A.vx * ma + B.vx * mb) / m; A.vy = (A.vy * ma + B.vy * mb) / m;
+        A.r = Math.sqrt(m); A.jig = 1; beads.splice(j, 1);
+      }
+    }
+    // split: a fast stroke through a bead tears it in two, flung apart across the stroke
+    if (sp > 0.7) for (let i = beads.length - 1; i >= 0; i--) {
+      const b = beads[i];
+      if (beads.length >= MAX || b.r < 0.03 || b.age < 0.25 || Math.hypot(b.x - sx, b.y - sy) > b.r * 0.9 + 0.012) continue;
+      const f = 0.35 + Math.random() * 0.3, r1 = b.r * Math.sqrt(f), r2 = b.r * Math.sqrt(1 - f);
+      const nx = -svy / sp, ny = svx / sp, kick = 0.35 + Math.random() * 0.25;
+      beads.splice(i, 1,
+        bead(b.x + nx * r1 * 0.9, b.y + ny * r1 * 0.9, r1, b.vx + nx * kick + svx * 0.15, b.vy + ny * kick + svy * 0.15),
+        bead(b.x - nx * r2 * 0.9, b.y - ny * r2 * 0.9, r2, b.vx - nx * kick + svx * 0.15, b.vy - ny * kick + svy * 0.15));
+    }
+  }
+
+  function frame(now) {
+    const dt = Math.min(0.033, (now - last) / 1000); last = now; const t = (now - t0) / 1000;
+    step(dt / 2, t); step(dt / 2, t);
+    if (now - lastMove > 120) { pvx *= 0.8; pvy *= 0.8; }
+    beads.forEach((b, i) => {
+      const r = b.r * (1 + 0.07 * b.jig * Math.sin(b.age * 26));
+      Bf.set([b.x, b.y, r, 0], i * 4); Vf.set([b.vx, b.vy], i * 2);
+    });
+    gl.uniform2f(uR, canvas.width, canvas.height); gl.uniform1i(uN, beads.length);
+    gl.uniform4fv(uB, Bf); gl.uniform2fv(uV, Vf);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); canvas.removeEventListener('pointerleave', onLeave); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/fluid/ocean-waves.js

@@ -0,0 +1,50 @@
+// Ocean waves: Gerstner waves. Water points move in circles, not just up and down, which sharpens crests and
+// flattens troughs. Several layers at different speeds and depths give parallax.
+const PARAMS = { height: 1, choppiness: 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');
+  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();
+
+  // each layer: base line, colour, speed and three component waves [amplitude, wavelength, speed factor]
+  const layers = [
+    { y: 0.46, c: '#7fb3e6', s: 0.4, w: [[0.012, 0.35, 1], [0.006, 0.17, 1.4], [0.004, 0.09, 2]] },
+    { y: 0.56, c: '#4f8fd1', s: 0.6, w: [[0.018, 0.42, 1], [0.009, 0.2, 1.3], [0.005, 0.11, 1.9]] },
+    { y: 0.68, c: '#2b6cb8', s: 0.8, w: [[0.026, 0.5, 1], [0.012, 0.24, 1.2], [0.006, 0.13, 1.7]] },
+    { y: 0.82, c: '#174d8f', s: 1, w: [[0.036, 0.62, 1], [0.016, 0.3, 1.25], [0.008, 0.15, 1.8]], foam: true },
+  ];
+  let raf;
+  function frame(now) {
+    const t = now / 1000;
+    ctx.fillStyle = '#dbeafa'; ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = '#ffd8a8'; ctx.beginPath(); ctx.arc(W * 0.72, H * 0.3, Math.min(W, H) * 0.11, 0, Math.PI * 2); ctx.fill();
+    for (const L of layers) {
+      const pts = [];
+      for (let i = -4; i <= 124; i++) {
+        let x = (i / 120) * W, y = L.y * H;
+        for (const [a, wl, sp] of L.w) {
+          const A = a * H * PARAMS.height, k = (2 * Math.PI) / (wl * W), om = Math.sqrt(9.8 * k * H * 0.25) * sp * L.s * 0.35;
+          const ph = k * (i / 120) * W - om * t;
+          x -= PARAMS.choppiness * A * Math.sin(ph);   // horizontal circle component: the Gerstner part
+          y -= A * Math.cos(ph);
+        }
+        pts.push([x, y]);
+      }
+      ctx.beginPath(); ctx.moveTo(pts[0][0], H);
+      for (const [x, y] of pts) ctx.lineTo(x, y);
+      ctx.lineTo(pts.at(-1)[0], H); ctx.closePath(); ctx.fillStyle = L.c; ctx.fill();
+      if (L.foam) {
+        ctx.strokeStyle = 'rgba(255,255,255,.85)'; ctx.lineWidth = 2; ctx.beginPath();
+        pts.forEach(([x, y], i) => i ? ctx.lineTo(x, y) : ctx.moveTo(x, y)); ctx.stroke();
+      }
+    }
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}