3d-spinner 0.9.3 → 0.9.5

package/dist/cjs/prefabs/prefabs.cjs

@@ -136,7 +136,10 @@ function expandToTriangles(mesh) {
   const positions = new Float32Array(triangles * 9);
   const normals = new Float32Array(triangles * 9);
   const colors = new Float32Array(triangles * 9);
+  const emissives = new Float32Array(triangles * 9);
+  const speculars = new Float32Array(triangles * 12);
   let o = 0;
+  let so = 0;
   for (const face of mesh.faces) {
     const v0 = mesh.vertices[face.indices[0]];
     const v1 = mesh.vertices[face.indices[1]];
@@ -146,6 +149,15 @@ function expandToTriangles(mesh) {
     const cr = r / 255;
     const cg = g / 255;
     const cb = b / 255;
+    const emissive = face.material?.emissive;
+    const er = emissive ? emissive[0] : 0;
+    const eg = emissive ? emissive[1] : 0;
+    const eb = emissive ? emissive[2] : 0;
+    const specular = face.material?.specular;
+    const sr = specular ? specular[0] : 0;
+    const sg = specular ? specular[1] : 0;
+    const sb = specular ? specular[2] : 0;
+    const sn = specular ? face.material?.shininess ?? 32 : 1;
     for (let k = 1; k < face.indices.length - 1; k++) {
       const tri = [face.indices[0], face.indices[k], face.indices[k + 1]];
       for (const index of tri) {
@@ -159,11 +171,19 @@ function expandToTriangles(mesh) {
         colors[o] = cr;
         colors[o + 1] = cg;
         colors[o + 2] = cb;
+        emissives[o] = er;
+        emissives[o + 1] = eg;
+        emissives[o + 2] = eb;
+        speculars[so] = sr;
+        speculars[so + 1] = sg;
+        speculars[so + 2] = sb;
+        speculars[so + 3] = sn;
         o += 3;
+        so += 4;
       }
     }
   }
-  return { positions, normals, colors, count: positions.length / 3 };
+  return { positions, normals, colors, emissives, speculars, count: positions.length / 3 };
 }
 function midpoint(a, b) {
   return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2, z: (a.z + b.z) / 2 };
@@ -201,13 +221,42 @@ var init_geometry = __esm({
 function clamp01(value) {
   return Math.min(1, Math.max(0, value));
 }
-function shadeColor(normal, color, light) {
+function clamp255(value) {
+  return Math.round(Math.min(255, Math.max(0, value)));
+}
+function shade(normal, color, light, surface) {
   const lambert = Math.max(0, dot(normal, light.toLight));
   const brightness = clamp01(light.ambient + light.intensity * lambert);
-  const [r, g, b] = parseColor(color);
-  return `rgb(${Math.round(r * brightness)}, ${Math.round(g * brightness)}, ${Math.round(
-    b * brightness
-  )})`;
+  const [baseR, baseG, baseB] = parseColor(color);
+  let r = baseR * brightness;
+  let g = baseG * brightness;
+  let b = baseB * brightness;
+  const material = surface?.material;
+  const specular = material?.specular;
+  const viewDir = surface?.viewDir;
+  if (specular && viewDir && lambert > 0) {
+    const half = normalize({
+      x: light.toLight.x + viewDir.x,
+      y: light.toLight.y + viewDir.y,
+      z: light.toLight.z + viewDir.z
+    });
+    const shininess = material?.shininess ?? 32;
+    const highlight = Math.pow(Math.max(0, dot(normal, half)), shininess) * light.intensity * 255;
+    r += highlight * specular[0];
+    g += highlight * specular[1];
+    b += highlight * specular[2];
+  }
+  const emissive = material?.emissive;
+  if (emissive) {
+    r += emissive[0] * 255;
+    g += emissive[1] * 255;
+    b += emissive[2] * 255;
+  }
+  return [clamp255(r), clamp255(g), clamp255(b)];
+}
+function shadeColor(normal, color, light, surface) {
+  const [r, g, b] = shade(normal, color, light, surface);
+  return `rgb(${r}, ${g}, ${b})`;
 }
 var DEFAULTS2, Light;
 var init_light = __esm({
@@ -230,8 +279,8 @@ var init_light = __esm({
         };
       }
       /** Convenience wrapper around {@link shadeColor} using this light. */
-      shade(normal, color) {
-        return shadeColor(normal, color, this.params);
+      shade(normal, color, surface) {
+        return shadeColor(normal, color, this.params, surface);
       }
     };
   }
@@ -271,28 +320,51 @@ var init_webgl = __esm({
 in vec3 aPos;
 in vec3 aNormal;
 in vec3 aColor;
+in vec3 aEmissive;
+in vec4 aSpecular;
 uniform mat4 uViewProj;
 uniform mat4 uModel;
 out vec3 vNormal;
 out vec3 vColor;
+out vec3 vEmissive;
+out vec4 vSpecular;
+out vec3 vWorldPos;
 void main() {
   vNormal = mat3(uModel) * aNormal;
   vColor = aColor;
-  gl_Position = uViewProj * uModel * vec4(aPos, 1.0);
+  vEmissive = aEmissive;
+  vSpecular = aSpecular;
+  vec4 world = uModel * vec4(aPos, 1.0);
+  vWorldPos = world.xyz;
+  gl_Position = uViewProj * world;
 }`;
     FRAGMENT_SHADER = `#version 300 es
 precision mediump float;
 in vec3 vNormal;
 in vec3 vColor;
+in vec3 vEmissive;
+in vec4 vSpecular;
+in vec3 vWorldPos;
 uniform vec3 uToLight;
+uniform vec3 uEye;
 uniform float uIntensity;
 uniform float uAmbient;
 uniform float uOpacity;
 out vec4 fragColor;
 void main() {
-  float lambert = max(dot(normalize(vNormal), normalize(uToLight)), 0.0);
+  vec3 normal = normalize(vNormal);
+  vec3 toLight = normalize(uToLight);
+  float lambert = max(dot(normal, toLight), 0.0);
   float brightness = clamp(uAmbient + uIntensity * lambert, 0.0, 1.0);
-  fragColor = vec4(vColor * brightness, uOpacity);
+  vec3 lit = vColor * brightness;
+  if (lambert > 0.0) {
+    vec3 viewDir = normalize(uEye - vWorldPos);
+    vec3 halfVec = normalize(toLight + viewDir);
+    float highlight = pow(max(dot(normal, halfVec), 0.0), vSpecular.w) * uIntensity;
+    lit += highlight * vSpecular.xyz;
+  }
+  lit += vEmissive;
+  fragColor = vec4(lit, uOpacity);
 }`;
     WebGLRenderer = class {
       constructor(options = {}) {
@@ -313,9 +385,12 @@ void main() {
           aPos: gl.getAttribLocation(this.program, "aPos"),
           aNormal: gl.getAttribLocation(this.program, "aNormal"),
           aColor: gl.getAttribLocation(this.program, "aColor"),
+          aEmissive: gl.getAttribLocation(this.program, "aEmissive"),
+          aSpecular: gl.getAttribLocation(this.program, "aSpecular"),
           uViewProj: gl.getUniformLocation(this.program, "uViewProj"),
           uModel: gl.getUniformLocation(this.program, "uModel"),
           uToLight: gl.getUniformLocation(this.program, "uToLight"),
+          uEye: gl.getUniformLocation(this.program, "uEye"),
           uIntensity: gl.getUniformLocation(this.program, "uIntensity"),
           uAmbient: gl.getUniformLocation(this.program, "uAmbient"),
           uOpacity: gl.getUniformLocation(this.program, "uOpacity")
@@ -339,17 +414,19 @@ void main() {
         const data = expandToTriangles(mesh);
         const vao = gl.createVertexArray();
         gl.bindVertexArray(vao);
-        const attribute = (location, array) => {
+        const attribute = (location, array, size = 3) => {
           if (location < 0) return;
           const buffer = gl.createBuffer();
           gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
           gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
           gl.enableVertexAttribArray(location);
-          gl.vertexAttribPointer(location, 3, gl.FLOAT, false, 0, 0);
+          gl.vertexAttribPointer(location, size, gl.FLOAT, false, 0, 0);
         };
         attribute(loc.aPos, data.positions);
         attribute(loc.aNormal, data.normals);
         attribute(loc.aColor, data.colors);
+        attribute(loc.aEmissive, data.emissives);
+        attribute(loc.aSpecular, data.speculars, 4);
         gl.bindVertexArray(null);
         const result = { vao, count: data.count };
         this.cache.set(mesh, result);
@@ -364,6 +441,7 @@ void main() {
         gl.useProgram(this.program);
         gl.uniformMatrix4fv(loc.uViewProj, false, new Float32Array(frame.viewProjection));
         gl.uniform3f(loc.uToLight, frame.light.toLight.x, frame.light.toLight.y, frame.light.toLight.z);
+        gl.uniform3f(loc.uEye, frame.eye.x, frame.eye.y, frame.eye.z);
         gl.uniform1f(loc.uIntensity, frame.light.intensity);
         gl.uniform1f(loc.uAmbient, frame.light.ambient);
         gl.disable(gl.BLEND);
@@ -438,6 +516,7 @@ struct Uniforms {
   model: mat4x4<f32>,
   toLight: vec4<f32>,
   params: vec4<f32>,
+  eye: vec4<f32>,
 };
 @group(0) @binding(0) var<uniform> u: Uniforms;
 
@@ -445,23 +524,40 @@ struct VSOut {
   @builtin(position) position: vec4<f32>,
   @location(0) normal: vec3<f32>,
   @location(1) color: vec3<f32>,
+  @location(2) emissive: vec3<f32>,
+  @location(3) specular: vec4<f32>,
+  @location(4) worldPos: vec3<f32>,
 };
 
 @vertex
-fn vs(@location(0) pos: vec3<f32>, @location(1) normal: vec3<f32>, @location(2) color: vec3<f32>) -> VSOut {
+fn vs(@location(0) pos: vec3<f32>, @location(1) normal: vec3<f32>, @location(2) color: vec3<f32>, @location(3) emissive: vec3<f32>, @location(4) specular: vec4<f32>) -> VSOut {
   var out: VSOut;
   let m = mat3x3<f32>(u.model[0].xyz, u.model[1].xyz, u.model[2].xyz);
   out.normal = m * normal;
   out.color = color;
-  out.position = u.viewProj * u.model * vec4<f32>(pos, 1.0);
+  out.emissive = emissive;
+  out.specular = specular;
+  let world = u.model * vec4<f32>(pos, 1.0);
+  out.worldPos = world.xyz;
+  out.position = u.viewProj * world;
   return out;
 }
 
 @fragment
 fn fs(in: VSOut) -> @location(0) vec4<f32> {
-  let lambert = max(dot(normalize(in.normal), normalize(u.toLight.xyz)), 0.0);
+  let normal = normalize(in.normal);
+  let toLight = normalize(u.toLight.xyz);
+  let lambert = max(dot(normal, toLight), 0.0);
   let brightness = clamp(u.params.y + u.params.x * lambert, 0.0, 1.0);
-  return vec4<f32>(in.color * brightness, u.params.z);
+  var lit = in.color * brightness;
+  if (lambert > 0.0) {
+    let viewDir = normalize(u.eye.xyz - in.worldPos);
+    let halfVec = normalize(toLight + viewDir);
+    let highlight = pow(max(dot(normal, halfVec), 0.0), in.specular.w) * u.params.x;
+    lit = lit + highlight * in.specular.xyz;
+  }
+  lit = lit + in.emissive;
+  return vec4<f32>(lit, u.params.z);
 }
 `;
     CLIP_Z_FIX = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.5, 0, 0, 0, 0.5, 1];
@@ -502,13 +598,15 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
             {
               binding: 0,
               visibility: stage.VERTEX | stage.FRAGMENT,
-              buffer: { type: "uniform", hasDynamicOffset: true, minBindingSize: 160 }
+              buffer: { type: "uniform", hasDynamicOffset: true, minBindingSize: 176 }
             }
           ]
         });
-        const vertexBuffer = (location) => ({
-          arrayStride: 12,
-          attributes: [{ shaderLocation: location, offset: 0, format: "float32x3" }]
+        const vertexBuffer = (location, components = 3) => ({
+          arrayStride: components * 4,
+          attributes: [
+            { shaderLocation: location, offset: 0, format: `float32x${components}` }
+          ]
         });
         const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [layout] });
         const blend = {
@@ -524,7 +622,13 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           vertex: {
             module: module2,
             entryPoint: "vs",
-            buffers: [vertexBuffer(0), vertexBuffer(1), vertexBuffer(2)]
+            buffers: [
+              vertexBuffer(0),
+              vertexBuffer(1),
+              vertexBuffer(2),
+              vertexBuffer(3),
+              vertexBuffer(4, 4)
+            ]
           },
           fragment: {
             module: module2,
@@ -577,6 +681,8 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           position: upload(data.positions),
           normal: upload(data.normals),
           color: upload(data.colors),
+          emissive: upload(data.emissives),
+          specular: upload(data.speculars),
           count: data.count
         };
         this.cache.set(mesh, result);
@@ -628,7 +734,7 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
         const bindGroup = this.device.createBindGroup({
           layout,
           entries: [
-            { binding: 0, resource: { buffer: this.uniformBuffer, offset: 0, size: 160 } }
+            { binding: 0, resource: { buffer: this.uniformBuffer, offset: 0, size: 176 } }
           ]
         });
         draws.forEach((draw, i) => {
@@ -637,6 +743,7 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           data.set(draw.item.model, 16);
           data.set([frame.light.toLight.x, frame.light.toLight.y, frame.light.toLight.z, 0], 32);
           data.set([frame.light.intensity, frame.light.ambient, draw.opacity, 0], 36);
+          data.set([frame.eye.x, frame.eye.y, frame.eye.z, 0], 40);
           this.device.queue.writeBuffer(this.uniformBuffer, i * UNIFORM_STRIDE, data);
         });
         const encoder = this.device.createCommandEncoder();
@@ -663,6 +770,8 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           pass.setVertexBuffer(0, mesh.position);
           pass.setVertexBuffer(1, mesh.normal);
           pass.setVertexBuffer(2, mesh.color);
+          pass.setVertexBuffer(3, mesh.emissive);
+          pass.setVertexBuffer(4, mesh.specular);
           pass.draw(mesh.count);
         });
         pass.end();
@@ -674,6 +783,8 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
           mesh.position.destroy?.();
           mesh.normal.destroy?.();
           mesh.color.destroy?.();
+          mesh.emissive.destroy?.();
+          mesh.specular.destroy?.();
         }
         this.cache.clear();
         this.uniformBuffer?.destroy?.();
@@ -756,9 +867,30 @@ var init_canvas2d = __esm({
               depth += dot(d, d);
             }
             depth /= face.indices.length;
+            let surface;
+            const material = face.material;
+            if (material) {
+              if (material.specular) {
+                let cx = 0;
+                let cy = 0;
+                let cz = 0;
+                for (const i of face.indices) {
+                  cx += world[i].x;
+                  cy += world[i].y;
+                  cz += world[i].z;
+                }
+                const inv = 1 / face.indices.length;
+                const viewDir = normalize(
+                  subtract(frame.eye, { x: cx * inv, y: cy * inv, z: cz * inv })
+                );
+                surface = { material, viewDir };
+              } else {
+                surface = { material };
+              }
+            }
             polygons.push({
               points,
-              color: shadeColor(normal, face.color, frame.light),
+              color: shadeColor(normal, face.color, frame.light, surface),
               depth,
               opacity: faceOpacity
             });
@@ -1624,6 +1756,12 @@ init_light();
 init_math();
 
 // src/engines/little-3d-engine/core/mesh.ts
+function attachMaterial(mesh, material) {
+  if (material) {
+    for (const face of mesh.faces) face.material = material;
+  }
+  return mesh;
+}
 function transform(init) {
   return {
     position: init?.position ?? { x: 0, y: 0, z: 0 },
@@ -1638,7 +1776,7 @@ init_light();
 
 // src/engines/little-3d-engine/shapes/primitives/cube.ts
 var DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
-function cube(size = 1, colors = DEFAULT_COLORS) {
+function cube(size = 1, colors = DEFAULT_COLORS, material) {
   const h = size / 2;
   const vertices = [
     { x: -h, y: -h, z: h },
@@ -1658,12 +1796,12 @@ function cube(size = 1, colors = DEFAULT_COLORS) {
     { indices: [1, 5, 6, 2], color: colors[4 % colors.length] },
     { indices: [4, 0, 3, 7], color: colors[5 % colors.length] }
   ];
-  return { vertices, faces };
+  return attachMaterial({ vertices, faces }, material);
 }
 
 // src/engines/little-3d-engine/shapes/primitives/quad.ts
 var DEFAULT_COLORS2 = ["#3b82f6"];
-function quad(size = 1, colors = DEFAULT_COLORS2) {
+function quad(size = 1, colors = DEFAULT_COLORS2, material) {
   const s = size / 2;
   const vertices = [
     { x: -s, y: -s, z: 0 },
@@ -1671,12 +1809,15 @@ function quad(size = 1, colors = DEFAULT_COLORS2) {
     { x: s, y: s, z: 0 },
     { x: -s, y: s, z: 0 }
   ];
-  return { vertices, faces: [{ indices: [0, 1, 2, 3], color: colors[0] }] };
+  return attachMaterial(
+    { vertices, faces: [{ indices: [0, 1, 2, 3], color: colors[0] }] },
+    material
+  );
 }
 
 // src/engines/little-3d-engine/shapes/primitives/tetrahedron.ts
 var DEFAULT_COLORS3 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b"];
-function tetrahedron(size = 1, colors = DEFAULT_COLORS3) {
+function tetrahedron(size = 1, colors = DEFAULT_COLORS3, material) {
   const s = size / 2;
   const vertices = [
     { x: s, y: s, z: s },
@@ -1690,46 +1831,12 @@ function tetrahedron(size = 1, colors = DEFAULT_COLORS3) {
     { indices: [0, 2, 3], color: colors[2 % colors.length] },
     { indices: [1, 3, 2], color: colors[3 % colors.length] }
   ];
-  return { vertices, faces };
-}
-
-// src/engines/little-3d-engine/shapes/primitives/octahedron.ts
-var DEFAULT_COLORS4 = [
-  "#3b82f6",
-  "#8b5cf6",
-  "#ec4899",
-  "#f59e0b",
-  "#10b981",
-  "#ef4444",
-  "#06b6d4",
-  "#eab308"
-];
-function octahedron(size = 1, colors = DEFAULT_COLORS4) {
-  const r = size / 2;
-  const vertices = [
-    { x: r, y: 0, z: 0 },
-    { x: -r, y: 0, z: 0 },
-    { x: 0, y: r, z: 0 },
-    { x: 0, y: -r, z: 0 },
-    { x: 0, y: 0, z: r },
-    { x: 0, y: 0, z: -r }
-  ];
-  const faces = [
-    { indices: [4, 0, 2], color: colors[0 % colors.length] },
-    { indices: [4, 2, 1], color: colors[1 % colors.length] },
-    { indices: [4, 1, 3], color: colors[2 % colors.length] },
-    { indices: [4, 3, 0], color: colors[3 % colors.length] },
-    { indices: [5, 2, 0], color: colors[4 % colors.length] },
-    { indices: [5, 1, 2], color: colors[5 % colors.length] },
-    { indices: [5, 3, 1], color: colors[6 % colors.length] },
-    { indices: [5, 0, 3], color: colors[7 % colors.length] }
-  ];
-  return { vertices, faces };
+  return attachMaterial({ vertices, faces }, material);
 }
 
 // src/engines/little-3d-engine/shapes/primitives/pyramid.ts
-var DEFAULT_COLORS5 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
-function pyramid(size = 1, colors = DEFAULT_COLORS5) {
+var DEFAULT_COLORS4 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
+function pyramid(size = 1, colors = DEFAULT_COLORS4, material) {
   const h = size / 2;
   const vertices = [
     { x: -h, y: -h, z: h },
@@ -1745,12 +1852,12 @@ function pyramid(size = 1, colors = DEFAULT_COLORS5) {
     { indices: [4, 2, 3], color: colors[3 % colors.length] },
     { indices: [4, 3, 0], color: colors[4 % colors.length] }
   ];
-  return { vertices, faces };
+  return attachMaterial({ vertices, faces }, material);
 }
 
 // src/engines/little-3d-engine/shapes/primitives/spheres/icosphere.ts
 init_geometry();
-var DEFAULT_COLORS6 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+var DEFAULT_COLORS5 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 var T = (1 + Math.sqrt(5)) / 2;
 var SEED_VERTICES = [
   { x: -1, y: T, z: 0 },
@@ -1788,17 +1895,20 @@ var SEED_FACES = [
   [8, 6, 7],
   [9, 8, 1]
 ];
-function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS6) {
-  return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
+function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS5, material) {
+  return attachMaterial(
+    sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors),
+    material
+  );
 }
 
 // src/engines/little-3d-engine/shapes/primitives/spheres/octa-sphere.ts
 init_geometry();
 
 // src/engines/little-3d-engine/shapes/complex/plane.ts
-var DEFAULT_COLORS7 = ["#e0f2fe", "#7dd3fc", "#38bdf8", "#f8fafc"];
-function planeMesh(colors = DEFAULT_COLORS7) {
-  return {
+var DEFAULT_COLORS6 = ["#e0f2fe", "#7dd3fc", "#38bdf8", "#f8fafc"];
+function planeMesh(colors = DEFAULT_COLORS6, material) {
+  return attachMaterial({
     vertices: [
       { x: 0.9, y: 0, z: 0 },
       { x: -0.2, y: 0, z: 0.82 },
@@ -1811,22 +1921,22 @@ function planeMesh(colors = DEFAULT_COLORS7) {
       { x: -0.52, y: 0.38, z: 0 }
     ],
     faces: [
-      { indices: [6, 1, 0], color: colors[0] ?? DEFAULT_COLORS7[0] },
-      { indices: [6, 2, 1], color: colors[3] ?? DEFAULT_COLORS7[3] },
-      { indices: [6, 3, 2], color: colors[1] ?? DEFAULT_COLORS7[1] },
-      { indices: [6, 4, 3], color: colors[2] ?? DEFAULT_COLORS7[2] },
-      { indices: [6, 5, 4], color: colors[3] ?? DEFAULT_COLORS7[3] },
-      { indices: [6, 0, 5], color: colors[0] ?? DEFAULT_COLORS7[0] },
-      { indices: [7, 0, 1], color: colors[1] ?? DEFAULT_COLORS7[1] },
-      { indices: [7, 1, 2], color: colors[2] ?? DEFAULT_COLORS7[2] },
-      { indices: [7, 2, 3], color: colors[1] ?? DEFAULT_COLORS7[1] },
-      { indices: [7, 3, 4], color: colors[2] ?? DEFAULT_COLORS7[2] },
-      { indices: [7, 4, 5], color: colors[1] ?? DEFAULT_COLORS7[1] },
-      { indices: [7, 5, 0], color: colors[2] ?? DEFAULT_COLORS7[2] },
-      { indices: [3, 6, 8], color: colors[0] ?? DEFAULT_COLORS7[0] },
-      { indices: [3, 8, 6], color: colors[1] ?? DEFAULT_COLORS7[1] }
+      { indices: [6, 1, 0], color: colors[0] ?? DEFAULT_COLORS6[0] },
+      { indices: [6, 2, 1], color: colors[3] ?? DEFAULT_COLORS6[3] },
+      { indices: [6, 3, 2], color: colors[1] ?? DEFAULT_COLORS6[1] },
+      { indices: [6, 4, 3], color: colors[2] ?? DEFAULT_COLORS6[2] },
+      { indices: [6, 5, 4], color: colors[3] ?? DEFAULT_COLORS6[3] },
+      { indices: [6, 0, 5], color: colors[0] ?? DEFAULT_COLORS6[0] },
+      { indices: [7, 0, 1], color: colors[1] ?? DEFAULT_COLORS6[1] },
+      { indices: [7, 1, 2], color: colors[2] ?? DEFAULT_COLORS6[2] },
+      { indices: [7, 2, 3], color: colors[1] ?? DEFAULT_COLORS6[1] },
+      { indices: [7, 3, 4], color: colors[2] ?? DEFAULT_COLORS6[2] },
+      { indices: [7, 4, 5], color: colors[1] ?? DEFAULT_COLORS6[1] },
+      { indices: [7, 5, 0], color: colors[2] ?? DEFAULT_COLORS6[2] },
+      { indices: [3, 6, 8], color: colors[0] ?? DEFAULT_COLORS6[0] },
+      { indices: [3, 8, 6], color: colors[1] ?? DEFAULT_COLORS6[1] }
     ]
-  };
+  }, material);
 }
 
 // src/engines/little-3d-engine/textures/dynamic/canvas-texture.ts
@@ -1839,18 +1949,30 @@ function canvasTexture(draw, size = 96) {
 }
 
 // src/engines/little-3d-engine/textures/dynamic/star.ts
-function starTexture() {
+function drawStar(ctx) {
+  ctx.save();
+  ctx.translate(48, 48);
+  ctx.fillStyle = "#fff";
+  ctx.beginPath();
+  for (let index = 0; index < 10; index++) {
+    const radius = index % 2 === 0 ? 43 : 16;
+    const angle = index * Math.PI / 5 - Math.PI / 2;
+    ctx.lineTo(radius * Math.cos(angle), radius * Math.sin(angle));
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+function starTexture(options = {}) {
+  const glow = Math.max(0, options.glow ?? 0);
   return canvasTexture((ctx) => {
-    ctx.translate(48, 48);
-    ctx.fillStyle = "#fff";
-    ctx.beginPath();
-    for (let index = 0; index < 10; index++) {
-      const radius = index % 2 === 0 ? 43 : 16;
-      const angle = index * Math.PI / 5 - Math.PI / 2;
-      ctx.lineTo(radius * Math.cos(angle), radius * Math.sin(angle));
+    if (glow > 0) {
+      ctx.save();
+      ctx.filter = `blur(${glow}px)`;
+      drawStar(ctx);
+      ctx.restore();
     }
-    ctx.closePath();
-    ctx.fill();
+    drawStar(ctx);
   });
 }
 
@@ -2034,7 +2156,7 @@ var Little3dEngine = class {
 };
 
 // src/animations/particles.ts
-var DEFAULT_COLORS8 = ["#fde047", "#fb923c", "#f472b6", "#60a5fa"];
+var DEFAULT_COLORS7 = ["#fde047", "#fb923c", "#f472b6", "#60a5fa"];
 var FADE_IN_END = 0.15;
 var FADE_OUT_START = 0.6;
 function rand01(seed, index, salt) {
@@ -2129,7 +2251,7 @@ var ParticlesAnimation = class {
     this.exitAt = Infinity;
     this.finished = false;
     this.field = particleField(options);
-    this.colors = options.colors ?? DEFAULT_COLORS8;
+    this.colors = options.colors ?? DEFAULT_COLORS7;
     this.backend = options.backend;
     this.texture = options.texture;
     this.labelContent = options.label;
@@ -2274,6 +2396,7 @@ var REENTER_STAGGER_MS = 45;
 var CENTER_POP_OUT_AT = REENTER_MS + (MINIS - 1) * REENTER_STAGGER_MS + 150;
 var CENTER_POP_OUT_MS = 420;
 var PARKED = { x: 0, y: 0, z: 50 };
+var ORB_MATERIAL = { specular: [1, 1, 1], shininess: 28 };
 var CENTER_COLORS = ["#67e8f9", "#22d3ee", "#0ea5e9", "#38bdf8", "#7dd3fc"];
 var MINI_COLORS = [
   ["#e0f2fe", "#bae6fd", "#7dd3fc"],
@@ -2302,9 +2425,9 @@ var ChargedOrbAnimation = class {
       backend: this.backend,
       camera: { position: { x: 0, y: 0, z: CAMERA_Z } }
     });
-    this.center = engine.add(icosphere(1, 2, CENTER_COLORS), { scale: 0 });
+    this.center = engine.add(icosphere(1, 2, CENTER_COLORS, ORB_MATERIAL), { scale: 0 });
     for (let i = 0; i < MINIS; i++) {
-      const mesh = icosphere(1, 1, MINI_COLORS[i % MINI_COLORS.length]);
+      const mesh = icosphere(1, 1, MINI_COLORS[i % MINI_COLORS.length], ORB_MATERIAL);
       this.minis.push(engine.add(mesh, { scale: 0, transparency: { ...MINI_TRANSPARENCY } }));
     }
     this.engine = engine;
@@ -2952,46 +3075,250 @@ function squareMotion(options = {}) {
   };
 }
 
+// src/animations/ghost-train.ts
+var MAX_CARS = 50;
+var CAMERA_Z2 = 3;
+var FOV = 55 * Math.PI / 180;
+var HALF_HEIGHT = Math.tan(FOV / 2) * CAMERA_Z2;
+var RUN_GAP_MS = 130;
+var POP_MS = 320;
+var SAMPLE_MS2 = 8;
+var TURN_RATE = 0.4 * Math.PI / 180;
+var MAX_OUTRO_MS = 4e3;
+var WARP_ACCEL = 1e3;
+var TRAIL_OUTRO_MS = 1200;
+var TRANSPARENCY = { mode: "two-sided", opacity: 0.275 };
+var CAR_COLORS = ["#bae6fd", "#7dd3fc", "#38bdf8", "#0ea5e9", "#a5f3fc", "#e0f2fe"];
+var CAR_MATERIAL = { emissive: [0.1, 0.2, 0.3] };
+var WORLD_UP2 = { x: 0, y: 1, z: 0 };
+function clamp014(value) {
+  return Math.max(0, Math.min(1, value));
+}
+function orientationFor2(forward) {
+  const fwd = normalize(forward);
+  let right = cross(fwd, WORLD_UP2);
+  if (Math.hypot(right.x, right.y, right.z) < 1e-4) right = { x: 0, y: 0, z: 1 };
+  right = normalize(right);
+  const up = cross(right, fwd);
+  const w = normalize(cross(fwd, up));
+  return {
+    x: Math.atan2(cross(w, fwd).z, w.z),
+    y: Math.asin(Math.max(-1, Math.min(1, -fwd.z))),
+    z: Math.atan2(fwd.y, fwd.x)
+  };
+}
+function rotateToward(from, to, maxRad) {
+  const a = normalize(from);
+  const b = normalize(to);
+  const d = Math.max(-1, Math.min(1, dot(a, b)));
+  const angle = Math.acos(d);
+  if (angle <= maxRad || angle < 1e-4) return b;
+  const sin = Math.sin(angle);
+  if (sin < 1e-4) return b;
+  const t = maxRad / angle;
+  const w1 = Math.sin((1 - t) * angle) / sin;
+  const w2 = Math.sin(t * angle) / sin;
+  return normalize({ x: a.x * w1 + b.x * w2, y: a.y * w1 + b.y * w2, z: a.z * w1 + b.z * w2 });
+}
+var GhostTrainAnimation = class {
+  constructor(options = {}) {
+    this.cars = [];
+    this.appear = new Array(MAX_CARS).fill(0);
+    this.headings = new Array(MAX_CARS).fill(void 0);
+    this.aspect = 16 / 9;
+    this.enterAt = Infinity;
+    this.outroAt = Infinity;
+    this.carsAtOutro = 0;
+    this.exitPathTime = 0;
+    // lead car's path-time at blast-off (the escape switch point)
+    this.exitPoint = { x: 0, y: 0, z: 0 };
+    this.exitDir = { x: 1, y: 0, z: 0 };
+    // shared escape direction, outward from the track
+    this.exitSpeed = 1e-3;
+    // path-units per path-millisecond at the switch (keeps speed continuous)
+    this.lastNow = 0;
+    this.finished = false;
+    this.motion = options.motion ?? squareMotion({ size: 1.7, periodMs: 6800, tilt: 0.5 });
+    this.size = options.size ?? 0.15;
+    this.backend = options.backend;
+    this.labelContent = options.label;
+    this.fadeLabel = options.fadeLabel ?? true;
+  }
+  mount(target) {
+    if (!target.style.position) target.style.position = "relative";
+    const engine = new Little3dEngine({
+      backend: this.backend,
+      camera: { position: { x: 0, y: 0, z: CAMERA_Z2 }, fov: FOV }
+    });
+    const mesh = cube(1, CAR_COLORS, CAR_MATERIAL);
+    for (let i = 0; i < MAX_CARS; i++) {
+      this.cars.push(engine.add(mesh, { scale: 0, transparency: { ...TRANSPARENCY } }));
+    }
+    this.engine = engine;
+    engine.mount(target).catch((error) => {
+      target.textContent = error instanceof Error ? error.message : String(error);
+    });
+    const measure = () => {
+      if (target.clientWidth > 0 && target.clientHeight > 0) {
+        this.aspect = target.clientWidth / target.clientHeight;
+      }
+    };
+    measure();
+    this.observer = new ResizeObserver(measure);
+    this.observer.observe(target);
+    this.label = mountAnimationLabel(target, this.labelContent);
+    if (this.fadeLabel) this.label.setOpacity(0);
+  }
+  enter(now) {
+    if (this.enterAt === Infinity) this.enterAt = now;
+  }
+  exit(now) {
+    if (this.outroAt !== Infinity || this.enterAt === Infinity) return;
+    this.outroAt = now;
+    this.carsAtOutro = this.appear.filter((a) => a > 0.5).length;
+    this.exitPathTime = now - this.enterAt;
+    const from = this.motion.positionAt(this.exitPathTime);
+    const velocity = subtract(
+      this.motion.positionAt(this.exitPathTime + 1),
+      this.motion.positionAt(this.exitPathTime - 1)
+    );
+    const speed = Math.hypot(velocity.x, velocity.y, velocity.z);
+    this.exitPoint = from;
+    if (speed > 1e-6) this.exitSpeed = speed / 2;
+    this.exitDir = speed > 1e-6 ? normalize(velocity) : { x: 1, y: 0, z: 0 };
+  }
+  isFinished() {
+    return this.finished;
+  }
+  /** Milliseconds the lead car keeps moving into the outro; feed a trail layer's `outroMs`. */
+  get outroDurationMs() {
+    return TRAIL_OUTRO_MS;
+  }
+  /**
+   * A {@link MotionController} following the lead car's actual position, through
+   * laps and the accelerating escape. Feed it to a particle layer's `emitter`
+   * so the star trail stays behind the train.
+   */
+  trailEmitter() {
+    return {
+      positionAt: (t) => this.enterAt === Infinity ? this.motion.positionAt(t) : this.pathPosition(t - this.enterAt + this.warp(t))
+    };
+  }
+  render(now, frame) {
+    if (!this.engine || !this.label) return;
+    for (const car of this.cars) car.transform.scale = 0;
+    if (this.enterAt === Infinity) {
+      this.engine.render();
+      return;
+    }
+    const dt = this.lastNow === 0 ? 16 : Math.min(50, now - this.lastNow);
+    this.lastNow = now;
+    const want = this.outroAt !== Infinity ? this.carsAtOutro : Math.min(MAX_CARS, Math.round(frame.progress * MAX_CARS));
+    const halfWidth = HALF_HEIGHT * this.aspect;
+    const warp = this.warp(now);
+    let anyOnScreen = false;
+    for (let k = 0; k < MAX_CARS; k++) {
+      const target = k < want ? 1 : 0;
+      this.appear[k] = clamp014(this.appear[k] + Math.sign(target - this.appear[k]) * (dt / POP_MS));
+      if (this.appear[k] <= 0) {
+        this.headings[k] = void 0;
+        continue;
+      }
+      const p = now - this.enterAt - k * RUN_GAP_MS + warp;
+      const position = this.pathPosition(p);
+      if (Math.abs(position.x) > halfWidth + this.size || Math.abs(position.y) > HALF_HEIGHT + this.size) {
+        continue;
+      }
+      const ahead = subtract(this.pathPosition(p + SAMPLE_MS2), position);
+      const targetDir = Math.hypot(ahead.x, ahead.y, ahead.z) > 1e-5 ? ahead : this.headings[k] ?? { x: 1, y: 0, z: 0 };
+      this.headings[k] = this.headings[k] ? rotateToward(this.headings[k], targetDir, TURN_RATE * dt) : normalize(targetDir);
+      const orientation = orientationFor2(this.headings[k]);
+      const transform2 = this.cars[k].transform;
+      transform2.position.x = position.x;
+      transform2.position.y = position.y;
+      transform2.position.z = position.z;
+      transform2.rotation.x = orientation.x;
+      transform2.rotation.y = orientation.y;
+      transform2.rotation.z = orientation.z;
+      transform2.scale = this.size * easeOutBack(this.appear[k]);
+      anyOnScreen = true;
+    }
+    this.label.setText(frame.indeterminate ? typeof this.labelContent === "string" ? this.labelContent : "" : `${Math.round(frame.progress * 100)}%`);
+    if (this.fadeLabel) {
+      this.label.setOpacity(animationLabelOpacity(now, this.enterAt, POP_MS, this.outroAt, TRAIL_OUTRO_MS));
+    }
+    if (this.outroAt !== Infinity && now > this.outroAt + 300 && (!anyOnScreen || now >= this.outroAt + MAX_OUTRO_MS)) {
+      this.finished = true;
+    }
+    this.engine.render();
+  }
+  destroy() {
+    this.observer?.disconnect();
+    this.observer = void 0;
+    this.label?.container.remove();
+    this.label = void 0;
+    this.engine?.destroy();
+    this.engine = void 0;
+    this.cars.length = 0;
+  }
+  /** Extra path-time every car has accelerated forward by, `now` ms into the outro. */
+  warp(now) {
+    if (this.outroAt === Infinity) return 0;
+    const seconds = (now - this.outroAt) / 1e3;
+    return 0.5 * WARP_ACCEL * seconds * seconds;
+  }
+  /**
+   * The single trajectory every car rides, sampled at path-time `p`: the track
+   * up to the exit switch point, then a straight escape outward. Because the
+   * switch point and direction are shared, all cars follow the exact same path.
+   */
+  pathPosition(p) {
+    if (this.outroAt === Infinity || p <= this.exitPathTime) {
+      return this.motion.positionAt(p);
+    }
+    const distance = this.exitSpeed * (p - this.exitPathTime);
+    return {
+      x: this.exitPoint.x + this.exitDir.x * distance,
+      y: this.exitPoint.y + this.exitDir.y * distance,
+      z: this.exitPoint.z + this.exitDir.z * distance
+    };
+  }
+};
+
 // src/prefabs/ghost-train.ts
 function ghostTrain(options = {}) {
-  const motion = options.object?.motion ?? squareMotion({ size: 1.7, periodMs: 6800, tilt: 0.5 });
   const particles = options.particles ?? {};
-  const object = new ObjectMotionAnimation({
-    mesh: () => cube(1, ["#bae6fd", "#7dd3fc", "#38bdf8", "#0ea5e9", "#a5f3fc", "#e0f2fe"]),
-    motion,
-    size: 0.3,
-    transparency: { mode: "two-sided", opacity: 0.55 },
-    tail: { count: 4, gapMs: 240 },
-    backend: options.backend,
-    ...options.object,
-    label: options.object?.label
+  const train = new GhostTrainAnimation({
+    motion: options.object?.motion,
+    backend: options.backend
   });
   const trail = new ParticlesAnimation({
     rate: 30,
     lifeMs: 1700,
-    size: 0.13,
-    speed: 0.07,
+    size: 0.15,
+    speed: 0.11,
     colors: ["#e0f2fe", "#a5f3fc", "#c4b5fd"],
-    texture: particles.texture ?? starTexture(),
-    emitter: object.trailEmitter(),
-    outroMs: object.outroDurationMs,
+    texture: particles.texture ?? starTexture({ glow: 5 }),
+    emitter: train.trailEmitter(),
+    outroMs: train.outroDurationMs,
     seed: 17,
     backend: options.backend,
     ...particles,
     label: options.label ?? particles.label,
     fadeLabel: options.fadeLabel ?? particles.fadeLabel
   });
-  return progressSpinner(new CompositeAnimation([trail, object]), options);
+  return progressSpinner(new CompositeAnimation([trail, train]), options);
 }
 
 // src/animations/grid-assembly.ts
 var GRID = 5;
 var COUNT = GRID * GRID;
-var CAMERA_Z2 = 4;
-var FOV = 55 * Math.PI / 180;
+var CAMERA_Z3 = 4;
+var FOV2 = 55 * Math.PI / 180;
 var TWO_PI2 = Math.PI * 2;
 var INTRO_MS = 900;
 var INTRO_STAGGER_MS = 60;
+var INTRO_DONE_MS = (COUNT - 1) * INTRO_STAGGER_MS + INTRO_MS;
 var GATE_DOCK = 0.35;
 var GATE_UNDOCK = 0.65;
 var EXIT_HURRY2 = 2.5;
@@ -3000,20 +3327,16 @@ var SPIN_MS = 380;
 var SPIN_STAGGER_MS = 80;
 var HOLD_MS = 1e3;
 var COLLAPSE_MS = 700;
-var POP_MS = 170;
+var COLLAPSE_SPREAD_MS = 500;
+var POP_MS2 = 170;
 var LABEL_FADE_MS = 600;
-var DEFAULT_MESHES = [
-  () => cube(1, ["#60a5fa", "#3b82f6", "#2563eb", "#38bdf8", "#0ea5e9", "#1d4ed8"]),
-  () => tetrahedron(1, ["#f472b6", "#ec4899", "#db2777", "#f9a8d4"]),
-  () => octahedron(1, ["#34d399", "#10b981", "#059669", "#6ee7b7", "#a7f3d0", "#047857", "#4ade80", "#065f46"]),
-  () => pyramid(1, ["#fbbf24", "#f59e0b", "#d97706", "#fde68a", "#fcd34d"]),
-  () => icosphere(1, 1, ["#a78bfa", "#8b5cf6", "#7c3aed", "#c4b5fd"])
-];
-function clamp014(value) {
+var CUBE_COLORS = ["#8397c6", "#7186b8", "#6176a8", "#93a6cf", "#556a9c", "#7a8fc0"];
+var DEFAULT_MESHES = [() => cube(1, CUBE_COLORS)];
+function clamp015(value) {
   return Math.max(0, Math.min(1, value));
 }
 function smooth01(value) {
-  const x = clamp014(value);
+  const x = clamp015(value);
   return x * x * (3 - 2 * x);
 }
 function resolveMesh2(mesh) {
@@ -3036,6 +3359,9 @@ var GridAssemblyAnimation = class {
     this.dockedAt = new Array(COUNT).fill(Infinity);
     this.tumbleX = [];
     this.tumbleY = [];
+    this.collapseDelay = [];
+    this.popStarted = new Array(COUNT).fill(false);
+    this.maxCollapseDelay = 0;
     this.fades = [];
     this.slots = [];
     this.aspect = 16 / 9;
@@ -3044,7 +3370,6 @@ var GridAssemblyAnimation = class {
     this.allDockedAt = Infinity;
     this.collapseAt = Infinity;
     this.lastNow = 0;
-    this.popFading = false;
     this.finished = false;
     const sources = options.meshes && options.meshes.length > 0 ? options.meshes : DEFAULT_MESHES;
     this.meshes = sources.map(resolveMesh2);
@@ -3061,13 +3386,15 @@ var GridAssemblyAnimation = class {
       this.slots.push({ x: (col - 2) * spacing, y: (2 - row) * spacing, z: 0 });
       this.tumbleX.push(TWO_PI2 * hash01(i, 2) - Math.PI);
       this.tumbleY.push(TWO_PI2 * hash01(i, 4) - Math.PI);
+      this.collapseDelay.push(hash01(i, 7) * COLLAPSE_SPREAD_MS);
     }
+    this.maxCollapseDelay = Math.max(...this.collapseDelay);
   }
   mount(target) {
     if (!target.style.position) target.style.position = "relative";
     const engine = new Little3dEngine({
       backend: this.backend,
-      camera: { position: { x: 0, y: 0, z: CAMERA_Z2 }, fov: FOV }
+      camera: { position: { x: 0, y: 0, z: CAMERA_Z3 }, fov: FOV2 }
     });
     for (let i = 0; i < COUNT; i++) {
       this.fades.push({ mode: "one-sided", opacity: 1 });
@@ -3122,7 +3449,7 @@ var GridAssemblyAnimation = class {
         COLLAPSE_MS
       ));
     }
-    if (this.collapseAt !== Infinity && now >= this.collapseAt + COLLAPSE_MS + POP_MS) {
+    if (this.collapseAt !== Infinity && now >= this.collapseAt + this.maxCollapseDelay + COLLAPSE_MS + POP_MS2) {
       this.finished = true;
     }
     this.engine.render();
@@ -3139,7 +3466,8 @@ var GridAssemblyAnimation = class {
   }
   updateBlends(dt, progress, now) {
     const exiting = this.exitAt !== Infinity;
-    const want = exiting ? COUNT : Math.min(COUNT, Math.floor(progress * COUNT + 1e-9));
+    const ringComplete = now - this.enterAt >= INTRO_DONE_MS;
+    const want = !ringComplete ? 0 : exiting ? COUNT : Math.min(COUNT, Math.floor(progress * COUNT + 1e-9));
     const rate = dt / this.dockMs * (exiting ? EXIT_HURRY2 : 1);
     for (let i = 0; i < COUNT; i++) {
       const target = i < want ? 1 : 0;
@@ -3164,14 +3492,14 @@ var GridAssemblyAnimation = class {
   }
   renderStory(now, dt) {
     const t = now - this.enterAt;
-    const halfHeight = Math.tan(FOV / 2) * CAMERA_Z2;
+    const halfHeight = Math.tan(FOV2 / 2) * CAMERA_Z3;
     const halfWidth = halfHeight * this.aspect;
     const radius = Math.max(0.6, Math.min(halfWidth, halfHeight) - this.size * 0.55);
     const spawnFactor = (Math.max(halfWidth, halfHeight) * 1.25 + this.size * 2) / radius;
     for (let i = 0; i < COUNT; i++) {
       const transform2 = this.handles[i].transform;
       const eased = smooth01(this.blends[i]);
-      const introT = clamp014((t - i * INTRO_STAGGER_MS) / INTRO_MS);
+      const introT = clamp015((t - i * INTRO_STAGGER_MS) / INTRO_MS);
       const reach = 1 + (spawnFactor - 1) * (1 - easeOutCubic(introT));
       const angle = Math.PI / 2 - i / COUNT * TWO_PI2 - t / this.orbitPeriodMs * TWO_PI2;
       const orbitX = Math.cos(angle) * radius * reach;
@@ -3202,25 +3530,30 @@ var GridAssemblyAnimation = class {
     if (!this.captured) {
       this.captured = this.handles.map((handle) => ({ ...handle.transform.position }));
     }
-    const u = clamp014((now - this.collapseAt) / COLLAPSE_MS);
-    const pull = easeInCubic(u);
     for (let i = 0; i < COUNT; i++) {
       const transform2 = this.handles[i].transform;
       const from = this.captured[i];
+      const local = now - this.collapseAt - this.collapseDelay[i];
+      if (local <= 0) {
+        transform2.position.x = from.x;
+        transform2.position.y = from.y;
+        transform2.position.z = from.z;
+        transform2.scale = this.size;
+        continue;
+      }
+      const pull = easeInCubic(clamp015(local / COLLAPSE_MS));
       transform2.position.x = from.x * (1 - pull);
       transform2.position.y = from.y * (1 - pull);
       transform2.position.z = from.z * (1 - pull);
       transform2.scale = this.size * (1 - 0.99 * pull);
-    }
-    if (u >= 1) {
-      if (!this.popFading) {
-        this.popFading = true;
-        for (let i = 0; i < COUNT; i++) this.handles[i].transparency = this.fades[i];
-      }
-      const v = clamp014((now - this.collapseAt - COLLAPSE_MS) / POP_MS);
-      for (let i = 0; i < COUNT; i++) {
+      if (local >= COLLAPSE_MS) {
+        if (!this.popStarted[i]) {
+          this.popStarted[i] = true;
+          this.handles[i].transparency = this.fades[i];
+        }
+        const v = clamp015((local - COLLAPSE_MS) / POP_MS2);
         this.fades[i].opacity = 1 - v;
-        this.handles[i].transform.scale = v >= 1 ? 0 : this.size * 0.01 * (1 + 1.6 * Math.sin(Math.PI * v));
+        transform2.scale = v >= 1 ? 0 : this.size * 0.01 * (1 + 1.6 * Math.sin(Math.PI * v));
       }
     }
   }
@@ -3320,68 +3653,347 @@ function pulsingStarfield(options = {}) {
   }), options);
 }
 
-// src/motion/circle.ts
-function circleMotion(options = {}) {
-  const radius = options.radius ?? 1.3;
-  const periodMs = options.periodMs ?? 3e3;
-  const tilt = options.tilt ?? 0.5;
-  const direction = options.direction ?? 1;
-  const cosTilt = Math.cos(tilt);
-  const sinTilt = Math.sin(tilt);
-  return {
-    positionAt(t) {
-      const angle = direction * t / periodMs * Math.PI * 2;
-      const x = radius * Math.cos(angle);
-      const flatY = radius * Math.sin(angle);
-      return { x, y: flatY * cosTilt, z: flatY * sinTilt };
-    }
-  };
+// src/animations/rocket-launch.ts
+var ROCKETS = 20;
+var CAMERA_Z4 = 3;
+var FOV3 = 55 * Math.PI / 180;
+var HALF_HEIGHT2 = Math.tan(FOV3 / 2) * CAMERA_Z4;
+var SIZE = 0.12;
+var ROW_Y = -0.5;
+var PARTICLE_Z = 0.3;
+var SLIDE_MS = 460;
+var SLIDE_GATE = 0.45;
+var EXIT_HURRY3 = 2.5;
+var LAUNCH_SPREAD_MS = 620;
+var ASCENT_G = 5.2;
+var FINISH_PAD_MS = 2e3;
+var TURNERS = 3;
+var TURN_MIN_Y = 0.2;
+var TURN_MAX_Y = 0.8;
+var TURN_MIN_DEG = 30;
+var TURN_MAX_DEG = 50;
+var DEG = Math.PI / 180;
+var SMOKE_LIFE_MS = 1400;
+var SMOKE_GAP_MS = 320;
+var SMOKE_RISE = 0.55;
+var SMOKE_SIZE = 0.17;
+var SMOKE_PEAK = 0.16;
+var SMOKE_POOL = 104;
+var FIRE_LIFE_MS = 420;
+var FIRE_GAP_MS = 55;
+var FIRE_ON_MS = 950;
+var FIRE_TRAIL = 0.25;
+var FIRE_SPREAD = 0.09;
+var FIRE_SIZE = 0.15;
+var FIRE_PEAK = 0.9;
+var FIRE_POOL = 140;
+var SMOKE_COLORS = ["#e2e8f0", "#cbd5e1"];
+var FIRE_COLORS = ["#fef3c7", "#fde047", "#fb923c", "#ef4444"];
+var ROCKET_COLORS = ["#e2e8f0", "#f8fafc", "#cbd5e1", "#94a3b8", "#e2e8f0"];
+function clamp016(value) {
+  return Math.max(0, Math.min(1, value));
 }
-
-// src/prefabs/rocket-launch.ts
-var launchUp = ({ delta, position, velocity, durationMs }) => {
-  const coast = durationMs * delta * (1 - 0.5 * delta);
-  const climb = 5.5 * easeInCubic(delta);
-  return {
-    position: {
-      x: position.x + (velocity?.x ?? 0) * coast,
-      y: position.y + (velocity?.y ?? 0) * coast + climb,
-      z: position.z + (velocity?.z ?? 0) * coast
+function smoothstep2(edge0, edge1, value) {
+  const x = clamp016((value - edge0) / (edge1 - edge0));
+  return x * x * (3 - 2 * x);
+}
+function hash012(index, salt) {
+  let h = (Math.imul(index + 1, 2654435769) ^ Math.imul(salt + 1, 2246822507)) >>> 0;
+  h = Math.imul(h ^ h >>> 16, 73244475);
+  h ^= h >>> 16;
+  return (h >>> 0) / 4294967296;
+}
+function puffTexture(coreAlpha, coreStop) {
+  return canvasTexture((ctx) => {
+    const g = ctx.createRadialGradient(48, 48, 1, 48, 48, 47);
+    g.addColorStop(0, `rgba(255,255,255,${coreAlpha})`);
+    g.addColorStop(coreStop, `rgba(255,255,255,${coreAlpha * 0.6})`);
+    g.addColorStop(1, "rgba(255,255,255,0)");
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 96, 96);
+  });
+}
+var RocketLaunchAnimation = class {
+  constructor(options = {}) {
+    this.rockets = [];
+    this.smoke = [];
+    this.fire = [];
+    this.smokeFades = [];
+    this.fireFades = [];
+    this.blends = new Array(ROCKETS).fill(0);
+    this.groundedAt = new Array(ROCKETS).fill(Infinity);
+    // Per-rocket veer parameters (turnS = Infinity for a rocket that climbs straight).
+    this.turnS = new Array(ROCKETS).fill(Infinity);
+    this.turnDir = [];
+    this.turnRoll = new Array(ROCKETS).fill(0);
+    this.stagger = new Array(ROCKETS).fill(0);
+    this.aspect = 16 / 9;
+    this.enterAt = Infinity;
+    this.exitAt = Infinity;
+    this.launchedAt = Infinity;
+    this.lastNow = 0;
+    this.finished = false;
+    this.backend = options.backend;
+    this.labelContent = options.label;
+    this.fadeLabel = options.fadeLabel ?? true;
+    for (let i = 0; i < ROCKETS; i++) {
+      this.turnDir.push({ x: 0, y: 1 });
+      this.stagger[i] = hash012(i, 7) * LAUNCH_SPREAD_MS;
     }
-  };
+    const order = Array.from({ length: ROCKETS }, (_, i) => i).sort(
+      (a, b) => hash012(a, 11) - hash012(b, 11)
+    );
+    for (const i of order.slice(0, TURNERS)) {
+      const height = TURN_MIN_Y + hash012(i, 12) * (TURN_MAX_Y - TURN_MIN_Y);
+      const angle = (TURN_MIN_DEG + hash012(i, 13) * (TURN_MAX_DEG - TURN_MIN_DEG)) * DEG;
+      const sign = hash012(i, 14) < 0.5 ? -1 : 1;
+      this.turnS[i] = height - ROW_Y;
+      this.turnDir[i] = { x: sign * Math.sin(angle), y: Math.cos(angle) };
+      this.turnRoll[i] = -sign * angle;
+    }
+  }
+  mount(target) {
+    if (!target.style.position) target.style.position = "relative";
+    const smokeMeshes = SMOKE_COLORS.map((color) => quad(1, [color]));
+    const fireMeshes = FIRE_COLORS.map((color) => quad(1, [color]));
+    const smokeTexture = puffTexture(0.85, 0.5);
+    const fireTexture = puffTexture(1, 0.32);
+    const backend = async (rendererOptions) => {
+      const renderer = this.backend === "webgpu" ? new (await Promise.resolve().then(() => (init_webgpu_textured(), webgpu_textured_exports))).WebGPUTexturedRenderer(rendererOptions) : this.backend === "webgl" ? new (await Promise.resolve().then(() => (init_webgl_textured(), webgl_textured_exports))).WebGLTexturedRenderer(rendererOptions) : new (await Promise.resolve().then(() => (init_canvas2d_textured(), canvas2d_textured_exports))).Canvas2DTexturedRenderer(rendererOptions);
+      for (const mesh of smokeMeshes) renderer.setTexture(mesh, smokeTexture);
+      for (const mesh of fireMeshes) renderer.setTexture(mesh, fireTexture);
+      return renderer;
+    };
+    const engine = new Little3dEngine({
+      backend,
+      camera: { position: { x: 0, y: 0, z: CAMERA_Z4 }, fov: FOV3 }
+    });
+    const rocketMesh = pyramid(1, ROCKET_COLORS);
+    for (let i = 0; i < ROCKETS; i++) this.rockets.push(engine.add(rocketMesh, { scale: 0 }));
+    for (let s = 0; s < SMOKE_POOL; s++) {
+      const fade = { mode: "one-sided", opacity: 0 };
+      this.smokeFades.push(fade);
+      this.smoke.push(engine.add(smokeMeshes[s % smokeMeshes.length], { scale: 0, transparency: fade }));
+    }
+    for (let f = 0; f < FIRE_POOL; f++) {
+      const fade = { mode: "one-sided", opacity: 0 };
+      this.fireFades.push(fade);
+      this.fire.push(engine.add(fireMeshes[f % fireMeshes.length], { scale: 0, transparency: fade }));
+    }
+    this.engine = engine;
+    engine.mount(target).catch((error) => {
+      target.textContent = error instanceof Error ? error.message : String(error);
+    });
+    const measure = () => {
+      if (target.clientWidth > 0 && target.clientHeight > 0) {
+        this.aspect = target.clientWidth / target.clientHeight;
+      }
+    };
+    measure();
+    this.observer = new ResizeObserver(measure);
+    this.observer.observe(target);
+    this.label = mountAnimationLabel(target, this.labelContent);
+    if (this.fadeLabel) this.label.setOpacity(0);
+  }
+  enter(now) {
+    if (this.enterAt === Infinity) this.enterAt = now;
+  }
+  exit(now) {
+    if (this.exitAt === Infinity) this.exitAt = now;
+  }
+  isFinished() {
+    return this.finished;
+  }
+  render(now, frame) {
+    if (!this.engine || !this.label) return;
+    for (const handle of this.rockets) handle.transform.scale = 0;
+    for (const fade of this.smokeFades) fade.opacity = 0;
+    for (const fade of this.fireFades) fade.opacity = 0;
+    for (const handle of this.smoke) handle.transform.scale = 0;
+    for (const handle of this.fire) handle.transform.scale = 0;
+    if (this.enterAt === Infinity) {
+      this.engine.render();
+      return;
+    }
+    const dt = this.lastNow === 0 ? 16 : Math.min(50, now - this.lastNow);
+    this.lastNow = now;
+    const exiting = this.exitAt !== Infinity;
+    this.updateBlends(dt, frame.progress, now, exiting);
+    if (exiting && this.launchedAt === Infinity && this.blends.every((blend) => blend >= 1)) {
+      this.launchedAt = now;
+    }
+    const launched = this.launchedAt !== Infinity;
+    const halfWidth = HALF_HEIGHT2 * this.aspect;
+    const rowHalf = Math.min(halfWidth * 0.8, 1.18);
+    const spawnX = halfWidth + 0.6;
+    let smokeCursor = 0;
+    let fireCursor = 0;
+    for (let i = 0; i < ROCKETS; i++) {
+      const homeX = -rowHalf + 2 * rowHalf * i / (ROCKETS - 1);
+      const launchAt = launched ? this.launchedAt + this.stagger[i] : Infinity;
+      const la = now - launchAt;
+      if (launched && la >= 0) {
+        this.renderAscent(i, homeX, la, halfWidth);
+        fireCursor = this.emitFire(i, homeX, la, fireCursor);
+        continue;
+      }
+      const blend = this.blends[i];
+      if (blend <= 0) continue;
+      const transform2 = this.rockets[i].transform;
+      transform2.position.x = spawnX + (homeX - spawnX) * easeOutBack(blend);
+      transform2.position.y = ROW_Y;
+      transform2.position.z = 0;
+      transform2.rotation.x = 0;
+      transform2.rotation.y = 0;
+      transform2.rotation.z = 0;
+      transform2.scale = SIZE * smoothstep2(0, 0.6, blend);
+      if (this.groundedAt[i] !== Infinity) {
+        smokeCursor = this.emitSmoke(i, homeX, now, launchAt, smokeCursor);
+      }
+    }
+    this.label.setText(frame.indeterminate ? typeof this.labelContent === "string" ? this.labelContent : "" : `${Math.round(frame.progress * 100)}%`);
+    if (this.fadeLabel) {
+      this.label.setOpacity(animationLabelOpacity(
+        now,
+        this.enterAt,
+        SLIDE_MS,
+        this.launchedAt,
+        LAUNCH_SPREAD_MS
+      ));
+    }
+    if (launched && now >= this.launchedAt + LAUNCH_SPREAD_MS + FINISH_PAD_MS) {
+      this.finished = true;
+    }
+    this.engine.render();
+  }
+  destroy() {
+    this.observer?.disconnect();
+    this.observer = void 0;
+    this.label?.container.remove();
+    this.label = void 0;
+    this.engine?.destroy();
+    this.engine = void 0;
+    this.rockets.length = 0;
+    this.smoke.length = 0;
+    this.fire.length = 0;
+    this.smokeFades.length = 0;
+    this.fireFades.length = 0;
+  }
+  updateBlends(dt, progress, now, exiting) {
+    const want = exiting ? ROCKETS : Math.min(ROCKETS, Math.round(progress * ROCKETS));
+    const rate = dt / SLIDE_MS * (exiting ? EXIT_HURRY3 : 1);
+    for (let i = 0; i < ROCKETS; i++) {
+      const target = i < want ? 1 : 0;
+      const blend = this.blends[i];
+      if (target > blend && (i === 0 || this.blends[i - 1] >= SLIDE_GATE)) {
+        this.blends[i] = Math.min(1, blend + rate);
+      } else if (target < blend && (i === ROCKETS - 1 || this.blends[i + 1] <= 1 - SLIDE_GATE)) {
+        this.blends[i] = Math.max(0, blend - rate);
+      }
+      if (this.blends[i] >= 1) {
+        if (this.groundedAt[i] === Infinity) this.groundedAt[i] = now;
+      } else {
+        this.groundedAt[i] = Infinity;
+      }
+    }
+  }
+  /** Along-track distance climbed `la` ms after this rocket's own blast-off. */
+  ascentDistance(la) {
+    const seconds = la / 1e3;
+    return 0.5 * ASCENT_G * seconds * seconds;
+  }
+  /** Rocket center, nose direction, and roll `la` ms into its climb. */
+  ascentPose(i, homeX, la) {
+    const s = this.ascentDistance(la);
+    const turnS = this.turnS[i];
+    if (s <= turnS) {
+      return { pos: { x: homeX, y: ROW_Y + s }, dir: { x: 0, y: 1 }, roll: 0 };
+    }
+    const post = s - turnS;
+    const dir = this.turnDir[i];
+    return {
+      pos: { x: homeX + dir.x * post, y: ROW_Y + turnS + dir.y * post },
+      dir,
+      roll: this.turnRoll[i]
+    };
+  }
+  renderAscent(i, homeX, la, halfWidth) {
+    const { pos, roll } = this.ascentPose(i, homeX, la);
+    if (pos.y > HALF_HEIGHT2 + 0.4 || Math.abs(pos.x) > halfWidth + 0.4) return;
+    const transform2 = this.rockets[i].transform;
+    transform2.position.x = pos.x;
+    transform2.position.y = pos.y;
+    transform2.position.z = 0;
+    transform2.rotation.x = 0;
+    transform2.rotation.y = 0;
+    transform2.rotation.z = roll;
+    transform2.scale = SIZE;
+  }
+  emitFire(i, homeX, la, cursor) {
+    const gap = FIRE_GAP_MS;
+    const last = Math.min(Math.floor(la / gap), Math.floor(FIRE_ON_MS / gap));
+    const first = Math.max(0, Math.ceil((la - FIRE_LIFE_MS) / gap));
+    for (let n = first; n <= last; n++) {
+      if (cursor >= this.fire.length) return cursor;
+      const emitLa = n * gap;
+      const age = la - emitLa;
+      if (age < 0 || age >= FIRE_LIFE_MS) continue;
+      const life = age / FIRE_LIFE_MS;
+      const seconds = age / 1e3;
+      const pose = this.ascentPose(i, homeX, emitLa);
+      const back = { x: -pose.dir.x, y: -pose.dir.y };
+      const perp = { x: -pose.dir.y, y: pose.dir.x };
+      const lat = (hash012(i * 97 + n, 1) - 0.5) * FIRE_SPREAD;
+      const baseX = pose.pos.x + back.x * SIZE * 0.5;
+      const baseY = pose.pos.y + back.y * SIZE * 0.5;
+      const transform2 = this.fire[cursor].transform;
+      transform2.position.x = baseX + back.x * FIRE_TRAIL * seconds + perp.x * lat;
+      transform2.position.y = baseY + back.y * FIRE_TRAIL * seconds + perp.y * lat - 0.12 * seconds * seconds;
+      transform2.position.z = PARTICLE_Z;
+      transform2.rotation.z = hash012(i * 97 + n, 2) * Math.PI * 2;
+      transform2.scale = FIRE_SIZE * (0.7 + 0.5 * hash012(i * 97 + n, 3)) * (1 - 0.55 * life);
+      this.fireFades[cursor].opacity = FIRE_PEAK * smoothstep2(0, 0.15, life) * (1 - smoothstep2(0.55, 1, life));
+      cursor++;
+    }
+    return cursor;
+  }
+  emitSmoke(i, homeX, now, launchAt, cursor) {
+    const start = this.groundedAt[i];
+    const tr = now - start;
+    const gap = SMOKE_GAP_MS;
+    const emitUntil = Number.isFinite(launchAt) ? launchAt - start : tr;
+    const last = Math.min(Math.floor(tr / gap), Math.floor(emitUntil / gap));
+    const first = Math.max(0, Math.ceil((tr - SMOKE_LIFE_MS) / gap));
+    const baseY = ROW_Y - SIZE * 0.4;
+    for (let n = first; n <= last; n++) {
+      if (cursor >= this.smoke.length) return cursor;
+      const age = tr - n * gap;
+      if (age < 0 || age >= SMOKE_LIFE_MS) continue;
+      const life = age / SMOKE_LIFE_MS;
+      const drift = (hash012(i * 131 + n, 1) - 0.5) * 0.14;
+      const transform2 = this.smoke[cursor].transform;
+      transform2.position.x = homeX + drift * life;
+      transform2.position.y = baseY + SMOKE_RISE * life;
+      transform2.position.z = PARTICLE_Z;
+      transform2.rotation.z = hash012(i * 131 + n, 2) * Math.PI * 2;
+      transform2.scale = SMOKE_SIZE * (0.5 + 0.8 * life) * (0.7 + 0.6 * hash012(i * 131 + n, 3));
+      this.smokeFades[cursor].opacity = SMOKE_PEAK * smoothstep2(0, 0.25, life) * (1 - smoothstep2(0.5, 1, life));
+      cursor++;
+    }
+    return cursor;
+  }
 };
+
+// src/prefabs/rocket-launch.ts
 function rocketLaunch(options = {}) {
-  const motion = options.object?.motion ?? circleMotion({ radius: 0.55, periodMs: 7e3, tilt: 0.15 });
-  const particles = options.particles ?? {};
-  const object = new ObjectMotionAnimation({
-    mesh: () => pyramid(1, ["#e2e8f0", "#f8fafc", "#cbd5e1", "#94a3b8", "#e2e8f0"]),
-    motion,
-    size: 0.44,
-    facing: "+y",
-    outro: { transition: launchUp, durationMs: 1300 },
-    backend: options.backend,
-    ...options.object,
-    label: options.object?.label
-  });
-  const exhaust = new ParticlesAnimation({
-    rate: 46,
-    lifeMs: 1100,
-    size: 0.18,
-    speed: 0.5,
-    direction: { x: 0, y: -1, z: 0 },
-    spread: 0.3,
-    gravity: { x: 0, y: -0.6, z: 0 },
-    colors: ["#fde047", "#fb923c", "#ef4444", "#fef3c7"],
-    texture: particles.texture ?? shineTexture(),
-    emitter: object.trailEmitter(),
-    outroMs: object.outroDurationMs,
-    seed: 9,
-    backend: options.backend,
-    ...particles,
-    label: options.label ?? particles.label,
-    fadeLabel: options.fadeLabel ?? particles.fadeLabel
-  });
-  return progressSpinner(new CompositeAnimation([exhaust, object]), options);
+  return progressSpinner(
+    new RocketLaunchAnimation({
+      backend: options.backend,
+      label: options.label,
+      fadeLabel: options.fadeLabel
+    }),
+    options
+  );
 }
 
 // src/motion/wander.ts