motion-library 0.0.0-stage → 0.1.0

package/anims/chrome/dust-bust.js

@@ -0,0 +1,109 @@
+// Dust to the wind: a marble bust made of a hundred and fifty thousand points, each sitting on the surface with its own normal so
+// it lights like stone. A dissolving front sweeps across it from one shoulder; every point the front passes flares
+// like an ember, breaks loose and is carried off by a swirling wind, cooling to grey dust. Then the dust is called
+// back along curving paths and the bust stands whole again. The surface is sampled from simple shapes (an egg of a
+// head, a nose, a brow, ears, a bun of hair, a neck, shoulders), keeping only the points no other shape covers.
+const PARAMS = { points: 150000, wind: 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';
+  stage.append(canvas);
+  const gl = canvas.getContext('webgl2', { antialias: true });
+  if (!gl) { stage.textContent = 'This needs WebGL2.'; return () => canvas.remove(); }
+  const N = Math.max(10000, Math.round(PARAMS.points));
+  // the bust's parts: ellipsoids [cx, cy, cz, rx, ry, rz], each sampled on its surface
+  const PARTS = [[0, 1.0, 0, 0.46, 0.66, 0.52, 4], [0, 0.97, 0.5, 0.07, 0.17, 0.11, 0.25], [0, 1.2, 0.33, 0.34, 0.05, 0.13, 0.15], [0.45, 1.02, -0.02, 0.07, 0.16, 0.11, 0.22], [-0.45, 1.02, -0.02, 0.07, 0.16, 0.11, 0.22],
+    [0, 1.52, -0.36, 0.3, 0.27, 0.27, 0.8], [0, 0.3, -0.02, 0.25, 0.45, 0.24, 1.1], [0, -0.42, -0.05, 1.15, 0.5, 0.48, 3.2]];
+  const inside = (x, y, z, skip) => PARTS.some((p, i) => i !== skip && ((x - p[0]) / p[3]) ** 2 + ((y - p[1]) / p[4]) ** 2 + ((z - p[2]) / p[5]) ** 2 < 0.985);
+  const home = new Float32Array(N * 3), nrm = new Float32Array(N * 3);
+  const total = PARTS.reduce((a, p) => a + p[6], 0);
+  for (let k = 0; k < N;) {
+    let r = Math.random() * total, pi = 0; while (r > PARTS[pi][6]) { r -= PARTS[pi][6]; pi++; }
+    const p = PARTS[pi], u = Math.random() * 2 - 1, a = Math.random() * 6.283, s = Math.sqrt(1 - u * u);
+    const ux = Math.cos(a) * s, uy = u, uz = Math.sin(a) * s, x = p[0] + ux * p[3], y = p[1] + uy * p[4], z = p[2] + uz * p[5];
+    if (inside(x, y, z, pi) || (pi === 7 && y < -0.62)) continue;   // hidden inside another part, or below the cut of the chest
+    let nx = ux / p[3], ny = uy / p[4], nz = uz / p[5]; const l = Math.hypot(nx, ny, nz);
+    home.set([x, y, z], k * 3); nrm.set([nx / l, ny / l, nz / l], k * 3); k++;
+  }
+  const pos = new Float32Array(home), vel = new Float32Array(N * 3), free = new Float32Array(N), seed = Float32Array.from({ length: N }, () => Math.random());
+
+  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s)); return s; };
+  const prog = (vs, fs) => {
+    const p = gl.createProgram(); gl.attachShader(p, sh(gl.VERTEX_SHADER, vs)); gl.attachShader(p, sh(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(p));
+    const u = {}; for (let i = 0, n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS); i < n; i++) { const nm = gl.getActiveUniform(p, i).name; u[nm] = gl.getUniformLocation(p, nm); }
+    return { p, u };
+  };
+  const ptP = prog(`#version 300 es
+  layout(location = 0) in vec3 P; layout(location = 1) in vec3 Nn; layout(location = 2) in float Fr;
+  uniform mat4 M; uniform float PS; out vec3 col;
+  void main() {
+    gl_Position = M * vec4(P, 1);
+    vec3 L = normalize(vec3(-.55, .6, .6)), rim = normalize(vec3(.8, .3, -.6));
+    float dif = max(dot(Nn, L), 0.), back = pow(max(dot(Nn, rim), 0.), 3.);
+    vec3 marble = vec3(.93, .9, .85) * (.16 + .84 * dif) + vec3(.5, .62, .8) * back * .5;
+    vec3 ember = vec3(1., .55, .2) * 1.6, dust = vec3(.42, .4, .38);
+    col = Fr <= 0. ? marble : mix(ember, dust, smoothstep(0., .6, Fr)) * (1. - smoothstep(1.6, 3., Fr) * .8);
+    gl_PointSize = PS * (Fr > 0. ? 1. - .5 * smoothstep(0., 2., Fr) : 1.);
+  }`, `#version 300 es
+  precision mediump float; in vec3 col; out vec4 o; void main() { vec2 q = gl_PointCoord * 2. - 1.; if (dot(q, q) > 1.) discard; o = vec4(pow(col, vec3(1. / 2.2)), 1); }`);
+  const bgP = prog(`#version 300 es
+  layout(location = 0) in vec2 p; out vec2 v; void main() { v = p; gl_Position = vec4(p, .9999, 1); }`, `#version 300 es
+  precision highp float; in vec2 v; out vec4 o; void main() { vec3 c = mix(vec3(.11, .1, .1), vec3(.025, .024, .026), length(v * vec2(.65, 1.)) * .9); o = vec4(c, 1); }`);
+  const vao = gl.createVertexArray(); gl.bindVertexArray(vao);
+  const pb = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, pb); gl.bufferData(gl.ARRAY_BUFFER, pos.byteLength, gl.DYNAMIC_DRAW); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, nrm, gl.STATIC_DRAW); gl.enableVertexAttribArray(1); gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
+  const fb = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, fb); gl.bufferData(gl.ARRAY_BUFFER, free.byteLength, gl.DYNAMIC_DRAW); gl.enableVertexAttribArray(2); gl.vertexAttribPointer(2, 1, gl.FLOAT, false, 0, 0);
+  const qv = gl.createVertexArray(); gl.bindVertexArray(qv); 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);
+  gl.bindVertexArray(null);
+
+  let W = 1, H = 1;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = canvas.width = Math.max(1, (stage.clientWidth * d) | 0); H = canvas.height = Math.max(1, (stage.clientHeight * d) | 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  const matrix = t => {
+    const az = 0.45 + 0.25 * Math.sin(t * 0.15), el = 0.12, dist = 5.2, E = [Math.sin(az) * Math.cos(el) * dist, 0.75 + Math.sin(el) * dist, Math.cos(az) * Math.cos(el) * dist], T = [0, 0.62, 0];
+    const f = T.map((v, i) => v - E[i]), fl = Math.hypot(...f); for (let i = 0; i < 3; i++) f[i] /= fl;
+    const rl = Math.hypot(f[2], f[0]), r = [-f[2] / rl, 0, f[0] / rl], u = [r[1] * f[2] - r[2] * f[1], r[2] * f[0] - r[0] * f[2], r[0] * f[1] - r[1] * f[0]];
+    const V = [r[0], u[0], -f[0], 0, r[1], u[1], -f[1], 0, r[2], u[2], -f[2], 0, -(r[0] * E[0] + r[1] * E[1] + r[2] * E[2]), -(u[0] * E[0] + u[1] * E[1] + u[2] * E[2]), f[0] * E[0] + f[1] * E[1] + f[2] * E[2], 1];
+    const F = 1 / Math.tan(0.36), A = W / H, n = 0.1, fa = 60, nf = 1 / (n - fa), P = [F / A, 0, 0, 0, 0, F, 0, 0, 0, 0, (fa + n) * nf, -1, 0, 0, 2 * fa * n * nf, 0], out = new Float32Array(16);
+    for (let c = 0; c < 4; c++) for (let rr = 0; rr < 4; rr++) { let s = 0; for (let k = 0; k < 4; k++) s += P[k * 4 + rr] * V[c * 4 + k]; out[c * 4 + rr] = s; }
+    return out;
+  };
+  let raf, last = performance.now(), t = 0, phase = 0;
+  function frame(now) {
+    const dt = Math.min(0.04, (now - last) / 1000) * PARAMS.speed; last = now; t += dt;
+    // a cycle: whole (2.5 s), the front sweeps across (4.5 s), dust drifts (2 s), called back (3 s)
+    const c = t % 12;
+    const front = c < 2.5 ? -3 : c < 7 ? -1.6 + ((c - 2.5) / 4.5) * 3.6 : 3;          // position of the dissolving plane along (1, .5, .3)
+    const back = c > 9 ? Math.min(1, (c - 9) / 2.6) : 0;
+    for (let i = 0; i < N; i++) {
+      const i3 = i * 3, hx = home[i3], hy = home[i3 + 1], hz = home[i3 + 2];
+      if (back > 0) {                                              // called home: ease back along a curve
+        const e = back * back * (3 - 2 * back), sw = Math.sin(e * Math.PI) * 0.6 * (seed[i] - 0.5);
+        pos[i3] += (hx + sw - pos[i3]) * Math.min(1, e * 0.25 + 0.02); pos[i3 + 1] += (hy - pos[i3 + 1]) * Math.min(1, e * 0.25 + 0.02); pos[i3 + 2] += (hz - pos[i3 + 2]) * Math.min(1, e * 0.25 + 0.02);
+        free[i] = Math.max(0, free[i] - dt * 2); if (back >= 1) { pos[i3] = hx; pos[i3 + 1] = hy; pos[i3 + 2] = hz; free[i] = 0; vel[i3] = vel[i3 + 1] = vel[i3 + 2] = 0; }
+        continue;
+      }
+      if (free[i] <= 0) {
+        const s = hx * 0.82 + hy * 0.45 + hz * 0.3 + (seed[i] - 0.5) * 0.25 + Math.sin(hy * 9 + hx * 7) * 0.06;
+        if (s < front) { free[i] = 0.001; vel[i3] = 0.2; vel[i3 + 1] = 0.25; vel[i3 + 2] = 0; }
+        continue;
+      }
+      // the wind: a swirling field that carries the dust off to the left and up
+      const x = pos[i3], y = pos[i3 + 1], z = pos[i3 + 2], wnd = PARAMS.wind;
+      const ax = (-1.2 + Math.sin(y * 2.3 + t * 0.9) * 0.9 + Math.cos(z * 1.7 - t) * 0.5) * wnd, ay = (0.45 + Math.sin(x * 1.9 + t * 0.7) * 0.6) * wnd, az = Math.sin(x * 1.3 + y * 1.1 + t) * 0.8 * wnd;
+      vel[i3] += (ax - vel[i3]) * dt * 1.6; vel[i3 + 1] += (ay - vel[i3 + 1]) * dt * 1.6; vel[i3 + 2] += (az - vel[i3 + 2]) * dt * 1.6;
+      pos[i3] += vel[i3] * dt; pos[i3 + 1] += vel[i3 + 1] * dt; pos[i3 + 2] += vel[i3 + 2] * dt;
+      free[i] += dt;
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.viewport(0, 0, W, H); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    gl.enable(gl.DEPTH_TEST); gl.useProgram(bgP.p); gl.bindVertexArray(qv); gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.useProgram(ptP.p); gl.uniformMatrix4fv(ptP.u.M, false, matrix(t)); gl.uniform1f(ptP.u.PS, Math.max(1.6, H / 300) * Math.sqrt(150000 / N));
+    gl.bindVertexArray(vao); gl.bindBuffer(gl.ARRAY_BUFFER, pb); gl.bufferSubData(gl.ARRAY_BUFFER, 0, pos); gl.bindBuffer(gl.ARRAY_BUFFER, fb); gl.bufferSubData(gl.ARRAY_BUFFER, 0, free);
+    gl.drawArrays(gl.POINTS, 0, N); gl.bindVertexArray(null); gl.disable(gl.DEPTH_TEST);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove(); };
+}

package/anims/chrome/extruded-type.js

@@ -0,0 +1,64 @@
+// Extruded type: a word drawn once into a mask, then stacked back to front as dozens of layers. Each layer is
+// placed by the same 3D rotation (an exact orthographic projection is just a 2D affine transform), so the
+// stack reads as solid letters with depth. The face gets a moving chrome sweep; the sides darken with depth.
+const PARAMS = { depth: 1, layers: 36, tilt: 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, mask, side, sideLit, face, mw = 0, mh = 0;
+  const WORD = 'DEPTH';
+  function build() {
+    const fs = Math.min(W * 0.19, H * 0.36);
+    mask = document.createElement('canvas'); const m = mask.getContext('2d');
+    m.font = `900 ${fs}px "Mona Sans", system-ui, sans-serif`;
+    mw = Math.ceil(m.measureText(WORD).width + fs * 0.2); mh = Math.ceil(fs * 1.1);
+    mask.width = mw; mask.height = mh;
+    m.font = `900 ${fs}px "Mona Sans", system-ui, sans-serif`; m.fontStretch = 'expanded';
+    m.textAlign = 'center'; m.textBaseline = 'middle'; m.fillStyle = '#fff'; m.fillText(WORD, mw / 2, mh * 0.53);
+    const tint = c => { const k = document.createElement('canvas'); k.width = mw; k.height = mh; const g = k.getContext('2d'); g.drawImage(mask, 0, 0); g.globalCompositeOperation = 'source-in'; g.fillStyle = c; g.fillRect(0, 0, mw, mh); return k; };
+    side = tint('#2a1458'); sideLit = tint('#8b5cf6');
+    face = document.createElement('canvas'); face.width = mw; face.height = mh;
+  }
+  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); build(); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let px = 0, py = 0, lastMove = -1e9;
+  const onMove = e => { const b = canvas.getBoundingClientRect(); px = (e.clientX - b.left) / b.width * 2 - 1; py = (e.clientY - b.top) / b.height * 2 - 1; lastMove = performance.now(); };
+  canvas.addEventListener('pointermove', onMove);
+  let ry = 0, rx = 0, raf; const t0 = performance.now();
+  function frame(now) {
+    const t = (now - t0) / 1000, d = Math.min(devicePixelRatio, 2);
+    const idle = now - lastMove > 1500;
+    const ty = (idle ? Math.sin(t * 0.7) * 0.55 : px * 0.7) * PARAMS.tilt, tx = (idle ? Math.sin(t * 0.45 + 1) * 0.28 : py * 0.4) * PARAMS.tilt;
+    ry += (ty - ry) * 0.08; rx += (tx - rx) * 0.08;
+    const bg = ctx.createLinearGradient(0, 0, 0, H); bg.addColorStop(0, '#f3efe8'); bg.addColorStop(1, '#ddd5c8');
+    ctx.setTransform(d, 0, 0, d, 0, 0); ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+    // rotation (Y then X); orthographic projection of the text plane = this 2x2 matrix plus a per-layer offset
+    const cy = Math.cos(ry), sy = Math.sin(ry), cx = Math.cos(rx), sx = Math.sin(rx);
+    const a = cy, b = sx * sy, c = 0, dd = cx, ox = sy, oy = -cy * sx;           // where the x and y axes land on screen, and how far one unit of depth shifts
+    const depth = Math.min(W, H) * 0.16 * PARAMS.depth, L = Math.max(4, Math.round(PARAMS.layers));
+    // soft shadow on the "floor"
+    ctx.save(); ctx.translate(W / 2 + ry * 20, H * 0.8); ctx.scale(1, 0.18); const sg = ctx.createRadialGradient(0, 0, 0, 0, 0, mw * 0.5);
+    sg.addColorStop(0, 'rgba(60,40,90,.35)'); sg.addColorStop(1, 'rgba(60,40,90,0)'); ctx.fillStyle = sg; ctx.fillRect(-mw, -mw, mw * 2, mw * 2); ctx.restore();
+    const light = 0.5 + 0.5 * Math.sin(ry + 0.6);                                   // sides facing the light read brighter
+    for (let i = L; i >= 1; i--) {
+      const z = depth * i / L, persp = 1 - z * 0.0009 * (1 + sx);
+      ctx.setTransform(d * a * persp, d * b * persp, d * c, d * dd * persp, d * (W / 2 + ox * z), d * (H / 2 - 8 + oy * z));
+      ctx.globalAlpha = 1; ctx.drawImage(side, -mw / 2, -mh / 2);
+      ctx.globalAlpha = (1 - i / L) * 0.55 + light * 0.35; ctx.drawImage(sideLit, -mw / 2, -mh / 2);
+    }
+    // the face: chrome bands sweeping across, clipped to the letters
+    const f = face.getContext('2d'); f.globalCompositeOperation = 'source-over'; f.clearRect(0, 0, mw, mh); f.drawImage(mask, 0, 0); f.globalCompositeOperation = 'source-in';
+    const sweep = (t * 0.25 + ry * 0.4) % 1, g = f.createLinearGradient(0, 0, mw, mh * 0.6);
+    [[0, '#d9d2ff'], [0.25, '#6d4fd6'], [0.45, '#ffffff'], [0.55, '#b9a8ff'], [0.8, '#4b2fa8'], [1, '#e8e2ff']].forEach(([o, col]) => g.addColorStop((o + sweep) % 1, col));
+    f.fillStyle = g; f.fillRect(0, 0, mw, mh);
+    ctx.globalAlpha = 1; ctx.setTransform(d * a, d * b, d * c, d * dd, d * W / 2, d * (H / 2 - 8));
+    ctx.drawImage(face, -mw / 2, -mh / 2);
+    ctx.globalAlpha = 1;
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.removeEventListener('pointermove', onMove); canvas.remove(); };
+}

