motion-library 0.0.0-stage → 0.1.0

package/anims/chrome/torus-knot.js

@@ -0,0 +1,89 @@
+// Torus knot: a tube swept along a (p, q) knot that winds p times around the axis and q times through the hole.
+// The tube's frame is carried along by parallel transport (no sudden flips, unlike Frenet frames). It is shaded
+// as chrome that shifts hue with viewing angle, like a thin film, and stripes flow along it.
+const PARAMS = { p: 2, q: 3, 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 gl = canvas.getContext('webgl2', { antialias: true });
+  if (!gl) { stage.textContent = 'This needs WebGL2.'; return () => canvas.remove(); }
+  const P = Math.max(1, Math.round(PARAMS.p)), Q = Math.max(1, Math.round(PARAMS.q)), SEG = 520, RAD = 28, tube = 0.34;
+  const curve = t => { const r = 2 + Math.cos(Q * t); return [r * Math.cos(P * t), r * Math.sin(P * t), Math.sin(Q * t) * 1.1].map(v => v * 0.55); };
+  const sub = (a, b) => a.map((v, i) => v - b[i]), nrm = a => { const l = Math.hypot(...a) || 1; return a.map(v => v / l); };
+  const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]], dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+  // parallel transport: carry the normal along, removing its component along each new tangent
+  const pts = [], T = [], N = [], B = [];
+  for (let i = 0; i <= SEG; i++) { const t = i / SEG * Math.PI * 2; pts.push(curve(t)); T.push(nrm(sub(curve(t + 1e-3), curve(t - 1e-3)))); }
+  let n = nrm(cross(T[0], [0, 0, 1]));
+  for (let i = 0; i <= SEG; i++) { n = nrm(sub(n, T[i].map(v => v * dot(n, T[i])))); N.push(n); B.push(cross(T[i], n)); }
+  // close the loop: spread the leftover twist evenly so the seam meets
+  const twist = Math.atan2(dot(cross(N[SEG], N[0]), T[0]), dot(N[SEG], N[0]));
+  const verts = [], idx = [];
+  for (let i = 0; i <= SEG; i++) {
+    const tw = twist * i / SEG;
+    for (let j = 0; j <= RAD; j++) {
+      const a = j / RAD * Math.PI * 2 + tw, c = Math.cos(a), s = Math.sin(a), d = N[i].map((v, k) => v * c + B[i][k] * s);
+      verts.push(pts[i][0] + d[0] * tube, pts[i][1] + d[1] * tube, pts[i][2] + d[2] * tube, d[0], d[1], d[2], i / SEG, j / RAD);
+    }
+  }
+  for (let i = 0; i < SEG; i++) for (let j = 0; j < RAD; j++) { const a = i * (RAD + 1) + j, b = a + RAD + 1; idx.push(a, b, a + 1, b, b + 1, a + 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 link = (v, f) => { const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, v)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, f)); gl.bindAttribLocation(p, 0, 'p'); gl.linkProgram(p); return p; };
+  const prog = link(`#version 300 es
+  in vec3 pos, nor; in vec2 st; uniform mat4 PV, M; out vec3 vN, vW; out vec2 vS;
+  void main() { vec4 w = M * vec4(pos, 1); vW = w.xyz; vN = mat3(M) * nor; vS = st; gl_Position = PV * w; }`, `#version 300 es
+  precision highp float; in vec3 vN, vW; in vec2 vS; out vec4 o; uniform float T, F;
+  vec3 env(vec3 d) {
+    vec3 c = mix(vec3(.05, .05, .07), vec3(.5, .52, .58), smoothstep(-.3, .9, d.y));
+    c += vec3(1.) * 2. * smoothstep(.1, .0, abs(d.x + .3) - .25) * smoothstep(.55, .75, d.y);
+    c += vec3(1., .6, .35) * 1.2 * smoothstep(.08, .0, abs(d.z - .2) - .06) * smoothstep(-.2, .1, d.y) * smoothstep(.5, .2, d.y);
+    return c;
+  }
+  void main() {
+    vec3 n = normalize(vN), v = normalize(vec3(0, 0, 6.5) - vW), r = reflect(-v, n);
+    float fr = pow(1. - max(0., dot(n, v)), 2.);
+    vec3 film = .5 + .5 * cos(6.2832 * (fr * 1.4 + vec3(0., .33, .67) + vS.x * 2.));      // hue slides with the viewing angle
+    vec3 c = env(r) * mix(vec3(.9), film, .55);
+    float stripe = smoothstep(.45, .5, abs(fract(vS.x * 24. - T * .35 * F) - .5));       // stripes flowing along the knot
+    c *= .82 + .18 * stripe;
+    c += pow(max(0., dot(r, normalize(vec3(-.4, .8, .5)))), 60.) * .8;
+    o = vec4(pow(c / (1. + c * .35), vec3(1. / 1.8)), 1);
+  }`);
+  const bg = link(`#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, .999, 1); }`, `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; void main() { vec3 c = mix(vec3(.05, .05, .08), vec3(.16, .14, .2), uv.y); c += vec3(.25, .15, .3) * exp(-length(uv - vec2(.5, .55)) * 3.); o = vec4(c, 1); }`);
+  const quadVao = gl.createVertexArray(); gl.bindVertexArray(quadVao);
+  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 vao = gl.createVertexArray(); gl.bindVertexArray(vao);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
+  [['pos', 3, 0], ['nor', 3, 12], ['st', 2, 24]].forEach(([nm, s, o]) => { const l = gl.getAttribLocation(prog, nm); gl.enableVertexAttribArray(l); gl.vertexAttribPointer(l, s, gl.FLOAT, false, 32, o); });
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(idx), gl.STATIC_DRAW);
+  const uPV = gl.getUniformLocation(prog, 'PV'), uM = gl.getUniformLocation(prog, 'M'), uT = gl.getUniformLocation(prog, 'T'), uF = gl.getUniformLocation(prog, 'F');
+  // tiny matrix kit (column-major)
+  const mul = (a, b) => { const o = new Float32Array(16); for (let c = 0; c < 4; c++) for (let r = 0; r < 4; r++) { let s = 0; for (let k = 0; k < 4; k++) s += a[k * 4 + r] * b[c * 4 + k]; o[c * 4 + r] = s; } return o; };
+  const persp = (fov, asp, nr, f) => { const t = 1 / Math.tan(fov / 2); return new Float32Array([t / asp, 0, 0, 0, 0, t, 0, 0, 0, 0, (f + nr) / (nr - f), -1, 0, 0, 2 * f * nr / (nr - f), 0]); };
+  const rotY = a => new Float32Array([Math.cos(a), 0, -Math.sin(a), 0, 0, 1, 0, 0, Math.sin(a), 0, Math.cos(a), 0, 0, 0, 0, 1]);
+  const rotX = a => new Float32Array([1, 0, 0, 0, 0, Math.cos(a), Math.sin(a), 0, 0, -Math.sin(a), Math.cos(a), 0, 0, 0, 0, 1]);
+  const trans = z => new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, z, 1]);
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); canvas.width = stage.clientWidth * d | 0; canvas.height = stage.clientHeight * d | 0; };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    const t = (now - t0) / 1000, asp = canvas.width / canvas.height;
+    gl.viewport(0, 0, canvas.width, canvas.height); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.disable(gl.DEPTH_TEST); gl.useProgram(bg); gl.bindVertexArray(quadVao); gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.enable(gl.DEPTH_TEST); gl.useProgram(prog); gl.bindVertexArray(vao);
+    const fit = Math.max(1, 1.25 / asp);                                              // pull back on tall stages
+    gl.uniformMatrix4fv(uPV, false, mul(persp(0.7, asp, 0.1, 30), trans(-6.5 * fit)));
+    gl.uniformMatrix4fv(uM, false, mul(rotX(0.9 + Math.sin(t * 0.3) * 0.25), rotY(t * 0.4)));
+    gl.uniform1f(uT, t); gl.uniform1f(uF, PARAMS.flow);
+    gl.drawElements(gl.TRIANGLES, idx.length, gl.UNSIGNED_INT, 0);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/chrome/volumetric-clouds.js

