motion-library 0.0.0-stage → 0.1.0

package/anims/chrome/low-poly-planet.js

@@ -0,0 +1,163 @@
+// Low-poly planet: an icosahedron split three times into 1,280 faces, each vertex pushed out by 3D noise.
+// Faces are flat-shaded and coloured by height (sea, sand, grass, forest, rock, snow), pine trees sprout on
+// the green faces, and puffy clouds orbit faster than the ground. Drag to spin it.
+const PARAMS = { terrain: 1, sea: 0.5, spin: 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;cursor:grab';
+  stage.append(canvas);
+  const gl = canvas.getContext('webgl2', { antialias: true });
+  if (!gl) { stage.textContent = 'This needs WebGL2.'; return () => canvas.remove(); }
+
+  // ── geometry
+  const perm = Uint8Array.from({ length: 256 }, () => Math.random() * 256);
+  const hsh = (x, y, z) => perm[(perm[(perm[x & 255] + y) & 255] + z) & 255] / 255;
+  const sm = t => t * t * (3 - 2 * t), lerp = (a, b, t) => a + (b - a) * t;
+  const noise = (x, y, z) => {
+    const X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z), u = sm(x - X), v = sm(y - Y), w = sm(z - Z);
+    return lerp(lerp(lerp(hsh(X, Y, Z), hsh(X + 1, Y, Z), u), lerp(hsh(X, Y + 1, Z), hsh(X + 1, Y + 1, Z), u), v),
+      lerp(lerp(hsh(X, Y, Z + 1), hsh(X + 1, Y, Z + 1), u), lerp(hsh(X, Y + 1, Z + 1), hsh(X + 1, Y + 1, Z + 1), u), v), w);
+  };
+  const fbm = (x, y, z) => { let s = 0, a = 0.5, f = 1; for (let i = 0; i < 4; i++) { s += a * noise(x * f + 11, y * f + 7, z * f + 3); a *= 0.5; f *= 2.1; } return s; };
+  function icosphere(level) {
+    const t = (1 + Math.sqrt(5)) / 2;
+    let V = [[-1, t, 0], [1, t, 0], [-1, -t, 0], [1, -t, 0], [0, -1, t], [0, 1, t], [0, -1, -t], [0, 1, -t], [t, 0, -1], [t, 0, 1], [-t, 0, -1], [-t, 0, 1]].map(v => { const l = Math.hypot(...v); return v.map(c => c / l); });
+    let F = [[0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11], [1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8], [3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9], [4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1]];
+    for (let l = 0; l < level; l++) {
+      const cache = new Map(), mid = (a, b) => { const k = a < b ? a + ',' + b : b + ',' + a; if (cache.has(k)) return cache.get(k); const m = V[a].map((c, i) => (c + V[b][i]) / 2), len = Math.hypot(...m); V.push(m.map(c => c / len)); cache.set(k, V.length - 1); return V.length - 1; };
+      F = F.flatMap(([a, b, c]) => { const ab = mid(a, b), bc = mid(b, c), ca = mid(c, a); return [[a, ab, ca], [b, bc, ab], [c, ca, bc], [ab, bc, ca]]; });
+    }
+    return { V, F };
+  }
+  const sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]], 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]];
+  const norm = a => { const l = Math.hypot(...a) || 1; return a.map(c => c / l); };
+  const hex = h => [parseInt(h.slice(1, 3), 16) / 255, parseInt(h.slice(3, 5), 16) / 255, parseInt(h.slice(5, 7), 16) / 255];
+  function pushTri(out, a, b, c, col, shine, ctr = [0, 0, 0]) {
+    let n = norm(cross(sub(b, a), sub(c, a)));
+    const m = [0, 1, 2].map(i => (a[i] + b[i] + c[i]) / 3 - ctr[i]);
+    if (n[0] * m[0] + n[1] * m[1] + n[2] * m[2] < 0) n = n.map(x => -x);   // face outward from the shape's centre, whatever the winding
+    for (const v of [a, b, c]) out.push(v[0], v[1], v[2], n[0], n[1], n[2], col[0], col[1], col[2], shine);
+  }
+  function buildPlanet() {
+    const { V, F } = icosphere(3), sea = 0.38 + PARAMS.sea * 0.14, amp = 0.32 * PARAMS.terrain;
+    const H = V.map(v => fbm(v[0] * 1.7, v[1] * 1.7, v[2] * 1.7));
+    const P = V.map((v, i) => { const r = 1 + Math.max(0, H[i] - sea) * amp; return v.map(c => c * r); });
+    const out = [], greens = [];
+    F.forEach(([a, b, c]) => {
+      const h = (H[a] + H[b] + H[c]) / 3 - sea, j = (Math.random() - 0.5) * 0.06;
+      let col, shine = 0;
+      if (h < 0) { col = h < -0.06 ? hex('#1c5a86') : hex('#2b86b0'); shine = 1; }
+      else if (h < 0.025) col = hex('#e6cf8c');
+      else if (h < 0.11) { col = hex('#6cb04f'); greens.push([a, b, c]); }
+      else if (h < 0.17) { col = hex('#3f8a3c'); greens.push([a, b, c]); }
+      else if (h < 0.24) col = hex('#8b7e70');
+      else col = hex('#f1f3f6');
+      pushTri(out, P[a], P[b], P[c], col.map(x => Math.min(1, Math.max(0, x + j))), shine);
+    });
+    // pine trees: a five-sided cone standing on the face's centre, pointing away from the core
+    greens.sort(() => Math.random() - 0.5).slice(0, 140).forEach(([a, b, c]) => {
+      const cen = [0, 1, 2].map(i => (P[a][i] + P[b][i] + P[c][i]) / 3), up = norm(cen), side = norm(cross(up, [0.3, 1, 0.1])), side2 = cross(up, side);
+      const hgt = 0.05 + Math.random() * 0.04, rad = 0.018 + Math.random() * 0.01, tip = cen.map((x, i) => x + up[i] * hgt);
+      const col = hex(Math.random() < 0.5 ? '#2f6e33' : '#3b7f37');
+      for (let k = 0; k < 5; k++) {
+        const a0 = k / 5 * 6.283, a1 = (k + 1) / 5 * 6.283;
+        const p0 = cen.map((x, i) => x + (side[i] * Math.cos(a0) + side2[i] * Math.sin(a0)) * rad - up[i] * 0.004);
+        const p1 = cen.map((x, i) => x + (side[i] * Math.cos(a1) + side2[i] * Math.sin(a1)) * rad - up[i] * 0.004);
+        pushTri(out, p0, p1, tip, col, 0, cen);
+      }
+    });
+    return new Float32Array(out);
+  }
+  function buildClouds() {
+    const { V, F } = icosphere(0), out = [];
+    for (let k = 0; k < 9; k++) {
+      const th = Math.random() * 6.283, ph = Math.acos(Math.random() * 1.6 - 0.8), c = [Math.sin(ph) * Math.cos(th), Math.cos(ph), Math.sin(ph) * Math.sin(th)].map(x => x * 1.34);
+      const side = norm(cross(c, [0, 1, 0]));
+      for (let m = 0; m < 3 + (k % 3); m++) {
+        const off = (m - 1.5) * 0.07, s = 0.05 + Math.random() * 0.045, ctr = c.map((x, i) => x + side[i] * off + (Math.random() - 0.5) * 0.03);
+        F.forEach(([a, b, d]) => pushTri(out, ...[a, b, d].map(i => V[i].map((x, j) => ctr[j] + x * s * (j === 1 ? 0.75 : 1))), [0.97, 0.98, 1], 0, ctr));
+      }
+    }
+    return new Float32Array(out);
+  }
+
+  // ── GL
+  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 meshProg = link(`#version 300 es
+  in vec3 pos, nor, col; in float shine; uniform mat4 PV, M; uniform float T;
+  out vec3 vN, vC, vW; out float vS;
+  void main() { vec4 w = M * vec4(pos, 1); vW = w.xyz; vN = mat3(M) * nor; vC = col; vS = shine;
+    if (shine > .5) vN = normalize(vN + .08 * vec3(sin(T * 2. + pos.x * 30.), cos(T * 1.7 + pos.y * 30.), sin(T * 1.9 + pos.z * 30.)));   // the sea glints
+    gl_Position = PV * w; }`, `#version 300 es
+  precision highp float; in vec3 vN, vC, vW; in float vS; out vec4 o;
+  void main() {
+    vec3 n = normalize(vN), L = normalize(vec3(-.6, .45, .65)), V = normalize(vec3(0, 0, 3.6) - vW);
+    float d = max(0., dot(n, L)), rim = pow(1. - max(0., dot(n, V)), 3.);
+    vec3 c = vC * (.16 + .95 * d) + vec3(.35, .55, 1.) * rim * .35;
+    c += vS * pow(max(0., dot(reflect(-L, n), V)), 40.) * .8;
+    o = vec4(pow(c, vec3(.92)), 1);
+  }`);
+  const bgProg = link(`#version 300 es
+  in vec2 p; out vec2 uv; void main() { uv = p; gl_Position = vec4(p, .999, 1); }`, `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform vec2 R; uniform float RS;
+  float h(vec2 p) { return fract(sin(dot(p, vec2(12.99, 78.23))) * 43758.55); }
+  void main() {
+    vec2 q = uv * vec2(R.x / R.y, 1.);
+    vec3 c = mix(vec3(.02, .025, .06), vec3(.05, .04, .1), uv.y * .5 + .5);
+    vec2 g = floor(gl_FragCoord.xy / 3.); float s = h(g); c += step(.996, s) * (.4 + .6 * h(g + 3.)) * vec3(.9, .95, 1.);
+    float r = length(q);
+    c += vec3(.25, .5, 1.) * exp(-max(0., r - RS) * 9.) * .55 * smoothstep(RS * .9, RS, r);   // atmosphere halo
+    o = vec4(c, 1);
+  }`);
+  const quad = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, quad); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  const bgVao = gl.createVertexArray(); gl.bindVertexArray(bgVao); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+  function meshVao(data) {
+    const vao = gl.createVertexArray(); gl.bindVertexArray(vao);
+    const b = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, b); gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+    [['pos', 3, 0], ['nor', 3, 12], ['col', 3, 24], ['shine', 1, 36]].forEach(([n, s, o]) => { const l = gl.getAttribLocation(meshProg, n); gl.enableVertexAttribArray(l); gl.vertexAttribPointer(l, s, gl.FLOAT, false, 40, o); });
+    return { vao, count: data.length / 10, buf: b };
+  }
+  const planet = meshVao(buildPlanet()), clouds = meshVao(buildClouds());
+  const uPV = gl.getUniformLocation(meshProg, 'PV'), uM = gl.getUniformLocation(meshProg, 'M'), uT = gl.getUniformLocation(meshProg, 'T');
+  const uBR = gl.getUniformLocation(bgProg, 'R'), uRS = gl.getUniformLocation(bgProg, 'RS');
+
+  // ── 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, n, f) => { const t = 1 / Math.tan(fov / 2); return new Float32Array([t / asp, 0, 0, 0, 0, t, 0, 0, 0, 0, (f + n) / (n - f), -1, 0, 0, 2 * f * n / (n - 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 ang = 0.8, vel = 0, dragX = null;
+  const onDown = e => { dragX = e.clientX; canvas.style.cursor = 'grabbing'; canvas.setPointerCapture?.(e.pointerId); };
+  const onMove = e => { if (dragX == null) return; vel = (e.clientX - dragX) * 0.012; ang += vel; dragX = e.clientX; };
+  const onUp = () => { dragX = null; canvas.style.cursor = 'grab'; };
+  canvas.addEventListener('pointerdown', onDown); canvas.addEventListener('pointermove', onMove); canvas.addEventListener('pointerup', onUp); canvas.addEventListener('pointercancel', onUp);
+  let raf, last = performance.now(); const t0 = last;
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000); last = now; const t = (now - t0) / 1000;
+    if (dragX == null) { ang += vel + dt * 0.25 * PARAMS.spin; vel *= 0.94; }
+    const asp = canvas.width / canvas.height, fov = 0.75, dist = 3.6;
+    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(bgProg); gl.bindVertexArray(bgVao);
+    gl.uniform2f(uBR, canvas.width, canvas.height); gl.uniform1f(uRS, 1.12 / Math.tan(fov / 2) / Math.sqrt(dist * dist - 1));
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.enable(gl.DEPTH_TEST); gl.useProgram(meshProg); gl.uniform1f(uT, t);
+    gl.uniformMatrix4fv(uPV, false, mul(persp(fov, asp, 0.1, 20), trans(-dist)));
+    gl.uniformMatrix4fv(uM, false, mul(rotX(0.35), rotY(ang)));
+    gl.bindVertexArray(planet.vao); gl.drawArrays(gl.TRIANGLES, 0, planet.count);
+    gl.uniformMatrix4fv(uM, false, mul(rotX(0.35), rotY(ang * 1.35 + t * 0.06)));
+    gl.bindVertexArray(clouds.vao); gl.drawArrays(gl.TRIANGLES, 0, clouds.count);
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => {
+    cancelAnimationFrame(raf); ro.disconnect();
+    canvas.removeEventListener('pointerdown', onDown); canvas.removeEventListener('pointermove', onMove); canvas.removeEventListener('pointerup', onUp); canvas.removeEventListener('pointercancel', onUp);
+    gl.getExtension('WEBGL_lose_context')?.loseContext(); canvas.remove();
+  };
+}