package/anims/chrome/fractal-tree.js

@@ -0,0 +1,75 @@
+// 3D fractal tree: a trunk that splits into three branches, each turned about the parent's axis by the golden angle
+// and tilted outward, each shorter and thinner, eight levels deep. The whole tree grows in: a branch only starts once
+// its parent is full length, with an ease-out so each one shoots then settles. Wind sways every branch by an amount
+// that grows toward the tips, blossoms open at the ends, petals drift down, and the camera circles the tree.
+const PARAMS = { depth: 7, wind: 1 };
+
+export default function (stage) {
+  const canvas = document.createElement('canvas');
+  canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:block';
+  stage.append(canvas);
+  const ctx = canvas.getContext('2d');
+  let W = 0, H = 0;
+  const resize = () => { const d = Math.min(devicePixelRatio, 2); W = stage.clientWidth || 1; H = stage.clientHeight || 1; canvas.width = W * d; canvas.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  // build the branch list once: each with a level, a parent, a direction offset and a length
+  const GA = Math.PI * (3 - Math.sqrt(5)), D = Math.round(PARAMS.depth), branches = [];
+  let seed = 7; const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
+  (function grow(parent, level, yaw, pitch, len) {
+    const b = { parent, level, yaw, pitch, len, i: branches.length }; branches.push(b);
+    if (level >= D) return;
+    for (let k = 0; k < 3; k++) grow(b, level + 1, yaw + k * 2.1 + GA * level + (rnd() - 0.5) * 0.6, 0.45 + rnd() * 0.25, len * (0.68 + rnd() * 0.1));
+  })(null, 0, 0, 0, 1);
+  const petals = Array.from({ length: 60 }, () => ({ x: (rnd() - 0.5) * 3, y: rnd() * 3, z: (rnd() - 0.5) * 3, ph: rnd() * 6.28 }));
+  const ease = x => 1 - (1 - Math.min(1, Math.max(0, x))) ** 3;
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    const t = (now - t0) / 1000, S = Math.min(W, H), cycle = 16, g = (t % cycle) * 1.6;   // grow, hold, regrow
+    const bg = ctx.createLinearGradient(0, 0, 0, H); bg.addColorStop(0, '#1b1530'); bg.addColorStop(1, '#3a2340');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = 'rgba(0,0,0,.25)'; ctx.beginPath(); ctx.ellipse(W / 2, H * 0.93, S * 0.24, S * 0.03, 0, 0, 7); ctx.fill();
+    const cam = t * 0.15, cc = Math.cos(cam), cs = Math.sin(cam);
+    const proj = p => { const x = p[0] * cc - p[2] * cs, z = p[0] * cs + p[2] * cc, k = 4 / (4 + z); return [W / 2 + x * S * 0.17 * k, H * 0.93 - p[1] * S * 0.17 * k, z, k]; };
+    // positions: walk the list (parents come first), building each branch's frame from its parent's
+    const P = new Array(branches.length), segs = [];
+    for (const b of branches) {
+      const grown = ease(g - b.level * 0.55);                                // each level waits for the one before
+      if (grown <= 0) continue;
+      const sway = Math.sin(t * 1.3 + b.level * 0.7 + b.yaw) * 0.04 * b.level * PARAMS.wind;
+      const base = b.parent ? P[b.parent.i].end : [0, 0, 0];
+      const pd = b.parent ? P[b.parent.i].dir : [0, 1, 0];
+      if (!base) continue;
+      // tilt away from the parent's direction by pitch, around it by yaw
+      const up = pd, side = Math.abs(up[1]) < 0.9 ? [0, 1, 0] : [1, 0, 0];
+      let a = [up[1] * side[2] - up[2] * side[1], up[2] * side[0] - up[0] * side[2], up[0] * side[1] - up[1] * side[0]]; const al = Math.hypot(...a); a = a.map(v => v / al);
+      const c2 = [up[1] * a[2] - up[2] * a[1], up[2] * a[0] - up[0] * a[2], up[0] * a[1] - up[1] * a[0]];
+      const yw = b.yaw + sway, pt = b.level ? b.pitch + sway * 0.5 : sway * 0.3;
+      const dir = up.map((u, k) => u * Math.cos(pt) + (a[k] * Math.cos(yw) + c2[k] * Math.sin(yw)) * Math.sin(pt));
+      const L = b.len * grown, end = base.map((v, k) => v + dir[k] * L);
+      P[b.i] = { end: grown >= 1 ? end : end, dir };
+      segs.push({ a: base, b: end, w: (D + 1 - b.level) ** 1.5 * 0.9, level: b.level, tip: b.level === D, grown });
+    }
+    const pr = segs.map(s => ({ s, A: proj(s.a), B: proj(s.b) }));
+    pr.sort((x, y) => (y.A[2] + y.B[2]) - (x.A[2] + x.B[2]));               // far first
+    ctx.lineCap = 'round';
+    for (const { s, A, B } of pr) {
+      const shade = 60 + s.level * 9 - (A[2] + B[2]) * 12;
+      ctx.strokeStyle = `rgb(${shade + 30},${shade},${shade - 10})`; ctx.lineWidth = Math.max(0.6, s.w * A[3] * S / 500);
+      ctx.beginPath(); ctx.moveTo(A[0], A[1]); ctx.lineTo(B[0], B[1]); ctx.stroke();
+      if (s.tip && s.grown >= 1) {                                         // blossoms open at the tips
+        const open = Math.min(1, (g - (D + 1) * 0.55) * 0.8);
+        if (open > 0) { ctx.fillStyle = `rgba(255,${170 + (s.level * 13) % 40},${200},${0.75 * open})`; ctx.beginPath(); ctx.arc(B[0], B[1], S * 0.0055 * B[3] * (0.6 + open), 0, 7); ctx.fill(); }
+      }
+    }
+    // petals falling
+    ctx.fillStyle = 'rgba(255,190,215,.8)';
+    for (const p of petals) {
+      p.y -= 0.004; p.x += Math.sin(t + p.ph) * 0.004 * PARAMS.wind; if (p.y < 0) p.y = 3;
+      if (g < (D + 2) * 0.55) continue;
+      const [x, y, , k] = proj([p.x, p.y, p.z]); ctx.beginPath(); ctx.ellipse(x, y, 2.2 * k, 1.3 * k, t + p.ph, 0, 7); ctx.fill();
+    }
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}

package/anims/chrome/gem.js

@@ -0,0 +1,111 @@
+// Diamond: a round brilliant cut built from 49 flat facets (table, crown, girdle, pavilion), traced exactly as the
+// intersection of 49 half-spaces. Light enters, then bounces inside: at each facet it either escapes or, past the
+// critical angle, is totally reflected back in, which is what makes a diamond bright. Red, green and blue are traced
+// separately with slightly different refractive indices (dispersion), so the escaping light splits into fire. Strip
+// lights in a dark studio give it something to sparkle with as it turns.
+const PARAMS = { ior: 2.42, fire: 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(); }
+  // the cut: each facet a plane n·p = d with n pointing out
+  const planes = [], deg = Math.PI / 180;
+  const add = (n, d) => { const l = Math.hypot(...n); planes.push(n[0] / l, n[1] / l, n[2] / l, d / l); };
+  add([0, 1, 0], 0.4);                                                         // table
+  const through = (n, p) => n[0] * p[0] + n[1] * p[1] + n[2] * p[2];
+  for (let k = 0; k < 8; k++) {                                                // crown mains and upper girdle facets
+    const f = k * Math.PI / 4, g = f + Math.PI / 8;
+    let n = [Math.sin(34.5 * deg) * Math.cos(f), Math.cos(34.5 * deg), Math.sin(34.5 * deg) * Math.sin(f)]; add(n, through(n, [Math.cos(f), 0.04, Math.sin(f)]));
+    n = [Math.sin(46 * deg) * Math.cos(g), Math.cos(46 * deg), Math.sin(46 * deg) * Math.sin(g)]; add(n, through(n, [Math.cos(g), 0.03, Math.sin(g)]));
+  }
+  for (let k = 0; k < 16; k++) { const f = k * Math.PI / 8; add([Math.cos(f), 0, Math.sin(f)], 1); }   // girdle
+  for (let k = 0; k < 8; k++) {                                                // pavilion mains to the culet, lower girdle facets
+    const f = k * Math.PI / 4 + Math.PI / 8, g = k * Math.PI / 4;
+    let n = [Math.sin(40.8 * deg) * Math.cos(f), -Math.cos(40.8 * deg), Math.sin(40.8 * deg) * Math.sin(f)]; add(n, through(n, [0, -0.86, 0]));
+    n = [Math.sin(43 * deg) * Math.cos(g), -Math.cos(43 * deg), Math.sin(43 * deg) * Math.sin(g)]; add(n, through(n, [Math.cos(g), -0.03, Math.sin(g)]));
+  }
+  const NP = planes.length / 4;
+  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, IOR, FIRE; uniform mat3 ROT; uniform vec4 PL[${NP}];
+  vec3 env(vec3 d) {                                                     // a dark studio with strip lights and a ring light
+    vec3 c = vec3(.012, .014, .02) + vec3(.05, .05, .06) * smoothstep(-.2, 1., d.y);
+    float az = atan(d.z, d.x);
+    for (int i = 0; i < 9; i++) { float a = float(i) * .698 + .3; c += vec3(4.5) * smoothstep(.06, .0, abs(sin((az - a) * .5))) * smoothstep(.0, .2, d.y) * smoothstep(.75, .45, d.y); }
+    c += vec3(4., 3.6, 3.2) * smoothstep(.04, .0, abs(d.y - .9));          // ring light overhead
+    c += vec3(.6, .7, 1.) * smoothstep(.15, .0, abs(d.y + .2)) * .4;
+    return c;
+  }
+  // entering the convex cut from outside: x = t, and the facet hit in yzw
+  vec4 enter(vec3 ro, vec3 rd) {
+    float tn = -1e9, tf = 1e9; vec3 nn = vec3(0);
+    for (int i = 0; i < ${NP}; i++) {
+      vec3 n = PL[i].xyz; float den = dot(n, rd), dist = PL[i].w - dot(n, ro);
+      if (abs(den) < 1e-6) { if (dist < 0.) return vec4(-1); continue; }
+      float t = dist / den;
+      if (den < 0.) { if (t > tn) { tn = t; nn = n; } } else tf = min(tf, t);
+    }
+    return tn < tf && tn > 0. ? vec4(tn, nn) : vec4(-1);
+  }
+  // leaving from inside: the first facet ahead
+  vec4 leave(vec3 p, vec3 rd) {
+    float tf = 1e9; vec3 nn = vec3(0, 1, 0);
+    for (int i = 0; i < ${NP}; i++) { vec3 n = PL[i].xyz; float den = dot(n, rd); if (den > 1e-6) { float t = (PL[i].w - dot(n, p)) / den; if (t < tf) { tf = t; nn = n; } } }
+    return vec4(tf, nn);
+  }
+  // one colour channel through the stone
+  float trace(vec3 ro, vec3 rd, float ior, int ch) {
+    vec4 h = enter(ro, rd); if (h.x < 0.) return -1.;
+    vec3 n = h.yzw, p = ro + rd * h.x;
+    float c = dot(-rd, n), F0 = pow((ior - 1.) / (ior + 1.), 2.), F = F0 + (1. - F0) * pow(1. - c, 5.);
+    float acc = F * env(reflect(rd, n))[ch], thr = 1. - F;
+    vec3 d = refract(rd, n, 1. / ior);
+    for (int b = 0; b < 7; b++) {
+      vec4 l = leave(p + d * 1e-4, d); p = p + d * (l.x + 1e-4); vec3 m = l.yzw;
+      vec3 out_ = refract(d, -m, ior);
+      if (dot(out_, out_) < .01) { d = reflect(d, -m); continue; }          // total internal reflection: stays inside
+      float ci = dot(d, m), Fi = F0 + (1. - F0) * pow(1. - ci, 5.);
+      acc += thr * (1. - Fi) * env(out_)[ch]; thr *= Fi; d = reflect(d, -m);
+    }
+    return acc;
+  }
+  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 eye = vec3(0, 1.6, -3.4), f = normalize(vec3(0, -.05, 0) - eye), r = normalize(cross(vec3(0, 1, 0), f)), u = cross(f, r);
+    vec3 rd0 = normalize(f * 2.1 + r * q.x + u * q.y);
+    vec3 ro = ROT * eye, rd = ROT * rd0;                                    // turn the world, not the stone
+    vec3 bg = mix(vec3(.02, .022, .03), vec3(.07, .07, .09), uv.y);
+    float sp = .025 * FIRE;
+    float rr = trace(ro, rd, IOR - sp, 0);
+    vec3 col;
+    if (rr < 0.) col = bg + vec3(.04) * smoothstep(.9, .0, length(q - vec2(0, -.55)) * vec2(1, 3).x);
+    else col = vec3(rr, trace(ro, rd, IOR, 1), trace(ro, rd, IOR + sp, 2));
+    col = aces(col * 1.5);
+    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', 'IOR', 'FIRE', 'ROT', 'PL'].forEach(n => U[n] = gl.getUniformLocation(prog, n));
+  gl.uniform4fv(U.PL, new Float32Array(planes));
+  const resize = () => { const w = stage.clientWidth || 1, h = stage.clientHeight || 1, d = Math.min(devicePixelRatio, Math.max(1, Math.sqrt(380000 / (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) {
+    const t = (now - t0) / 1000, a = t * 0.35, b = Math.sin(t * 0.4) * 0.18;   // turn, with a gentle rock
+    const ca = Math.cos(a), sa = Math.sin(a), cb = Math.cos(b), sb = Math.sin(b);
+    gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, t); gl.uniform1f(U.IOR, PARAMS.ior); gl.uniform1f(U.FIRE, PARAMS.fire);
+    gl.uniformMatrix3fv(U.ROT, false, new Float32Array([ca, sb * sa, -cb * sa, 0, cb, sb, sa, -sb * ca, cb * ca]));
+    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/chrome/geode.js

@@ -0,0 +1,102 @@
+// Geode: a rough grey stone that cracks in half and opens like a book, and inside it is lined with amethyst. All of
+// it is one distance function, raymarched. The stone is a sphere roughened with noise; each half keeps only one side
+// of the cut and has a hollow carved out of it. The hollow's wall is pushed inward into points by a Voronoi pattern
+// on the sphere of directions: every cell becomes a faceted crystal pointing at the centre, paler at its tip. On the
+// cut face you see the layers in section: the rind, the stone, bands of agate, then the crystals.
+const PARAMS = { crystals: 1, sparkle: 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';
+  stage.append(canvas);
+  const gl = canvas.getContext('webgl2', { antialias: false });
+  if (!gl) { stage.textContent = 'This needs WebGL2.'; return () => canvas.remove(); }
+  const FS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform vec2 R; uniform float T, OPEN, CR, SP;
+  mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }
+  vec3 h3(vec3 p) { p = fract(p * vec3(.1031, .103, .0973)); p += dot(p, p.yxz + 33.33); return fract((p.xxy + p.yxx) * p.zyx); }
+  float n3(vec3 p) { vec3 i = floor(p), f = fract(p); f = f * f * (3. - 2. * f);
+    return mix(mix(mix(h3(i).x, h3(i + vec3(1, 0, 0)).x, f.x), mix(h3(i + vec3(0, 1, 0)).x, h3(i + vec3(1, 1, 0)).x, f.x), f.y), mix(mix(h3(i + vec3(0, 0, 1)).x, h3(i + vec3(1, 0, 1)).x, f.x), mix(h3(i + vec3(0, 1, 1)).x, h3(i + vec3(1, 1, 1)).x, f.x), f.y), f.z); }
+  float fbm(vec3 p) { return n3(p) * .55 + n3(p * 2.1) * .28 + n3(p * 4.3) * .17; }
+  // crystals: distance to the nearest Voronoi point among directions; near a point the wall stands tallest
+  vec2 vor(vec3 n) {
+    vec3 p = n * 5.5 * CR, i = floor(p), f = fract(p); float d1 = 9., d2 = 9.;
+    for (int z = -1; z <= 1; z++) for (int y = -1; y <= 1; y++) for (int x = -1; x <= 1; x++) {
+      vec3 g = vec3(x, y, z), q = g + h3(i + g) * .8 + .1 - f; float d = max(max(abs(q.x), abs(q.y)), abs(q.z)) * .7 + length(q) * .3;   // faceted
+      if (d < d1) { d2 = d1; d1 = d; } else if (d < d2) d2 = d;
+    }
+    return vec2(d1, d2 - d1);
+  }
+  float rock(vec3 p) { return length(p) - 1. - .07 * fbm(p * 2.6) - .025 * fbm(p * 9.); }
+  float cavity(vec3 p) { vec2 v = vor(normalize(p)); return .7 - .26 * smoothstep(.75, .0, v.x) - length(p); }   // > 0 inside the stone around the hollow
+  // one half: the stone, minus the hollow, minus everything on the far side of the cut
+  float half_(vec3 p, out float mat) {
+    float r = rock(p), c = cavity(p), cut = p.x;
+    float d = max(max(r, c), cut);
+    mat = cut > max(r, c) - .002 ? 2. : (c > r ? 1. : 0.);        // 0 outer stone, 1 crystal, 2 the cut face
+    return d;
+  }
+  vec3 local(vec3 p, float s) {                                   // each half swings open about a hinge at the back
+    p.x *= s; p -= vec3(-.06, 0, -1.) * vec3(1., 1., 1.); p.xz *= rot(-OPEN * 1.25); p += vec3(-.06, 0, -1.);
+    return p;
+  }
+  float map(vec3 p, out float mat, out float side) {
+    float ma, mb; vec3 pa = local(p, 1.), pb = local(p, -1.);
+    float da = half_(pa, ma), db = half_(pb, mb);
+    side = da < db ? 1. : -1.; mat = da < db ? ma : mb; return min(da, db) * .7;
+  }
+  float map(vec3 p) { float m, s; return map(p, m, s); }
+  vec3 nrm(vec3 p) { vec2 e = vec2(.0015, 0); return normalize(vec3(map(p + e.xyy) - map(p - e.xyy), map(p + e.yxy) - map(p - e.yxy), map(p + e.yyx) - map(p - e.yyx))); }
+  void main() {
+    vec2 q = (uv * 2. - 1.) * vec2(R.x / R.y, 1.);
+    vec3 ro = vec3(0, .55, 4.2), rd = normalize(vec3(q, -2.2)); rd.yz *= rot(-.1);
+    ro.xz *= rot(.35 * sin(T * .17)); rd.xz *= rot(.35 * sin(T * .17));
+    // a dark velvet display case under a spotlight
+    vec3 col = mix(vec3(.05, .03, .06), vec3(.012, .01, .016), length(q * vec2(.6, .9)));
+    float t = 0., mat = 0., side = 1.; bool hit = false;
+    for (int i = 0; i < 120; i++) { float d = map(ro + rd * t, mat, side); if (d < .0012) { hit = true; break; } t += d; if (t > 9.) break; }
+    if (hit) {
+      vec3 p = ro + rd * t, n = nrm(p), L = normalize(vec3(-.5, .9, .6)), V = -rd, H = normalize(L + V);
+      vec3 lp = local(p, side); float r = length(lp);
+      float dif = max(dot(n, L), 0.), amb = .18 + .12 * n.y;
+      vec3 base;
+      if (mat < .5) base = mix(vec3(.36, .33, .3), vec3(.5, .47, .42), fbm(lp * 6.)) * (.8 + .2 * n3(lp * 30.));   // the stone's skin
+      else if (mat < 1.5) {
+        vec2 v = vor(normalize(lp)); float tip = smoothstep(.62, .48, r);
+        base = mix(vec3(.24, .06, .36), vec3(.82, .62, .95), tip) * (.75 + .5 * smoothstep(0., .08, v.y));   // amethyst: deep at the root, pale at the tip
+      } else {
+        // the cut face: rind, stone, agate bands, then the crystal layer
+        float band = sin(r * 140. + fbm(lp * 7.) * 6.);
+        base = r > .95 ? vec3(.42, .38, .34) : r > .8 ? vec3(.58, .55, .5) * (.85 + .15 * n3(lp * 25.)) : r > .72 ? mix(vec3(.78, .8, .86), vec3(.55, .6, .72), .5 + .5 * band) : vec3(.5, .3, .62);
+      }
+      col = base * (amb + dif * .95);
+      float sp = pow(max(dot(n, H), 0.), mat > .5 && mat < 1.5 ? 90. : 18.) * (mat > .5 && mat < 1.5 ? 2.2 * SP : .25);
+      if (mat > .5 && mat < 1.5) sp *= .4 + 1.6 * step(.82, h3(floor(lp * 60.)).x);   // facets glint one by one
+      col += vec3(1., .96, 1.) * sp;
+      col *= 1. - .5 * smoothstep(.0, .6, -dot(n, L)) * step(mat, .5);
+    }
+    o = vec4(pow(col, vec3(1. / 2.2)), 1);
+  }`;
+  const VS = `#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p * .5 + .5; gl_Position = vec4(p, 0, 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 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));
+  gl.useProgram(p); const U = n => gl.getUniformLocation(p, n);
+  gl.bindVertexArray(gl.createVertexArray()); 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);
+  let W = 1, H = 1;
+  const resize = () => { const w = stage.clientWidth || 1, h = stage.clientHeight || 1, d = Math.min(devicePixelRatio, 2, Math.max(0.5, Math.sqrt(290000 / (w * h)))); W = canvas.width = Math.max(1, (w * d) | 0); H = canvas.height = Math.max(1, (h * d) | 0); gl.viewport(0, 0, W, H); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf, last = performance.now(), t = 0;
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now; t += dt * PARAMS.speed;
+    // closed, then it splits and swings open, holds, and closes again
+    const c = t % 11, open = c < 1.5 ? 0 : c < 3.6 ? (1 - Math.cos(Math.PI * (c - 1.5) / 2.1)) / 2 : c < 9.2 ? 1 : c < 10.6 ? (1 + Math.cos(Math.PI * (c - 9.2) / 1.4)) / 2 : 0;
+    gl.uniform2f(U('R'), W, H); gl.uniform1f(U('T'), t); gl.uniform1f(U('OPEN'), open); gl.uniform1f(U('CR'), PARAMS.crystals); gl.uniform1f(U('SP'), PARAMS.sparkle);
+    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/chrome/glass-lens.js

@@ -0,0 +1,73 @@
+// Glass lens refraction: inside the lens each pixel samples the scene behind it through a domed surface,
+// pulled toward the centre (magnification). Red, green and blue bend by slightly different amounts: dispersion.
+const PARAMS = { ior: 1.3, dispersion: 0.02 };
+
+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 scene behind the glass, painted once.
+  const pic = document.createElement('canvas'); pic.width = 1200; pic.height = 900;
+  const g = pic.getContext('2d');
+  g.fillStyle = '#efe7dc'; g.fillRect(0, 0, 1200, 900);
+  g.fillStyle = '#d9c8b4'; for (let x = 0; x < 1200; x += 60) for (let y = 0; y < 900; y += 60) { g.beginPath(); g.arc(x + 30, y + 30, 6, 0, 7); g.fill(); }
+  g.fillStyle = '#8a6a4f'; g.font = '900 210px "Mona Sans", system-ui, sans-serif'; g.textAlign = 'center'; g.textBaseline = 'middle';
+  g.fillText('REFRACT', 600, 330);
+  g.fillStyle = '#e8590c'; g.fillText('LIGHT', 600, 580);
+  g.strokeStyle = '#15171a'; g.lineWidth = 6; for (let i = 0; i < 8; i++) { g.beginPath(); g.moveTo(80 + i * 150, 760); g.lineTo(160 + i * 150, 840); g.stroke(); }
+
+  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 vec2 R, M; uniform float IOR, DISP;
+  vec3 scene(vec2 st) {
+    vec2 a = vec2(R.x / R.y, 1.), cover = a.x > 4. / 3. ? vec2(1., (4. / 3.) / a.x) : vec2(a.x / (4. / 3.), 1.);
+    vec2 tc = (st - .5) * cover + .5; return texture(img, vec2(tc.x, 1. - tc.y)).rgb;
+  }
+  void main() {
+    vec2 a = vec2(R.x / R.y, 1.), q = uv * a, m = M * a;
+    float r = .3, d = length(q - m) / r;
+    vec3 col = scene(uv);
+    float shadow = smoothstep(1.25, .95, length(q - m - vec2(.02, -.03)) / r) * .18;
+    col *= 1. - shadow;
+    if (d < 1.) {
+      float h = sqrt(1. - d * d);                      // dome height
+      float mag = (IOR - 1.) * 1.1;
+      vec2 dir = (q - m);
+      vec3 c;
+      c.r = scene((m + dir * (1. - mag * (1. + DISP * 6.) * h)) / a).r;
+      c.g = scene((m + dir * (1. - mag * h)) / a).g;
+      c.b = scene((m + dir * (1. - mag * (1. - DISP * 6.) * h)) / a).b;
+      float rim = smoothstep(.82, 1., d);
+      float hi = pow(max(0., dot(normalize(vec3(dir / r, h)), normalize(vec3(-.5, .6, .8)))), 40.);
+      col = mix(c * 1.04, vec3(1.), rim * .35) + hi * .6;
+    }
+    o = vec4(col, 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.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  const u = n => gl.getUniformLocation(prog, n), uR = u('R'), uM = u('M'), uI = u('IOR'), uD = u('DISP');
+  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.6) * 0.28; ty = 0.5 + Math.sin(t * 0.9) * 0.2; }
+    mx += (tx - mx) * 0.1; my += (ty - my) * 0.1;
+    gl.uniform2f(uR, canvas.width, canvas.height); gl.uniform2f(uM, mx, my); gl.uniform1f(uI, PARAMS.ior); gl.uniform1f(uD, PARAMS.dispersion);
+    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(); };
+}