@@ -0,0 +1,70 @@
+// Volumetric clouds: the sky is filled with a density field (layers of 3D noise, shaped into a slab and eroded at the
+// edges). Each pixel's ray walks through it, adding light and losing transparency as it goes (Beer's law). At each
+// step a short second march toward the sun measures how much cloud is in the way, which gives the dark bellies and
+// bright tops; a forward-scattering term makes edges glow when you look toward the sun. The wind slides it all along.
+const PARAMS = { cover: 0.5, wind: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
+  stage.append(canvas);
+  const gl = canvas.getContext('webgl2', { antialias: false });
+  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, COV, WIND;
+  float hash(vec3 p) { p = fract(p * .3183099 + .1); p *= 17.; return fract(p.x * p.y * p.z * (p.x + p.y + p.z)); }
+  float noise(vec3 x) { vec3 i = floor(x), f = fract(x); f = f * f * (3. - 2. * f);
+    return mix(mix(mix(hash(i), hash(i + vec3(1, 0, 0)), f.x), mix(hash(i + vec3(0, 1, 0)), hash(i + vec3(1, 1, 0)), f.x), f.y),
+               mix(mix(hash(i + vec3(0, 0, 1)), hash(i + vec3(1, 0, 1)), f.x), mix(hash(i + vec3(0, 1, 1)), hash(i + 1.), f.x), f.y), f.z); }
+  float density(vec3 p) {
+    vec3 q = p + vec3(T * .6 * WIND, 0, T * .25 * WIND);
+    float f = .5 * noise(q * .3) + .25 * noise(q * .62) + .125 * noise(q * 1.27) + .0625 * noise(q * 2.6) + .03 * noise(q * 5.3);
+    float slab = smoothstep(0., 1.2, p.y) * smoothstep(5., 2.8, p.y);       // clouds live in a layer
+    return clamp((f - (.64 - COV * .2)) * 4.5 * slab, 0., 1.);          // above the threshold: cloud; below: clear sky
+  }
+  vec3 aces(vec3 x) { return clamp((x * (2.51 * x + .03)) / (x * (2.43 * x + .59) + .14), 0., 1.); }
+  void main() {
+    vec2 q = (uv * 2. - 1.) * vec2(R.x / R.y, 1.);
+    vec3 ro = vec3(0, -1.2, 0), rd = normalize(vec3(q.x, q.y * .75 + .78, 1.4));   // looking up into the layer
+    vec3 sd = normalize(vec3(.55, .32, .8));
+    float sun = max(dot(rd, sd), 0.);
+    vec3 sky = mix(vec3(.42, .6, .86), vec3(.06, .2, .55), clamp(rd.y * 1.2, 0., 1.)) + vec3(1., .85, .6) * (pow(sun, 600.) * 6. + pow(sun, 8.) * .25);
+    // march from where the ray enters the layer
+    float t0 = max(0., (0. - ro.y) / rd.y), t1 = (5. - ro.y) / max(rd.y, .03);
+    float t = t0 + .12 * fract(sin(dot(uv * R, vec2(12.9, 78.2))) * 43758.5), trans = 1.; vec3 light = vec3(0);
+    float hg = .75 * (1. + .8 * pow(sun, 6.)) + .5 * pow(sun, 30.);         // brighter toward the sun: forward scattering
+    for (int i = 0; i < 64; i++) {
+      if (t > t1 || trans < .02) break;
+      vec3 p = ro + rd * t; float d = density(p);
+      if (d > .01) {
+        float sh = 0.; for (int j = 1; j <= 5; j++) sh += density(p + sd * float(j) * .35);   // cloud toward the sun
+        vec3 lit = vec3(1., .95, .88) * exp(-sh * 1.6) * hg * 1.5 + vec3(.22, .3, .45) * (.3 + .7 * smoothstep(.0, 4., p.y));
+        float a = 1. - exp(-d * .9 * .25 / .25);
+        light += trans * a * lit; trans *= 1. - a;
+      }
+      t += .12 + t * .02;
+    }
+    vec3 col = sky * trans + light;
+    col = mix(col, sky, 1. - exp(-max(t0, 0.) * .02));
+    col = aces(col * 1.05);
+    o = vec4(pow(col, vec3(1. / 2.2)), 1);
+  }`;
+  const sh = (t, s) => { const x = gl.createShader(t); gl.shaderSource(x, s); gl.compileShader(x); if (!gl.getShaderParameter(x, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(x)); return x; };
+  const prog = gl.createProgram(); gl.attachShader(prog, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, fs)); gl.bindAttribLocation(prog, 0, 'p'); gl.linkProgram(prog); gl.useProgram(prog);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  const U = {}; ['R', 'T', 'COV', 'WIND'].forEach(n => U[n] = gl.getUniformLocation(prog, n));
+  const resize = () => { const w = stage.clientWidth || 1, h = stage.clientHeight || 1, d = Math.min(devicePixelRatio, Math.max(0.6, Math.sqrt(190000 / (w * h)))); canvas.width = w * d | 0; canvas.height = h * d | 0; gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, (now - t0) / 1000); gl.uniform1f(U.COV, PARAMS.cover); gl.uniform1f(U.WIND, PARAMS.wind);
+    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/flow/bio-shore.js

@@ -0,0 +1,140 @@
+// Bioluminescent shore: a night beach where plankton (Noctiluca) flash blue whenever the water is disturbed. The glow
+// lives in a texture laid over the beach in world space. Every frame it fades, it is carried up and back down the
+// sand with the wash, and it is lit again wherever a wave breaks and wherever the pointer stirs the water. Each pixel
+// casts a ray onto the beach to find where it looks, then reads the waves, the wet sand's sheen and the glow there.
+const PARAMS = { waves: 1, glow: 1, sparkle: 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 || !gl.getExtension('EXT_color_buffer_float')) { stage.textContent = 'This needs WebGL2 with float render targets.'; return () => canvas.remove(); }
+  const GS = 512;                                                // glow texture: x −24..24 m, z 0..56 m from the camera
+  const COMMON = `
+  const float X0 = -24., X1 = 24., Z0 = 0., Z1 = 56.;
+  uniform float T, WV;
+  float h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+  float n2(vec2 p) { vec2 i = floor(p), f = fract(p); f = f * f * (3. - 2. * f); return mix(mix(h(i), h(i + vec2(1, 0)), f.x), mix(h(i + vec2(0, 1)), h(i + 1.), f.x), f.y); }
+  float shore(float x) { return 9. + 1.6 * sin(x * .17 + 1.) + .8 * sin(x * .43); }     // where the sand meets the sea (z)
+  // the wave train: crests run toward the beach; phase 0..1, crest at 0
+  float phase(vec2 w) { return fract((w.y - shore(w.x)) / 7. + T * .16 * WV + n2(vec2(w.x * .08, T * .05)) * .35); }
+  // how far up the sand the current wash has reached (it surges in after each break, then slides back)
+  float wash(float x) { float p = fract(T * .16 * WV + n2(vec2(x * .08, T * .05)) * .35); return shore(x) - 3.2 * sin(3.14159 * clamp(p * 1.6, 0., 1.)) * (.7 + .3 * n2(vec2(x * .2, floor(T * .16 * WV)))); }`;
+  const QUAD = `#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, 0, 1); }`;
+  // the glow, in world space: fade, ride the wash, light up at breaking crests and under the pointer
+  const glowFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D G; uniform vec3 P; uniform float DT;
+  ${COMMON}
+  void main() {
+    vec2 w = vec2(mix(X0, X1, uv.x), mix(Z0, Z1, uv.y));
+    float s = shore(w.x), ws = wash(w.x);
+    // the wash carries light up the sand and back: sample from slightly seaward (or landward) of here
+    float drift = w.y < s + 2. && w.y > ws - 1. ? (fract(T * .16 * WV) < .32 ? .9 : -.5) : 0.;
+    vec2 src = uv + vec2(0., drift * DT / (Z1 - Z0));
+    float g = texture(G, src).r * exp(-DT * 1.1);
+    float ph = phase(w), surf = smoothstep(s + 9., s + 2., w.y) * step(s - .3, w.y);
+    float crest = exp(-pow((ph - .02) / .018, 2.)) + exp(-pow((ph - 1.02) / .018, 2.));   // the line where the wave is breaking
+    g += crest * surf * (.15 + 1.3 * pow(n2(w * vec2(.9, 2.) + T * .7), 2.)) * DT * 9.;   // breaking is patchy, so the line flickers along its length
+    if (w.y < s && w.y > ws) g += DT * 1.4 * n2(w * 2. + T * 3.) * smoothstep(ws, ws + .6, w.y);   // the foam edge of the wash
+    float d = length((w - P.xy) * vec2(1., .7));
+    g += P.z * exp(-d * d * 3.) * DT * 6.;                                    // a hand dragged through the water
+    o = vec4(min(g, 6.), 0, 0, 1);
+  }`;
+  // the picture
+  const showFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D G; uniform vec2 R; uniform float CH, PITCH, FOC, K, SP;
+  ${COMMON}
+  vec3 sky(vec3 d) {
+    vec3 c = mix(vec3(.007, .013, .026), vec3(.0008, .0016, .005), smoothstep(0., .5, d.y));
+    vec2 sp = vec2(atan(d.x, d.z), d.y) * 340., ci = floor(sp);
+    vec3 p3 = fract(vec3(ci.xyx) * .1031); p3 += dot(p3, p3.yzx + 33.33); float s = fract((p3.x + p3.y) * p3.z);
+    c += vec3(.75, .82, 1.) * step(.994, s) * (s - .994) * 120. * smoothstep(.45, .1, length(fract(sp) - .5));
+    float band = exp(-pow((d.y - .25 - d.x * .3) / .09, 2.)) * n2(vec2(d.x * 9., d.y * 14.));          // a faint Milky Way
+    return c + vec3(.012, .013, .02) * band;
+  }
+  void main() {
+    vec2 q = (uv * 2. - 1.) * vec2(R.x / R.y, 1.);
+    float cp = cos(PITCH), sp = sin(PITCH);
+    vec3 d = normalize(vec3(q.x, q.y * cp - FOC * sp, q.y * sp + FOC * cp));
+    vec3 col;
+    if (d.y > -.0005) col = sky(d);
+    else {
+      float t = CH / -d.y; vec2 w = vec2(d.x, d.z) * t; float dist = t;
+      float s = shore(w.x), ws = wash(w.x), ph = phase(w);
+      vec2 gt = vec2((w.x - X0) / (X1 - X0), (w.y - Z0) / (Z1 - Z0));
+      float g = texture(G, gt).r, gs = (texture(G, gt + vec2(.004, 0)).r + texture(G, gt - vec2(.004, 0)).r + texture(G, gt + vec2(0, .006)).r + texture(G, gt - vec2(0, .006)).r) * .25;
+      if (w.y > ws) {                                               // sea (and the thin sheet of the wash)
+        float wave = sin(ph * 6.2832), slope = cos(ph * 6.2832);
+        float fres = .03 + .5 * pow(1. - abs(d.y), 6.);
+        vec3 refl = sky(reflect(d, normalize(vec3(n2(w * 1.3 + T) - .5, 6. + slope * 2., slope * 1.5))));
+        col = vec3(.001, .003, .007) + refl * fres * (w.y < s ? .5 : 1.);
+        col *= .8 + .2 * wave;
+      } else {                                                      // sand: wet and glossy near the water, dry further up
+        float wet = smoothstep(ws - 4., ws - .3, w.y);
+        col = mix(vec3(.0055, .005, .0045), vec3(.0025, .003, .0045), wet) * (.85 + .3 * n2(w * 6.));
+        col += sky(reflect(d, vec3(0, 1, 0))) * wet * .35;
+      }
+      // the plankton light: a broad glow plus sparks where it is strongest
+      float spark = step(1. - .04 * SP, h(floor(w * 7.) + floor(T * 12.))) * smoothstep(.3, .1, length(fract(w * 7.) - .5)) * g;
+      col += vec3(.05, .55, 1.) * (g * .5 + gs * .5) * K + vec3(.6, .95, 1.) * spark * .8 * K;
+      col = mix(col, vec3(.004, .008, .016), smoothstep(30., 56., dist));     // haze toward the horizon
+    }
+    col = col / (1. + col);
+    o = vec4(pow(col, vec3(1. / 2.2)), 1);
+  }`;
+  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; };
+  const prog = fs => {
+    const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, QUAD)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs)); gl.bindAttribLocation(p, 0, 'p'); gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));
+    const u = {}; for (let i = 0, n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS); i < n; i++) { const nm = gl.getActiveUniform(p, i).name; u[nm] = gl.getUniformLocation(p, nm); }
+    return { p, u };
+  };
+  const glowP = prog(glowFS), showP = prog(showFS);
+  const quad = gl.createVertexArray(); gl.bindVertexArray(quad);
+  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 target = () => {
+    const t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, GS, GS, 0, gl.RGBA, gl.HALF_FLOAT, null);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0);
+    gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); return { t, fb };
+  };
+  let A = target(), B = target();
+  let W = 1, H = 1;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = canvas.width = Math.max(1, (stage.clientWidth * d) | 0); H = canvas.height = Math.max(1, (stage.clientHeight * d) | 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  // camera: standing on the beach, 2.2 m up, looking out to sea and a little down
+  const CH = 2.2, PITCH = 0.2, FOC = 2.2;
+  const ptr = { x: 0, z: 0, s: 0, on: false };
+  const move = e => {
+    const r = canvas.getBoundingClientRect(), qx = (((e.clientX - r.left) / r.width) * 2 - 1) * (r.width / r.height), qy = 1 - ((e.clientY - r.top) / r.height) * 2;
+    const cp = Math.cos(PITCH), sp = Math.sin(PITCH), dy = qy * cp - FOC * sp, dz = qy * sp + FOC * cp;
+    if (dy >= -0.001) { ptr.on = false; return; }
+    const t = CH / -dy; ptr.x = qx * t; ptr.z = dz * t; ptr.on = true;
+  };
+  const leave = () => { ptr.on = false; };
+  canvas.addEventListener('pointermove', move); canvas.addEventListener('pointerleave', leave);
+
+  let raf, last = performance.now(), t = 0;
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now; t += dt;
+    ptr.s += ((ptr.on ? 1 : 0) - ptr.s) * Math.min(1, dt * 8);
+    gl.bindVertexArray(quad);
+    gl.useProgram(glowP.p); gl.bindFramebuffer(gl.FRAMEBUFFER, B.fb); gl.viewport(0, 0, GS, GS);
+    gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, A.t); gl.uniform1i(glowP.u.G, 0);
+    gl.uniform1f(glowP.u.T, t); gl.uniform1f(glowP.u.WV, PARAMS.waves); gl.uniform1f(glowP.u.DT, dt); gl.uniform3f(glowP.u.P, ptr.x, ptr.z, ptr.s);
+    gl.drawArrays(gl.TRIANGLES, 0, 3); [A, B] = [B, A];
+    gl.useProgram(showP.p); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, W, H);
+    gl.bindTexture(gl.TEXTURE_2D, A.t); gl.uniform1i(showP.u.G, 0); gl.uniform2f(showP.u.R, W, H);
+    gl.uniform1f(showP.u.T, t); gl.uniform1f(showP.u.WV, PARAMS.waves); gl.uniform1f(showP.u.CH, CH); gl.uniform1f(showP.u.PITCH, PITCH); gl.uniform1f(showP.u.FOC, FOC);
+    gl.uniform1f(showP.u.K, PARAMS.glow); gl.uniform1f(showP.u.SP, PARAMS.sparkle);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', move); canvas.removeEventListener('pointerleave', leave); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/flow/calligraphy.js