package/anims/chrome/mandelbulb.js

@@ -0,0 +1,79 @@
+// Mandelbulb: the 3D cousin of the Mandelbrot set. Each point is raised to a power in spherical coordinates
+// (radius to the n, both angles times n) and added back, over and over; the distance estimate from that orbit
+// lets a ray step safely toward the surface. The power drifts slowly, so the bulb breathes and rearranges.
+const PARAMS = { power: 8, drift: 1, detail: 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, PW, EPS;
+  vec4 trap;
+  float de(vec3 p) {
+    vec3 z = p; float dr = 1., r = 0.; trap = vec4(abs(z), dot(z, z));
+    for (int i = 0; i < 9; i++) {
+      r = length(z); if (r > 2.) break;
+      float th = acos(clamp(z.y / r, -1., 1.)) * PW, ph = atan(z.z, z.x) * PW;
+      dr = pow(r, PW - 1.) * PW * dr + 1.;
+      z = pow(r, PW) * vec3(sin(th) * cos(ph), cos(th), sin(th) * sin(ph)) + p;
+      trap = min(trap, vec4(abs(z), dot(z, z)));                   // orbit trap: how close the orbit came to the axes and origin
+    }
+    return .5 * log(r) * r / dr;
+  }
+  vec3 nrm(vec3 p, float e) { vec2 k = vec2(e, -e); return normalize(k.xyy * de(p + k.xyy) + k.yyx * de(p + k.yyx) + k.yxy * de(p + k.yxy) + k.xxx * de(p + k.xxx)); }
+  vec3 aces(vec3 x) { return clamp((x * (2.51 * x + .03)) / (x * (2.43 * x + .59) + .14), 0., 1.); }
+  void main() {
+    vec2 q = (uv - .5) * vec2(R.x / R.y, 1.);
+    float a = T * .15;
+    vec3 ro = vec3(sin(a) * 4.4, 1.1 * sin(T * .07) + .6, cos(a) * 4.4), f = normalize(-ro), r = normalize(cross(vec3(0, 1, 0), f)), u = cross(f, r);
+    vec3 rd = normalize(f * 1.55 + r * q.x + u * q.y);
+    vec3 bg = mix(vec3(.02, .02, .035), vec3(.09, .06, .1), uv.y) + vec3(.12, .07, .04) * exp(-length(q) * 2.2);
+    vec3 col = bg;
+    // only march inside the bounding sphere
+    float b = dot(ro, rd), c = dot(ro, ro) - 1.44, h = b * b - c;
+    float glow = 0.;
+    if (h > 0.) {
+      float t = max(0., -b - sqrt(h)), tEnd = -b + sqrt(h), steps = 0.; bool hit = false;
+      for (int i = 0; i < 140; i++) {
+        float d = de(ro + rd * t);
+        glow += exp(-d * 30.) * .012;
+        if (d < EPS * t) { hit = true; break; }
+        t += d; steps += 1.; if (t > tEnd) break;
+      }
+      if (hit) {
+        vec3 p = ro + rd * t, n = nrm(p, EPS * t * .5);
+        float ao = clamp(1. - steps / 90., 0., 1.);                // more steps to arrive = deeper in a crevice
+        vec3 base = mix(vec3(.95, .55, .22), vec3(.2, .55, .65), clamp(trap.y * 1.3, 0., 1.));
+        base = mix(base, vec3(.95, .9, .8), clamp(1. - trap.w * 1.5, 0., 1.) * .6);
+        vec3 L = normalize(vec3(.6, .8, -.4));
+        float dif = max(0., dot(n, L)), sp = pow(max(0., dot(reflect(rd, n), L)), 24.), rim = pow(1. - max(0., dot(n, -rd)), 3.);
+        col = base * (.12 + dif * 1.1) * (.35 + .65 * ao) + sp * .5 * ao + rim * vec3(.5, .35, .7) * .4 * ao;
+      }
+    }
+    col += vec3(.9, .5, .3) * glow * .35;                               // halo from near misses
+    col = aces(col * 1.1);
+    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 uR = gl.getUniformLocation(prog, 'R'), uT = gl.getUniformLocation(prog, 'T'), uP = gl.getUniformLocation(prog, 'PW'), uE = gl.getUniformLocation(prog, 'EPS');
+  const resize = () => { const d = Math.min(devicePixelRatio, 1); canvas.width = stage.clientWidth * d | 0; canvas.height = stage.clientHeight * d | 0; gl.viewport(0, 0, canvas.width, canvas.height); };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    const t = (now - t0) / 1000;
+    gl.uniform2f(uR, canvas.width, canvas.height); gl.uniform1f(uT, t);
+    gl.uniform1f(uP, PARAMS.power + Math.sin(t * 0.25) * 1.5 * PARAMS.drift);
+    gl.uniform1f(uE, 0.0016 / PARAMS.detail);
+    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/melting-logo.js

@@ -0,0 +1,126 @@
+// Melting chrome logo: solid chrome letters slump into a puddle, then pull themselves back up, like liquid metal
+// with a memory. The letters are drawn once to a canvas and turned into a 2D distance field (an exact distance
+// transform); in 3D that field is extruded with rounded edges. Melting bends space rather than the letters: each
+// point reads the field from higher up, more so near the floor and down the drip lines, so the shapes sag and run.
+// A puddle grows under them and merges with a smooth minimum. Reflections come from a studio of softboxes.
+const PARAMS = { drips: 1, speed: 1, gloss: 1 };
+const WORD = 'MELT';
+
+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 TW = 512, TH = 192;
+  // the word's signed distance in pixels (positive outside), by an exact Euclidean distance transform
+  const field = (() => {
+    const c = document.createElement('canvas'); c.width = TW; c.height = TH; const g = c.getContext('2d');
+    g.fillStyle = '#fff'; g.font = `900 ${Math.round(TH * 0.8)}px "Arial Black", system-ui, sans-serif`; g.textAlign = 'center'; g.textBaseline = 'middle';
+    g.fillText(WORD, TW / 2, TH * 0.54, TW * 0.9);
+    const px = g.getImageData(0, 0, TW, TH).data, INF = 1e10;
+    const edt = inside => {
+      const f = new Float64Array(TW * TH); for (let i = 0; i < TW * TH; i++) f[i] = (px[i * 4 + 3] > 127) === inside ? 0 : INF;
+      const n = Math.max(TW, TH), v = new Int32Array(n), z = new Float64Array(n + 1), tmp = new Float64Array(n);
+      const pass = (get, set, len) => {
+        for (let q = 0; q < len; q++) tmp[q] = get(q);
+        let k = 0; v[0] = 0; z[0] = -INF; z[1] = INF;
+        for (let q = 1; q < len; q++) { let s; while ((s = ((tmp[q] + q * q) - (tmp[v[k]] + v[k] * v[k])) / (2 * q - 2 * v[k])) <= z[k]) k--; k++; v[k] = q; z[k] = s; z[k + 1] = INF; }
+        k = 0; for (let q = 0; q < len; q++) { while (z[k + 1] < q) k++; set(q, (q - v[k]) ** 2 + tmp[v[k]]); }
+      };
+      for (let x = 0; x < TW; x++) pass(y => f[y * TW + x], (y, val) => { f[y * TW + x] = val; }, TH);
+      for (let y = 0; y < TH; y++) pass(x => f[y * TW + x], (x, val) => { f[y * TW + x] = val; }, TW);
+      return f;
+    };
+    const depth = edt(false), away = edt(true), d = new Float32Array(TW * TH);
+    for (let i = 0; i < TW * TH; i++) { const row = (i / TW) | 0, col = i % TW; d[(TH - 1 - row) * TW + col] = Math.sqrt(away[i]) - Math.sqrt(depth[i]); }
+    return d;
+  })();
+  const FS = `#version 300 es
+  precision highp float; in vec2 uv; out vec4 o; uniform sampler2D F; uniform vec2 R; uniform float T, M, DR, GL;
+  const float SX = 4.6, SY = 4.6 * ${TH}. / ${TW}., PX = 4.6 / ${TW}., FLOOR = -.95;
+  mat2 rot(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }
+  float h1(float x) { return fract(sin(x * 127.1) * 43758.5453); }
+  float n1(float x) { float i = floor(x), f = fract(x); f = f * f * (3. - 2. * f); return mix(h1(i), h1(i + 1.), f); }
+  float sd2(vec2 p) { vec2 b = abs(p) - vec2(SX, SY) * .5; if (max(b.x, b.y) > 0.) return length(max(b, 0.)) + .5; return texture(F, vec2(p.x / SX + .5, p.y / SY + .5)).r * PX; }
+  float smin(float a, float b, float k) { float h = clamp(.5 + .5 * (b - a) / k, 0., 1.); return mix(b, a, h) - k * h * (1. - h); }
+  float smax(float a, float b, float k) { return -smin(-a, -b, k); }
+  float map(vec3 p) {
+    p.xz *= rot(.35 * sin(T * .3));
+    // the letters, extruded with rounded edges
+    float th = .22, r = .07, d2 = sd2(vec2(p.x, p.y + .03)), dz = abs(p.z) - th;
+    float letters = length(max(vec2(d2 + r, dz + r), 0.)) - r + min(max(d2, dz), 0.);
+    // the melt front sinks through them (wavy, with a molten rounded rim), and what is above it is gone
+    float front = mix(1.1, FLOOR - .15, M) + .07 * sin(p.x * 3.3 + T * 1.3) * M;
+    float body = smax(letters, p.y - front, .14);
+    // drips hang from the front where there is metal, and stretch as it goes
+    float drips = 1e3;
+    for (int i = 0; i < 7; i++) {
+      float x = -1.9 + float(i) * .63 + .2 * sin(float(i) * 7.1), len = M * (1. - M) * 4. * (.35 + .5 * h1(float(i) * 3.3)) * DR;
+      float here = step(sd2(vec2(x, front + .05)), .02);
+      vec3 a = vec3(x, front, 0.), b = vec3(x, front - len, 0.), pa = p - a, ba = b - a;
+      float k = clamp(dot(pa, ba) / max(dot(ba, ba), 1e-4), 0., 1.);
+      drips = min(drips, length(pa - ba * k) - (.07 - .03 * k) * here + (1. - here) * 9.);
+    }
+    float puddle = length(vec3(p.x * .38, (p.y - FLOOR) * 5., p.z * .85)) / 5. - .02 - .14 * M;
+    puddle = max(puddle, FLOOR - p.y);
+    return min(smin(smin(body, drips, .12), puddle, .2), p.y - FLOOR + 10.) * .7;
+  }
+  vec3 nrm(vec3 p) { vec2 e = vec2(.002, 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))); }
+  vec3 env(vec3 d) {
+    vec3 c = mix(vec3(.02, .022, .03), vec3(.13, .14, .17), smoothstep(-.1, .7, d.y));
+    vec2 q = d.xz / max(d.y, .05);
+    c += vec3(1.) * 2.6 * smoothstep(.06, .0, abs(q.x - .1) - .55) * smoothstep(.06, .0, abs(q.y + .2) - .16) * step(0., d.y);
+    float az = atan(d.x, d.z);
+    c += vec3(1., .55, .3) * 1.6 * smoothstep(.1, .02, abs(az - 1.9)) * smoothstep(-.05, .2, d.y) * smoothstep(.75, .3, d.y);
+    c += vec3(.35, .6, 1.) * 1.4 * smoothstep(.1, .02, abs(az + 1.6)) * smoothstep(-.05, .2, d.y) * smoothstep(.75, .3, d.y);
+    c += vec3(1., .97, .92) * 1.3 * smoothstep(.07, .0, abs(d.y - .34) - .05);
+    c += vec3(1.25, 1.22, 1.18) * smoothstep(.35, .85, d.z) * smoothstep(-.35, .45, d.y);   // a big bright wall behind the camera, for the front faces
+    return c;
+  }
+  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, .55, 5.4), rd = normalize(vec3(q, -2.3)); rd.yz *= rot(-.12);
+    vec3 col = vec3(0); float t = 0.; bool hit = false;
+    for (int i = 0; i < 130; i++) { float d = map(ro + rd * t); if (d < .0012) { hit = true; break; } t += d; if (t > 14.) break; }
+    float tf = (FLOOR - ro.y) / rd.y;
+    if (hit) {
+      vec3 p = ro + rd * t, n = nrm(p), r = reflect(rd, n);
+      float fr = .6 + .4 * pow(1. - max(dot(n, -rd), 0.), 5.);
+      col = env(r) * vec3(.9, .92, .96) * fr * GL + vec3(.02);
+    } else if (tf > 0.) {
+      vec3 fp = ro + rd * tf, r = reflect(rd, vec3(0, 1, 0));    // a dark glossy floor reflecting the studio
+      col = env(r) * .035 + vec3(.012, .013, .016);
+      col *= 1. - .6 * exp(-dot(fp.xz * vec2(.35, 1.4), fp.xz * vec2(.35, 1.4)));   // contact shadow
+    } else col = mix(vec3(.025, .027, .034), vec3(.008, .009, .012), uv.y);
+    o = vec4(pow(aces(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);
+  const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, TW, TH, 0, gl.RED, gl.FLOAT, field);
+  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);
+  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(330000 / (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;
+    // solid, melting (slow at first, then running), a puddle, then it pulls itself back up with a little overshoot
+    const c = t % 11; let m;
+    if (c < 2.5) m = 0; else if (c < 6) { const k = (c - 2.5) / 3.5; m = k * k * (3 - 2 * k); } else if (c < 7.6) m = 1;
+    else if (c < 9.6) { const k = (c - 7.6) / 2; m = Math.max(-0.08, 1 - (1 - Math.exp(-6 * k) * Math.cos(10 * k)) * 1.0); } else m = 0;
+    gl.uniform1i(U('F'), 0); gl.uniform2f(U('R'), W, H); gl.uniform1f(U('T'), t); gl.uniform1f(U('M'), Math.max(0, m)); gl.uniform1f(U('DR'), PARAMS.drips); gl.uniform1f(U('GL'), PARAMS.gloss);
+    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/menger-sponge.js

@@ -0,0 +1,79 @@
+// Menger sponge: a cube with its centre cross carved out, then the same carved out of each of the 20 smaller cubes
+// left, and so on. As a distance function that is one box plus a loop: fold space into repeating cells (mod), and at
+// each level subtract a cross three times thinner. The raymarcher counts the levels to shade the deep holes darker,
+// the brass catches a studio light and a soft shadow is marched toward the lamp. The camera drifts in toward a face.
+const PARAMS = { levels: 4, 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 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; uniform int L; uniform mat3 ROT; uniform vec3 CE, CF, CR, CU;
+  float sdBox(vec3 p, vec3 b) { vec3 q = abs(p) - b; return length(max(q, 0.)) + min(max(q.x, max(q.y, q.z)), 0.); }
+  // x: distance, y: how deep in the holes (for occlusion)
+  vec2 map(vec3 p) {
+    p = ROT * p;
+    float d = sdBox(p, vec3(1)), s = 1., occ = 1.;
+    for (int m = 0; m < 6; m++) {
+      if (m >= L) break;
+      vec3 a = mod(p * s, 2.) - 1.; s *= 3.;
+      vec3 r = abs(1. - 3. * abs(a));
+      float da = max(r.x, r.y), db = max(r.y, r.z), dc = max(r.z, r.x);
+      float c = (min(da, min(db, dc)) - 1.) / s;                           // the cross at this level
+      if (c > d) { d = c; occ = min(occ, .25 * da * db * dc); }
+    }
+    return vec2(d, occ);
+  }
+  vec3 nrm(vec3 p) { vec2 e = vec2(.0007, -.0007); return normalize(e.xyy * map(p + e.xyy).x + e.yyx * map(p + e.yyx).x + e.yxy * map(p + e.yxy).x + e.xxx * map(p + e.xxx).x); }
+  float shadow(vec3 ro, vec3 rd) { float r = 1., t = .01; for (int i = 0; i < 48; i++) { float h = map(ro + rd * t).x; r = min(r, 10. * h / t); t += clamp(h, .005, .1); if (r < .001 || t > 4.) break; } return clamp(r, 0., 1.); }
+  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 = CE, rd = normalize(CF * 1.8 + CR * q.x + CU * q.y);
+    vec3 bg = mix(vec3(.05, .055, .07), vec3(.16, .14, .13), uv.y * .6 + .2);
+    vec3 col = bg; float t = 0.; vec2 h; bool hit = false;
+    for (int i = 0; i < 160; i++) { h = map(ro + rd * t); if (h.x < .0004 * (1. + t)) { hit = true; break; } t += h.x; if (t > 12.) break; }
+    if (hit) {
+      vec3 p = ro + rd * t, n = nrm(p), L1 = normalize(vec3(.6, .8, .4));
+      float dif = max(dot(n, L1), 0.) * shadow(p + n * .002, L1), sky = .5 + .5 * n.y, back = max(dot(n, -L1 * vec3(1, 0, 1)), 0.);
+      float occ = clamp(h.y * 1.4, 0., 1.);
+      vec3 brass = vec3(.86, .66, .38);
+      vec3 r = reflect(rd, n);
+      float spec = pow(max(dot(r, L1), 0.), 40.) * dif;
+      col = brass * (dif * vec3(1.25, 1.1, .95) + sky * vec3(.12, .14, .2) * occ + back * vec3(.08, .07, .1)) * (.3 + .7 * occ) + spec * vec3(1.2, 1., .8);
+      col += brass * .5 * mix(vec3(.05), vec3(.5, .45, .4), smoothstep(-.2, .6, r.y)) * occ * pow(1. - max(dot(n, -rd), 0.), 2.);   // a little sheen at grazing angles
+      col = mix(col, bg, smoothstep(4., 11., t));
+    }
+    col = aces(col);
+    col *= 1. - .3 * pow(length(uv - .5) * 1.25, 2.);
+    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', 'L', 'ROT', 'CE', 'CF', 'CR', 'CU'].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(1, Math.sqrt(340000 / (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();
+  const nrm = a => { const l = Math.hypot(...a); return a.map(v => v / l); };
+  let raf; const t0 = performance.now();
+  function frame(now) {
+    const t = (now - t0) / 1000 * PARAMS.speed;
+    const ya = t * 0.18 + 0.6, pa = 0.5 + Math.sin(t * 0.13) * 0.15, cy = Math.cos(ya), sy = Math.sin(ya), cp = Math.cos(pa), sp = Math.sin(pa);
+    const rot = new Float32Array([cy, sp * sy, -cp * sy, 0, cp, sp, sy, -sp * cy, cp * cy]);
+    const asp = canvas.width / canvas.height, dist = (4.3 - 0.9 * (0.5 + 0.5 * Math.sin(t * 0.21))) * Math.max(1, 1.15 / asp);   // drift in and out
+    const eye = [0.25, 0.35, dist], f = nrm(eye.map(v => -v)), r = nrm([-f[2], 0, f[0]]), 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]];
+    gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, t); gl.uniform1i(U.L, Math.round(PARAMS.levels));
+    gl.uniformMatrix3fv(U.ROT, false, rot); gl.uniform3fv(U.CE, eye); gl.uniform3fv(U.CF, f); gl.uniform3fv(U.CR, r); gl.uniform3fv(U.CU, u);
+    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/neon-geodesic.js

@@ -0,0 +1,149 @@
+// Neon geodesic: an icosahedron with every face split into nine (frequency 3), pushed out onto a sphere:
+// 92 nodes, 270 struts. Each strut is stroked as neon tube light; the glow is the same drawing shrunk and
+// blown back up (a cheap bloom). Pulses run along the struts, preferring to go straight, and light the
+// panels they pass. A bright ring sweeps pole to pole. The far side is dimmer, and a glossy floor mirrors it.
+const PARAMS = { pulses: 14, spin: 1, glow: 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');
+  const mk = () => { const c = document.createElement('canvas'); return [c, c.getContext('2d')]; };
+  const [neon, nx] = mk(), [sm1, s1x] = mk(), [sm2, s2x] = mk(), [refl, rx] = mk();
+  let W = 0, H = 0, D = 1;
+  const resize = () => {
+    D = Math.min(devicePixelRatio, 2); W = stage.clientWidth || 1; H = stage.clientHeight || 1;
+    canvas.width = neon.width = refl.width = W * D | 0; canvas.height = neon.height = refl.height = H * D | 0;
+    sm1.width = Math.max(1, W * D / 4 | 0); sm1.height = Math.max(1, H * D / 4 | 0); sm2.width = Math.max(1, W * D / 12 | 0); sm2.height = Math.max(1, H * D / 12 | 0);
+  };
+  const ro = new ResizeObserver(resize); ro.observe(stage); resize();
+
+  // ── geometry: frequency-3 icosphere
+  const g = (1 + Math.sqrt(5)) / 2;
+  const ico = [[-1, g, 0], [1, g, 0], [-1, -g, 0], [1, -g, 0], [0, -1, g], [0, 1, g], [0, -1, -g], [0, 1, -g], [g, 0, -1], [g, 0, 1], [-g, 0, -1], [-g, 0, 1]];
+  const icoF = [[0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11], [1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8], [3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9], [4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1]];
+  const V = [], vmap = new Map(), E = [], emap = new Map(), F = [], pent = new Set();
+  const nrm = a => { const l = Math.hypot(...a); return a.map(v => v / l); };
+  const vid = p => { const q = nrm(p), k = q.map(v => Math.round(v * 1e4)).join(','); if (!vmap.has(k)) { vmap.set(k, V.length); V.push(q); } return vmap.get(k); };
+  const eid = (a, b) => { const k = a < b ? a + '_' + b : b + '_' + a; if (!emap.has(k)) { emap.set(k, E.length); E.push({ a: Math.min(a, b), b: Math.max(a, b), faces: [] }); } return emap.get(k); };
+  const Fq = 3;
+  for (const [A, B, C] of icoF) {
+    const P = (i, j) => vid([0, 1, 2].map(c => (ico[A][c] * (Fq - i - j) + ico[B][c] * i + ico[C][c] * j) / Fq));
+    pent.add(P(0, 0)); pent.add(P(Fq, 0)); pent.add(P(0, Fq));
+    for (let j = 0; j < Fq; j++) for (let i = 0; i < Fq - j; i++) {
+      const tri = [[P(i, j), P(i + 1, j), P(i, j + 1)]];
+      if (i + j < Fq - 1) tri.push([P(i + 1, j), P(i + 1, j + 1), P(i, j + 1)]);
+      for (const t of tri) { const f = F.length; F.push({ v: t, e: 0 }); for (let k = 0; k < 3; k++) E[eid(t[k], t[(k + 1) % 3])].faces.push(f); }
+    }
+  }
+  const adj = V.map(() => []); E.forEach((e, i) => { adj[e.a].push([e.b, i]); adj[e.b].push([e.a, i]); });
+  const nodeHeat = new Float32Array(V.length);
+
+  // ── pulses: walk the struts, preferring to carry on straight, and light the panels they pass
+  const pulses = [];
+  const spawn = () => { const a = Math.random() * V.length | 0, [b] = adj[a][Math.random() * adj[a].length | 0]; return { a, b, p: Math.random(), speed: 1.1 + Math.random() * 0.9, trail: [], hue: Math.random() < 0.35 ? 1 : 0 }; };
+  const advance = (P, dt) => {
+    const A = V[P.a], B = V[P.b], len = Math.hypot(A[0] - B[0], A[1] - B[1], A[2] - B[2]);
+    P.p += dt * P.speed * 0.42 / len;
+    while (P.p >= 1) {
+      P.p -= 1; nodeHeat[P.b] = 1;
+      const dir = nrm(V[P.b].map((v, c) => v - V[P.a][c]));
+      let best = null, bs = -1e9;
+      for (const [n] of adj[P.b]) { if (n === P.a) continue; const d = nrm(V[n].map((v, c) => v - V[P.b][c])), s = d[0] * dir[0] + d[1] * dir[1] + d[2] * dir[2] + Math.random() * 0.9; if (s > bs) { bs = s; best = n; } }
+      P.a = P.b; P.b = best;
+      for (const f of E[emap.get(P.a < P.b ? P.a + '_' + P.b : P.b + '_' + P.a)].faces) F[f].e = 1;
+    }
+    const A2 = V[P.a], B2 = V[P.b]; P.pos = nrm(A2.map((v, c) => v + (B2[c] - v) * P.p));
+    P.trail.push(P.pos); if (P.trail.length > 16) P.trail.shift();
+  };
+
+  let raf, last = performance.now(), ang = 0; const t0 = last;
+  function frame(now) {
+    const dt = Math.min(0.05, (now - last) / 1000), t = (now - t0) / 1000; last = now;
+    ang += dt * 0.32 * PARAMS.spin;
+    const n = Math.max(0, Math.round(PARAMS.pulses)); while (pulses.length < n) pulses.push(spawn()); pulses.length = n;
+    for (const P of pulses) advance(P, dt);
+    const fade = Math.exp(-dt * 2.2); for (const f of F) f.e *= fade; for (let i = 0; i < nodeHeat.length; i++) nodeHeat[i] *= Math.exp(-dt * 3);
+
+    const R = Math.min(W * 0.3, H * 0.28), cx = W / 2, cy = H * 0.41, floorY = cy + R * 1.3;
+    const tilt = 0.36 + Math.sin(t * 0.21) * 0.08, ca = Math.cos(ang), sa = Math.sin(ang), ct = Math.cos(tilt), st = Math.sin(tilt), cam = 3.6;
+    const P3 = new Float32Array(V.length * 4);
+    const proj = (x, y, z, o) => { const x1 = x * ca + z * sa, z1 = -x * sa + z * ca, y1 = y * ct - z1 * st, z2 = y * st + z1 * ct, k = cam / (cam - z2); o[0] = cx + x1 * R * k; o[1] = cy - y1 * R * k; o[2] = z2; o[3] = k; return o; };
+    const tmp = [0, 0, 0, 0];
+    V.forEach((v, i) => { proj(v[0], v[1], v[2], tmp); P3.set(tmp, i * 4); });
+    const hueShift = Math.sin(t * 0.17) * 18;
+    const grad = (c, a) => { const gr = c.createLinearGradient(0, cy - R * 1.1, 0, cy + R * 1.1); gr.addColorStop(0, `hsla(${188 + hueShift},100%,64%,${a})`); gr.addColorStop(0.5, `hsla(${258 + hueShift},100%,68%,${a})`); gr.addColorStop(1, `hsla(${318 + hueShift},100%,64%,${a})`); return gr; };
+
+    // ── neon layer (in CSS pixels, scaled by D)
+    nx.setTransform(1, 0, 0, 1, 0, 0); nx.clearRect(0, 0, neon.width, neon.height); nx.setTransform(D, 0, 0, D, 0, 0);
+    nx.globalCompositeOperation = 'lighter'; nx.lineCap = 'round'; nx.lineJoin = 'round';
+    // panels lit by passing pulses (near side only)
+    for (const f of F) {
+      if (f.e < 0.02) continue;
+      const [a, b, c] = f.v, z = (P3[a * 4 + 2] + P3[b * 4 + 2] + P3[c * 4 + 2]) / 3; if (z < -0.15) continue;
+      nx.fillStyle = grad(nx, f.e * 0.16 * Math.min(1, z + 0.6)); nx.beginPath(); nx.moveTo(P3[a * 4], P3[a * 4 + 1]); nx.lineTo(P3[b * 4], P3[b * 4 + 1]); nx.lineTo(P3[c * 4], P3[c * 4 + 1]); nx.closePath(); nx.fill();
+    }
+    // struts in four depth bands: the far side thinner and dimmer
+    const sweep = ((t * 0.3) % 1.7) * 2 - 1.5, hot = [];
+    for (let band = 0; band < 4; band++) {
+      nx.beginPath();
+      for (const e of E) {
+        const za = P3[e.a * 4 + 2], zb = P3[e.b * 4 + 2], z = (za + zb) / 2, bnd = Math.min(3, Math.max(0, Math.floor((z + 1) * 2)));
+        if (bnd !== band) continue;
+        nx.moveTo(P3[e.a * 4], P3[e.a * 4 + 1]); nx.lineTo(P3[e.b * 4], P3[e.b * 4 + 1]);
+        if (Math.abs((V[e.a][1] + V[e.b][1]) / 2 - sweep) < 0.09) hot.push(e);
+      }
+      nx.strokeStyle = grad(nx, [0.07, 0.16, 0.45, 0.95][band]); nx.lineWidth = [0.7, 0.9, 1.2, 1.5][band]; nx.stroke();
+    }
+    // the sweeping ring: those struts burn whiter
+    nx.beginPath(); for (const e of hot) { const z = (P3[e.a * 4 + 2] + P3[e.b * 4 + 2]) / 2; if (z < -0.3) continue; nx.moveTo(P3[e.a * 4], P3[e.a * 4 + 1]); nx.lineTo(P3[e.b * 4], P3[e.b * 4 + 1]); }
+    nx.strokeStyle = 'rgba(225,240,255,.7)'; nx.lineWidth = 1.5; nx.stroke();
+    // nodes: the twelve five-way joints are bigger
+    for (let i = 0; i < V.length; i++) {
+      const x = P3[i * 4], y = P3[i * 4 + 1], z = P3[i * 4 + 2], k = P3[i * 4 + 3], a = 0.25 + 0.75 * Math.max(0, (z + 1) / 2) ** 1.5, hh = nodeHeat[i];
+      const r = (pent.has(i) ? 2 : 1.1) * k + hh * 1.6;
+      nx.fillStyle = `rgba(${200 + 55 * hh | 0},${230 + 25 * hh | 0},255,${Math.min(1, a * ((pent.has(i) ? 0.6 : 0.3) + hh))})`; nx.beginPath(); nx.arc(x, y, r, 0, 6.2832); nx.fill();
+    }
+    // pulses: a fading tail and a white-hot head
+    for (const P of pulses) {
+      const pts = P.trail.map(p => proj(p[0], p[1], p[2], [0, 0, 0, 0])), col = P.hue ? '255,236,190' : '255,178,90';
+      for (let i = 1; i < pts.length; i++) {
+        const a = pts[i - 1], b = pts[i], f = i / pts.length, depth = Math.max(0.15, (b[2] + 1) / 2);
+        nx.strokeStyle = `rgba(${col},${f * 0.9 * depth})`; nx.lineWidth = (0.8 + f * 1.7) * b[3]; nx.beginPath(); nx.moveTo(a[0], a[1]); nx.lineTo(b[0], b[1]); nx.stroke();
+      }
+      const h = pts[pts.length - 1]; if (!h) continue; const depth = Math.max(0.2, (h[2] + 1) / 2);
+      nx.fillStyle = `rgba(255,255,255,${depth})`; nx.beginPath(); nx.arc(h[0], h[1], 2.2 * h[3], 0, 6.2832); nx.fill();
+      nx.fillStyle = `rgba(${col},${0.4 * depth})`; nx.beginPath(); nx.arc(h[0], h[1], 5 * h[3], 0, 6.2832); nx.fill();
+    }
+
+    // ── compose: background, floor glow, mirrored reflection, then bloom + crisp neon
+    ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalCompositeOperation = 'source-over';
+    const bg = ctx.createLinearGradient(0, 0, 0, canvas.height); bg.addColorStop(0, '#07061a'); const fy = Math.min(0.99, floorY / H); bg.addColorStop(fy, '#0f0b2a'); bg.addColorStop(fy + 0.005, '#06051a'); bg.addColorStop(1, '#030210');
+    ctx.fillStyle = bg; ctx.fillRect(0, 0, canvas.width, canvas.height);
+    const halo = ctx.createRadialGradient(cx * D, cy * D, R * 0.4 * D, cx * D, cy * D, R * 2.1 * D); halo.addColorStop(0, `hsla(${255 + hueShift},90%,45%,.22)`); halo.addColorStop(1, 'hsla(260,90%,40%,0)');
+    ctx.fillStyle = halo; ctx.fillRect(0, 0, canvas.width, canvas.height);
+    const pool = ctx.createRadialGradient(cx * D, floorY * D, 0, cx * D, floorY * D, R * 1.6 * D); pool.addColorStop(0, `hsla(${300 + hueShift},100%,60%,.22)`); pool.addColorStop(1, 'hsla(300,100%,60%,0)');
+    ctx.save(); ctx.translate(cx * D, floorY * D); ctx.scale(1, 0.16); ctx.translate(-cx * D, -floorY * D); ctx.fillStyle = pool; ctx.fillRect(0, (floorY - R * 1.6) * D, canvas.width, R * 3.2 * D); ctx.restore();
+    // reflection: the neon layer flipped about the floor line, faded with distance
+    rx.setTransform(1, 0, 0, 1, 0, 0); rx.globalCompositeOperation = 'source-over'; rx.clearRect(0, 0, refl.width, refl.height);
+    rx.setTransform(1, 0, 0, -1, 0, 2 * floorY * D); rx.drawImage(neon, 0, 0); rx.setTransform(1, 0, 0, 1, 0, 0);
+    rx.globalCompositeOperation = 'destination-in';
+    const rf = rx.createLinearGradient(0, floorY * D, 0, (floorY + R * 1.4) * D); rf.addColorStop(0, 'rgba(0,0,0,.42)'); rf.addColorStop(1, 'rgba(0,0,0,0)');
+    rx.fillStyle = rf; rx.fillRect(0, floorY * D, refl.width, refl.height);
+    ctx.globalCompositeOperation = 'lighter';
+    ctx.drawImage(refl, 0, 0);
+    // bloom: shrink twice, blow back up (bilinear), add
+    s1x.clearRect(0, 0, sm1.width, sm1.height); s1x.drawImage(neon, 0, 0, sm1.width, sm1.height); s1x.drawImage(refl, 0, 0, sm1.width, sm1.height);
+    s2x.clearRect(0, 0, sm2.width, sm2.height); s2x.drawImage(sm1, 0, 0, sm2.width, sm2.height);
+    ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';
+    const gk = PARAMS.glow;
+    ctx.globalAlpha = Math.min(1, 0.85 * gk); ctx.drawImage(sm2, 0, 0, canvas.width, canvas.height);
+    ctx.globalAlpha = Math.min(1, 0.5 * gk); ctx.drawImage(sm1, 0, 0, canvas.width, canvas.height);
+    ctx.globalAlpha = 1; ctx.drawImage(neon, 0, 0);
+    ctx.globalCompositeOperation = 'source-over';
+    raf = requestAnimationFrame(frame);
+  }
+  raf = requestAnimationFrame(frame);
+  return () => { cancelAnimationFrame(raf); ro.disconnect(); canvas.remove(); };
+}