@@ -0,0 +1,116 @@
+// Calligraphy: a brush writes 永 (eternity), the character students practise because it holds the eight basic
+// strokes. The brush is forty bristles in a teardrop footprint that turns with the stroke and grows with pressure.
+// Each bristle carries its own ink and lays it down as it moves, so as a stroke runs long the outer bristles run dry
+// first and leave the streaked "flying white" (飛白). Where the brush slows, at a turn or the end of a stroke, ink
+// pools darker; a quick flick lifts it to a sharp point. Then the seal goes on, and a fresh sheet.
+const PARAMS = { pressure: 1, ink: 1, speed: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block;background:#efe9dc';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 1, H = 1, paper = null, ink = null, ig = null, box = { x: 0, y: 0, s: 1 };
+  const resize = () => {
+    const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth || 1; H = stage.clientHeight || 1;
+    canvas.width = Math.max(1, (W * d) | 0); canvas.height = Math.max(1, (H * d) | 0); ctx.setTransform(d, 0, 0, d, 0, 0);
+    // rice paper: warm, a little uneven, with fibres
+    paper = document.createElement('canvas'); paper.width = canvas.width; paper.height = canvas.height;
+    const g = paper.getContext('2d'); g.setTransform(d, 0, 0, d, 0, 0); g.fillStyle = '#efe9dc'; g.fillRect(0, 0, W, H);
+    for (let i = 0; i < W * H / 40; i++) { g.fillStyle = `rgba(${Math.random() < 0.5 ? '160,140,110' : '255,252,245'},${Math.random() * 0.05})`; g.fillRect(Math.random() * W, Math.random() * H, 1 + Math.random() * 2, 1 + Math.random() * 2); }
+    g.lineWidth = 0.6; for (let i = 0; i < W * H / 900; i++) { const x = Math.random() * W, y = Math.random() * H, a = Math.random() * 6.28, l = 6 + Math.random() * 18; g.strokeStyle = `rgba(150,130,100,${0.05 + Math.random() * 0.07})`; g.beginPath(); g.moveTo(x, y); g.quadraticCurveTo(x + Math.cos(a + 0.5) * l * 0.5, y + Math.sin(a + 0.5) * l * 0.5, x + Math.cos(a) * l, y + Math.sin(a) * l); g.stroke(); }
+    ink = document.createElement('canvas'); ink.width = canvas.width; ink.height = canvas.height; ig = ink.getContext('2d'); ig.setTransform(d, 0, 0, d, 0, 0);
+    const s = Math.min(W, H) * 0.78; box = { x: (W - s) / 2 - s * 0.05, y: (H - s) / 2, s };
+    restart();
+  };
+
+  // 永, stroke by stroke: points are [x, y, pressure] in a unit square, y downward
+  const STROKES = [
+    [[0.46, 0.06, 0.25], [0.5, 0.11, 0.85], [0.54, 0.17, 0.75], [0.53, 0.19, 0.2]],                                               // 點 the dot
+    [[0.31, 0.29, 0.5], [0.42, 0.275, 0.55], [0.53, 0.265, 0.6], [0.56, 0.3, 0.95], [0.545, 0.45, 0.7], [0.545, 0.68, 0.72], [0.55, 0.86, 0.85], [0.52, 0.9, 0.7], [0.44, 0.84, 0.05]],   // 橫折鉤 across, down, hook
+    [[0.17, 0.46, 0.45], [0.3, 0.45, 0.5], [0.4, 0.44, 0.7], [0.36, 0.52, 0.65], [0.27, 0.63, 0.5], [0.12, 0.76, 0.06]],            // 橫撇 across, then sweep down-left
+    [[0.81, 0.36, 0.7], [0.74, 0.43, 0.6], [0.65, 0.5, 0.35], [0.61, 0.53, 0.08]],                                                   // 撇 the short throw
+    [[0.6, 0.5, 0.35], [0.68, 0.6, 0.55], [0.77, 0.72, 0.85], [0.86, 0.8, 1], [0.92, 0.82, 0.55], [0.99, 0.83, 0.04]],                 // 捺 the long press and release
+  ];
+  const cat = (a, b, c, d, t) => 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t * t + (-a + 3 * b - 3 * c + d) * t * t * t);
+  // sample each stroke densely, with a little hand wobble so no two sheets are the same
+  let paths = [];
+  function prepare() {
+    paths = STROKES.map(k => {
+      const pts = k.map(([x, y, p]) => [x + (Math.random() - 0.5) * 0.012, y + (Math.random() - 0.5) * 0.012, p]);
+      const out = [];
+      for (let i = 0; i < pts.length - 1; i++) {
+        const a = pts[Math.max(0, i - 1)], b = pts[i], c = pts[i + 1], d = pts[Math.min(pts.length - 1, i + 2)];
+        for (let s = 0; s < 24; s++) { const t = s / 24; out.push([cat(a[0], b[0], c[0], d[0], t), cat(a[1], b[1], c[1], d[1], t), Math.max(0.02, cat(a[2], b[2], c[2], d[2], t))]); }
+      }
+      out.push(pts[pts.length - 1]);
+      let L = 0; for (let i = 1; i < out.length; i++) { L += Math.hypot(out[i][0] - out[i - 1][0], out[i][1] - out[i - 1][1]); out[i].push(L); } out[0].push(0);
+      return out;
+    });
+  }
+  const NB = 40;
+  const bristles = Array.from({ length: NB }, (_, i) => {
+    const a = Math.random() * 6.283, r = Math.sqrt(Math.random());
+    return { ox: Math.cos(a) * r, oy: Math.sin(a) * r, edge: r, ink: 1, px: 0, py: 0, on: false, w: 0.7 + Math.random() * 0.6 };
+  });
+  let si = 0, sd = 0, state = 'write', stateT = 0, seal = 0;
+  function restart() { ig.clearRect(0, 0, W, H); prepare(); si = 0; sd = 0; state = 'write'; stateT = 0; seal = 0; dip(); }
+  function dip() { for (const b of bristles) { b.ink = PARAMS.ink * (1.1 - b.edge * 0.35) * (0.85 + Math.random() * 0.3); b.on = false; } }
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  // where the brush is along the current stroke, at arc length s
+  const at = (path, s) => {
+    let i = 1; while (i < path.length - 1 && path[i][3] < s) i++;
+    const a = path[i - 1], b = path[i], k = Math.min(1, Math.max(0, (s - a[3]) / Math.max(1e-6, b[3] - a[3])));
+    return [a[0] + (b[0] - a[0]) * k, a[1] + (b[1] - a[1]) * k, a[2] + (b[2] - a[2]) * k, Math.atan2(b[1] - a[1], b[0] - a[0])];
+  };
+  function brushTo(x, y, p, dir, speed) {
+    const R = box.s * 0.068 * p * PARAMS.pressure, X = box.x + x * box.s, Y = box.y + y * box.s;
+    const c = Math.cos(dir), s = Math.sin(dir), slow = Math.min(2.2, 0.35 / Math.max(0.05, speed));   // slow brush: more ink soaks in
+    for (const b of bristles) {
+      // the footprint is a teardrop trailing behind the tip: long along the stroke, as wide as the pressure
+      const along = b.ox * R * 0.75 - R * 0.25, across = b.oy * R;
+      const bx = X + c * along - s * across, by = Y + s * along + c * across;
+      if (b.on && b.ink > 0.02) {
+        const dist = Math.hypot(bx - b.px, by - b.py), a = Math.min(0.9, b.ink * 0.5 * (0.6 + 0.4 * slow));
+        ig.strokeStyle = `rgba(18,16,17,${a})`; ig.lineWidth = Math.max(0.8, R * 0.2 * b.w);
+        ig.beginPath(); ig.moveTo(b.px, b.py); ig.lineTo(bx, by); ig.stroke();
+        if (b.ink > 0.4 && Math.random() < 0.15) { ig.fillStyle = `rgba(18,16,17,${0.04 * slow})`; ig.beginPath(); ig.arc(bx, by, R * 0.35, 0, 7); ig.fill(); }   // wet ink feathers into the paper
+        b.ink -= dist / box.s * (0.45 + b.edge * 1.5) * (0.8 + Math.random() * 0.4);   // edge bristles run dry first
+      }
+      b.px = bx; b.py = by; b.on = true;
+    }
+  }
+
+  let raf, last = performance.now();
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000) * PARAMS.speed; last = now; stateT += dt;
+    if (state === 'write') {
+      const path = paths[si], L = path[path.length - 1][3];
+      // speed along the stroke: settle in slowly, run through the middle, slow again into the end (except flicks)
+      const u = sd / L, flick = path[path.length - 1][2] < 0.1;
+      const v = 0.35 * (0.35 + Math.sin(Math.PI * Math.min(1, u * 1.05)) * (flick && u > 0.7 ? 2.6 : 1.4));
+      const steps = 6, ds = (v * dt) / steps;
+      for (let k = 0; k < steps && sd < L; k++) { sd = Math.min(L, sd + ds); const [x, y, p, dir] = at(path, sd); brushTo(x, y, p, dir, v); }
+      if (sd >= L) { si++; sd = 0; stateT = 0; for (const b of bristles) b.on = false; if (si >= paths.length) { state = 'seal'; } else { state = 'lift'; dip(); } }   // back to the inkstone between strokes
+    } else if (state === 'lift' && stateT > 0.32) { state = 'write'; stateT = 0; }
+    else if (state === 'seal') { seal = Math.min(1, stateT / 0.25); if (stateT > 4.2) { state = 'fade'; stateT = 0; } }
+    else if (state === 'fade' && stateT > 1) restart();
+
+    ctx.globalAlpha = 1; ctx.drawImage(paper, 0, 0, W, H);
+    ctx.globalAlpha = state === 'fade' ? 1 - stateT : 1; ctx.drawImage(ink, 0, 0, W, H);
+    if (seal > 0) {                                                // the red seal, pressed in at the lower right
+      const s = box.s * 0.1, x = box.x + box.s * 1.13, y = box.y + box.s * 0.95, k = 1 + (1 - seal) * 0.25;
+      ctx.save(); ctx.translate(x, y); ctx.scale(k, k); ctx.globalAlpha *= seal * 0.92;
+      ctx.fillStyle = '#b3261e'; ctx.beginPath(); ctx.roundRect(-s / 2, -s / 2, s, s, s * 0.08); ctx.fill();
+      ctx.strokeStyle = '#efe9dc'; ctx.lineWidth = s * 0.07; ctx.lineCap = 'square';
+      const g = [[-0.3, -0.3, 0.3, -0.3], [0, -0.3, 0, 0.32], [-0.3, 0, 0.3, 0], [-0.3, 0.32, -0.05, 0.12], [0.3, 0.32, 0.05, 0.12]];   // carved lines
+      ctx.beginPath(); for (const [a, b, c, d] of g) { ctx.moveTo(a * s, b * s); ctx.lineTo(c * s, d * s); } ctx.stroke();
+      ctx.restore();
+    }
+    ctx.globalAlpha = 1;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/flow/chladni.js

@@ -0,0 +1,152 @@
+// Chladni plate: a square brass plate bolted at its centre to a speaker, with sixty-five thousand grains of sand on
+// it. The tone sweeps slowly upward. Near each of the plate's resonant frequencies one standing wave dominates; the
+// plate buzzes everywhere except along its nodal lines, so the sand is bounced off the moving parts and comes to rest
+// on the still ones, drawing the figure Ernst Chladni showed in 1787. Between resonances two modes mix and the sand
+// drifts from one figure toward the next. The grains live on the GPU: each frame every one hops by however hard its
+// spot is shaking, and slides a little downhill toward stillness.
+const PARAMS = { grains: 256, sweep: 1, shake: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
+  const label = document.createElement('div');
+  label.style.cssText = 'position:absolute;left:14px;bottom:12px;font:500 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(235,225,205,.6);letter-spacing:.04em;pointer-events:none';
+  stage.append(canvas, label);
+  const gl = canvas.getContext('webgl2', { antialias: false });
+  if (!gl || !gl.getExtension('EXT_color_buffer_float')) { stage.textContent = 'This needs WebGL2 with float render targets.'; return () => canvas.remove(); }
+  const G = Math.max(64, Math.round(PARAMS.grains)), COUNT = G * G;
+  // the plate's modes: (n, m, sign), in rising frequency; frequency grows with n² + m²
+  const MODES = [[1, 2, -1], [2, 2, 1], [1, 3, 1], [2, 3, -1], [1, 4, -1], [3, 3, 1], [2, 4, 1], [3, 4, -1], [1, 5, 1], [2, 5, -1], [4, 4, 1], [3, 5, 1], [4, 5, -1], [2, 6, 1], [5, 5, 1], [4, 6, -1], [3, 7, 1], [5, 6, -1], [6, 6, 1], [5, 7, 1]];
+  const FREQ = MODES.map(([n, m]) => 62 * (n * n + m * m));
+  const K = MODES.length;
+  const WAVE = `
+  uniform vec3 MD[${K}]; uniform float WT[${K}];
+  // the plate's shape right now: each mode's standing wave, weighted by how close the tone is to its resonance
+  float wave(vec2 p) {                                           // p in −1..1
+    float s = 0.;
+    for (int k = 0; k < ${K}; k++) {
+      if (WT[k] < .003) continue;
+      vec2 a = MD[k].xy * 1.5707963;
+      s += WT[k] * (cos(a.x * p.x) * cos(a.y * p.y) + MD[k].z * cos(a.y * p.x) * cos(a.x * p.y));
+    }
+    return s;
+  }`;
+  const QUAD = `#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, 0, 1); }`;
+  // the sand: hop by the shaking, slide toward stillness, stay on the plate
+  const sandFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D S; uniform float F, SH;
+  ${WAVE}
+  vec2 h2(vec2 p) { vec3 q = fract(vec3(p.xyx) * vec3(.1031, .103, .0973)); q += dot(q, q.yzx + 33.33); return fract((q.xx + q.yz) * q.zy); }
+  void main() {
+    vec2 p = texture(S, uv).xy;
+    float a = abs(wave(p)), e = .004;
+    vec2 g = vec2(abs(wave(p + vec2(e, 0))) - abs(wave(p - vec2(e, 0))), abs(wave(p + vec2(0, e))) - abs(wave(p - vec2(0, e)))) / (2. * e);
+    vec2 r = h2(gl_FragCoord.xy + F * 13.7) - .5;
+    p += r * (min(a, 1.4) * .02 + .0035) * SH - g * .0007 * SH;   // a floor of jitter: real grains have size, so lines have width
+    p = clamp(p, -.985, .985);
+    o = vec4(p, 0, 1);
+  }`;
+  // the plate: brushed brass under a soft studio light, with a bevelled edge and the bolt at its heart
+  const plateFS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform vec2 R; uniform float PS, T;
+  ${WAVE}
+  float h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+  float n2(vec2 p) { vec2 i = floor(p), f = fract(p); f = f * f * (3. - 2. * f); return mix(mix(h(i), h(i + vec2(1, 0)), f.x), mix(h(i + vec2(0, 1)), h(i + 1.), f.x), f.y); }
+  void main() {
+    vec2 q = (uv * R - R * .5) / (PS * .5);                        // plate units: −1..1 across the plate
+    vec3 bg = vec3(.07, .068, .066) * (1. - .45 * length(uv - .5));
+    vec2 sd = abs(q - vec2(.035, -.05)) - 1.; float shadow = smoothstep(.12, -.02, max(sd.x, sd.y));
+    bg *= 1. - .6 * shadow;
+    float edge = max(abs(q.x), abs(q.y));
+    vec3 col = bg;
+    if (edge < 1.) {
+      float brushed = n2(vec2(q.x * 3., q.y * 260.)) * .5 + n2(vec2(q.x * 9., q.y * 900.)) * .5;
+      vec3 brass = vec3(.74, .55, .27) * (.82 + .25 * brushed);
+      float light = .55 + .45 * smoothstep(1.6, -.6, length(q - vec2(-.5, .55)));   // a big soft light from the upper left
+      float sheen = exp(-pow((q.x + q.y * .6 - .35) * 1.8, 2.)) * .35;              // and its long reflection
+      col = brass * light + vec3(1., .86, .6) * sheen;
+      col *= 1. + .05 * abs(wave(q)) * sin(T * 90.);              // the buzz, barely visible
+      float bevel = smoothstep(.975, 1., edge);
+      col = mix(col, col * .55, bevel) + vec3(1., .9, .7) * .25 * smoothstep(.96, .975, edge) * (1. - bevel);
+      float bolt = length(q);
+      col = mix(col, vec3(.2, .19, .18), smoothstep(.055, .045, bolt));
+      col += vec3(.7) * smoothstep(.045, .03, length(q - vec2(-.012, .014))) * smoothstep(.0, .03, bolt) * .4;
+    }
+    o = vec4(pow(col, vec3(.95)), 1);
+  }`;
+  // each grain: a little sand-coloured disc with its shadow drawn first, so the pattern has relief
+  const grainVS = `#version 300 es
+  uniform sampler2D S; uniform int G; uniform vec2 R; uniform float PS, SZ, SHADOW;
+  out float k;
+  void main() {
+    int i = gl_VertexID; vec2 p = texelFetch(S, ivec2(i % G, i / G), 0).xy;
+    vec2 px = p * PS * .5 + SHADOW * vec2(.9, -1.1);
+    gl_Position = vec4(px / (R * .5), 0, 1); gl_PointSize = SZ; k = fract(sin(float(i) * 12.9898) * 43758.5453);
+  }`;
+  const grainFS = `#version 300 es
+  precision highp float; in float k; out vec4 o; uniform float SHADOW;
+  void main() { vec2 q = gl_PointCoord * 2. - 1.; if (dot(q, q) > 1.) discard;
+    o = SHADOW > 0. ? vec4(0, 0, 0, .18) : vec4(mix(vec3(.86, .8, .66), vec3(.98, .95, .86), k) * (1. - .25 * q.y * -1.), 1); }`;
+
+  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; };
+  const prog = (vs, fs) => {
+    const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs)); gl.bindAttribLocation(p, 0, 'p'); gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));
+    const u = {}; for (let i = 0, n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS); i < n; i++) { const nm = gl.getActiveUniform(p, i).name.replace('[0]', ''); u[nm] = gl.getUniformLocation(p, nm); }
+    return { p, u };
+  };
+  const sandP = prog(QUAD, sandFS), plateP = prog(QUAD, plateFS), grainP = prog(grainVS, grainFS);
+  const quad = gl.createVertexArray(); gl.bindVertexArray(quad);
+  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 empty = gl.createVertexArray();
+  const init = new Float32Array(COUNT * 4); for (let i = 0; i < COUNT; i++) init.set([Math.random() * 1.96 - 0.98, Math.random() * 1.96 - 0.98, 0, 1], i * 4);   // sprinkled evenly
+  const tgt = () => {
+    const t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, G, G, 0, gl.RGBA, gl.FLOAT, init);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t, 0); return { t, fb };
+  };
+  let A = tgt(), B = tgt();
+  let W = 1, H = 1;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = canvas.width = Math.max(1, (stage.clientWidth * d) | 0); H = canvas.height = Math.max(1, (stage.clientHeight * d) | 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  const md = new Float32Array(K * 3); MODES.forEach((m, i) => md.set(m, i * 3));
+  const wt = new Float32Array(K);
+  let raf, last = performance.now(), t = 0, frameNo = 0, shown = '';
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now; t += dt; frameNo++;
+    // the tone: a slow upward sweep that lingers near each resonance, then starts over
+    const span = FREQ.length, pos = (t * 0.11 * PARAMS.sweep + 7) % span,   // start partway up, where the figures get intricate
+      k0 = Math.floor(pos), frac = pos - k0;
+    const linger = frac < 0.62 ? 0 : (frac - 0.62) / 0.38, ease = linger * linger * (3 - 2 * linger);
+    const f = FREQ[k0] * Math.pow(FREQ[(k0 + 1) % span] / FREQ[k0], k0 + 1 < span ? ease : 0);
+    let sum = 0; for (let k = 0; k < K; k++) { const x = (f - FREQ[k]) / (FREQ[k] * 0.06); wt[k] = 1 / (1 + x * x); sum += wt[k]; }
+    for (let k = 0; k < K; k++) wt[k] /= Math.max(1, sum * 0.85);
+    const top = wt.indexOf(Math.max(...wt));
+    const txt = `${Math.round(f).toLocaleString('en-US')} Hz   mode ${MODES[top][0]},${MODES[top][1]}`;
+    if (txt !== shown) { label.textContent = txt; shown = txt; }
+    const PS = Math.min(W, H) * 0.86;
+    const setWave = P => { gl.uniform3fv(P.u.MD, md); gl.uniform1fv(P.u.WT, wt); };
+    gl.disable(gl.BLEND); gl.bindVertexArray(quad);
+    for (let s = 0; s < 2; s++) {
+      gl.useProgram(sandP.p); gl.bindFramebuffer(gl.FRAMEBUFFER, B.fb); gl.viewport(0, 0, G, G);
+      gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, A.t); gl.uniform1i(sandP.u.S, 0); gl.uniform1f(sandP.u.F, (frameNo * 2 + s) % 997); gl.uniform1f(sandP.u.SH, PARAMS.shake); setWave(sandP);
+      gl.drawArrays(gl.TRIANGLES, 0, 3); [A, B] = [B, A];
+    }
+    gl.useProgram(plateP.p); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, W, H);
+    gl.uniform2f(plateP.u.R, W, H); gl.uniform1f(plateP.u.PS, PS); gl.uniform1f(plateP.u.T, t); setWave(plateP);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+    gl.useProgram(grainP.p); gl.bindVertexArray(empty); gl.bindTexture(gl.TEXTURE_2D, A.t);
+    gl.uniform1i(grainP.u.S, 0); gl.uniform1i(grainP.u.G, G); gl.uniform2f(grainP.u.R, W, H); gl.uniform1f(grainP.u.PS, PS);
+    const sz = Math.max(1.3, PS / 300);
+    gl.uniform1f(grainP.u.SZ, sz * 1.15); gl.uniform1f(grainP.u.SHADOW, sz); gl.drawArrays(gl.POINTS, 0, COUNT);   // shadows
+    gl.uniform1f(grainP.u.SZ, sz); gl.uniform1f(grainP.u.SHADOW, 0); gl.drawArrays(gl.POINTS, 0, COUNT);
+    gl.disable(gl.BLEND);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); label.remove(); };
+}