3d-spinner 0.9.3 → 0.9.5

package/dist/umd/spinner.global.js

@@ -139,7 +139,10 @@ var Spinner3D = (() => {
     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]];
@@ -149,6 +152,15 @@ var Spinner3D = (() => {
       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) {
@@ -162,11 +174,19 @@ var Spinner3D = (() => {
           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 };
@@ -204,13 +224,42 @@ var Spinner3D = (() => {
   function clamp012(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 = clamp012(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({
@@ -233,8 +282,8 @@ var Spinner3D = (() => {
           };
         }
         /** 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);
         }
       };
     }
@@ -274,28 +323,51 @@ var Spinner3D = (() => {
 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 = {}) {
@@ -316,9 +388,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")
@@ -342,17 +417,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);
@@ -367,6 +444,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);
@@ -441,6 +519,7 @@ struct Uniforms {
   model: mat4x4<f32>,
   toLight: vec4<f32>,
   params: vec4<f32>,
+  eye: vec4<f32>,
 };
 @group(0) @binding(0) var<uniform> u: Uniforms;
 
@@ -448,23 +527,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];
@@ -505,13 +601,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 = {
@@ -527,7 +625,13 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
             vertex: {
               module,
               entryPoint: "vs",
-              buffers: [vertexBuffer(0), vertexBuffer(1), vertexBuffer(2)]
+              buffers: [
+                vertexBuffer(0),
+                vertexBuffer(1),
+                vertexBuffer(2),
+                vertexBuffer(3),
+                vertexBuffer(4, 4)
+              ]
             },
             fragment: {
               module,
@@ -580,6 +684,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);
@@ -631,7 +737,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) => {
@@ -640,6 +746,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();
@@ -666,6 +773,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();
@@ -677,6 +786,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?.();
@@ -759,9 +870,30 @@ fn fs(in: VSOut) -> @location(0) vec4<f32> {
                 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
               });
@@ -1512,6 +1644,7 @@ void main() {
     SpinAnimation: () => SpinAnimation,
     WebGLTexturedRenderer: () => WebGLTexturedRenderer,
     WebGPUTexturedRenderer: () => WebGPUTexturedRenderer,
+    attachMaterial: () => attachMaterial,
     centerAndScaleMesh: () => centerAndScaleMesh,
     chargedOrb: () => chargedOrb,
     circleMotion: () => circleMotion,
@@ -1729,6 +1862,12 @@ void main() {
   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 },
@@ -1743,7 +1882,7 @@ void main() {
 
   // 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 },
@@ -1763,12 +1902,12 @@ void main() {
       { 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 },
@@ -1776,12 +1915,15 @@ void main() {
       { 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 },
@@ -1795,7 +1937,7 @@ void main() {
       { indices: [0, 2, 3], color: colors[2 % colors.length] },
       { indices: [1, 3, 2], color: colors[3 % colors.length] }
     ];
-    return { vertices, faces };
+    return attachMaterial({ vertices, faces }, material);
   }
 
   // src/engines/little-3d-engine/shapes/primitives/octahedron.ts
@@ -1809,7 +1951,7 @@ void main() {
     "#06b6d4",
     "#eab308"
   ];
-  function octahedron(size = 1, colors = DEFAULT_COLORS4) {
+  function octahedron(size = 1, colors = DEFAULT_COLORS4, material) {
     const r = size / 2;
     const vertices = [
       { x: r, y: 0, z: 0 },
@@ -1829,12 +1971,12 @@ void main() {
       { 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) {
+  function pyramid(size = 1, colors = DEFAULT_COLORS5, material) {
     const h = size / 2;
     const vertices = [
       { x: -h, y: -h, z: h },
@@ -1850,12 +1992,12 @@ void main() {
       { 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/uv-sphere.ts
   var DEFAULT_COLORS6 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
-  function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS6) {
+  function uvSphere(size = 1, detail = 1, colors = DEFAULT_COLORS6, material) {
     const r = size / 2;
     const d = Math.max(1, Math.floor(detail));
     const slices = Math.max(4, d * 4);
@@ -1894,7 +2036,7 @@ void main() {
         color: color()
       });
     }
-    return { vertices, faces };
+    return attachMaterial({ vertices, faces }, material);
   }
 
   // src/engines/little-3d-engine/shapes/primitives/spheres/icosphere.ts
@@ -1937,8 +2079,11 @@ void main() {
     [8, 6, 7],
     [9, 8, 1]
   ];
-  function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS7) {
-    return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
+  function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS7, material) {
+    return attachMaterial(
+      sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors),
+      material
+    );
   }
 
   // src/engines/little-3d-engine/shapes/primitives/spheres/octa-sphere.ts
@@ -1962,8 +2107,11 @@ void main() {
     [5, 3, 1],
     [5, 0, 3]
   ];
-  function octaSphere(size = 1, detail = 1, colors = DEFAULT_COLORS8) {
-    return sphereFromTriangles(SEED_VERTICES2, SEED_FACES2, size, detail, colors);
+  function octaSphere(size = 1, detail = 1, colors = DEFAULT_COLORS8, material) {
+    return attachMaterial(
+      sphereFromTriangles(SEED_VERTICES2, SEED_FACES2, size, detail, colors),
+      material
+    );
   }
 
   // src/engines/little-3d-engine/shapes/primitives/spheres/cube-sphere.ts
@@ -1976,7 +2124,7 @@ void main() {
     { normal: [0, 1, 0], right: [1, 0, 0], up: [0, 0, -1] },
     { normal: [0, -1, 0], right: [1, 0, 0], up: [0, 0, 1] }
   ];
-  function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS9) {
+  function cubeSphere(size = 1, detail = 1, colors = DEFAULT_COLORS9, material) {
     const r = size / 2;
     const n = Math.max(1, Math.floor(detail));
     const vertices = [];
@@ -2005,13 +2153,13 @@ void main() {
         }
       }
     }
-    return { vertices, faces };
+    return attachMaterial({ vertices, faces }, material);
   }
 
   // src/engines/little-3d-engine/shapes/complex/plane.ts
   var DEFAULT_COLORS10 = ["#e0f2fe", "#7dd3fc", "#38bdf8", "#f8fafc"];
-  function planeMesh(colors = DEFAULT_COLORS10) {
-    return {
+  function planeMesh(colors = DEFAULT_COLORS10, material) {
+    return attachMaterial({
       vertices: [
         { x: 0.9, y: 0, z: 0 },
         { x: -0.2, y: 0, z: 0.82 },
@@ -2039,7 +2187,7 @@ void main() {
         { indices: [3, 6, 8], color: colors[0] ?? DEFAULT_COLORS10[0] },
         { indices: [3, 8, 6], color: colors[1] ?? DEFAULT_COLORS10[1] }
       ]
-    };
+    }, material);
   }
 
   // src/engines/little-3d-engine/textures/dynamic/canvas-texture.ts
@@ -2052,18 +2200,30 @@ void main() {
   }
 
   // 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);
     });
   }
 
@@ -2584,10 +2744,14 @@ void main() {
     const pick = Array.isArray(color) ? (i) => color[i % color.length] : () => color;
     return { vertices: mesh.vertices, faces: mesh.faces.map((f, i) => ({ ...f, color: pick(i) })) };
   }
+  function applyMaterial(mesh, material) {
+    if (!material) return mesh;
+    return { vertices: mesh.vertices, faces: mesh.faces.map((f) => ({ ...f, material })) };
+  }
   var SpinAnimation = class {
     constructor(options = {}) {
       this.exited = false;
-      this.mesh = applyColor(resolveMesh(options.shape), options.color);
+      this.mesh = applyMaterial(applyColor(resolveMesh(options.shape), options.color), options.material);
       this.spinX = options.spinX ?? 7e-4;
       this.spinY = options.spinY ?? 11e-4;
       this.backend = options.backend;
@@ -3280,6 +3444,7 @@ void main() {
   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"],
@@ -3308,9 +3473,9 @@ void main() {
         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;
@@ -3473,6 +3638,7 @@ void main() {
   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;
@@ -3481,15 +3647,11 @@ void main() {
   var SPIN_STAGGER_MS = 80;
   var HOLD_MS = 1e3;
   var COLLAPSE_MS = 700;
+  var COLLAPSE_SPREAD_MS = 500;
   var POP_MS = 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"])
-  ];
+  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));
   }
@@ -3517,6 +3679,9 @@ void main() {
       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;
@@ -3525,7 +3690,6 @@ void main() {
       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(resolveMesh3);
@@ -3542,7 +3706,9 @@ void main() {
         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";
@@ -3603,7 +3769,7 @@ void main() {
           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_MS) {
         this.finished = true;
       }
       this.engine.render();
@@ -3620,7 +3786,8 @@ void main() {
     }
     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;
@@ -3683,25 +3850,30 @@ void main() {
       if (!this.captured) {
         this.captured = this.handles.map((handle) => ({ ...handle.transform.position }));
       }
-      const u = clamp015((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 = clamp015((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_MS);
           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));
         }
       }
     }
@@ -3874,36 +4046,239 @@ void main() {
     };
   }
 
+  // src/animations/ghost-train.ts
+  var MAX_CARS = 50;
+  var CAMERA_Z3 = 3;
+  var FOV2 = 55 * Math.PI / 180;
+  var HALF_HEIGHT = Math.tan(FOV2 / 2) * CAMERA_Z3;
+  var RUN_GAP_MS = 130;
+  var POP_MS2 = 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 clamp016(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_Z3 }, fov: FOV2 }
+      });
+      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] = clamp016(this.appear[k] + Math.sign(target - this.appear[k]) * (dt / POP_MS2));
+        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_MS2, 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/prefabs/grid-assembly.ts
@@ -4000,68 +4375,347 @@ void main() {
     }), 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 clamp017(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 = clamp017((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
@@ -4129,34 +4783,88 @@ void main() {
     }), 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 };
+      }
+    };
+  }
+
   // <stdin>
   init_webgl_textured();
   init_webgpu_textured();
 
   // src/engines/little-3d-engine/loaders/obj.ts
   var DEFAULT_COLORS12 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
+  function clamp018(value) {
+    return Math.min(1, Math.max(0, value));
+  }
   function channelToHex(value) {
     const channel = Number.parseFloat(value);
     if (!Number.isFinite(channel)) return void 0;
-    return Math.round(Math.min(1, Math.max(0, channel)) * 255).toString(16).padStart(2, "0");
-  }
-  function parseMtlColors(text) {
-    const colors = /* @__PURE__ */ new Map();
-    let material;
+    return Math.round(clamp018(channel) * 255).toString(16).padStart(2, "0");
+  }
+  function parseRgb(parts) {
+    const channels = parts.slice(1, 4).map(Number.parseFloat);
+    if (channels.length !== 3 || !channels.every(Number.isFinite)) return void 0;
+    return [clamp018(channels[0]), clamp018(channels[1]), clamp018(channels[2])];
+  }
+  function toMaterial(surface) {
+    const material = {};
+    if (surface.specular) material.specular = surface.specular;
+    if (surface.shininess !== void 0) material.shininess = surface.shininess;
+    if (surface.emissive) material.emissive = surface.emissive;
+    return Object.keys(material).length > 0 ? material : void 0;
+  }
+  function parseMtl(text) {
+    const materials = /* @__PURE__ */ new Map();
+    const surfaces = /* @__PURE__ */ new Map();
+    let name;
     for (const line of text.split("\n")) {
       const trimmed = line.trim();
       if (trimmed === "" || trimmed.startsWith("#")) continue;
       const parts = trimmed.split(/\s+/);
-      if (parts[0] === "newmtl") {
-        material = parts.slice(1).join(" ");
-      } else if (parts[0] === "Kd" && material) {
+      const keyword = parts[0];
+      if (keyword === "newmtl") {
+        name = parts.slice(1).join(" ");
+        if (name && !materials.has(name)) {
+          materials.set(name, {});
+          surfaces.set(name, {});
+        }
+        continue;
+      }
+      if (!name) continue;
+      const entry = materials.get(name);
+      const surface = surfaces.get(name);
+      if (keyword === "Kd") {
         const channels = parts.slice(1, 4).map(channelToHex);
         if (channels.length === 3 && channels.every((channel) => channel !== void 0)) {
-          colors.set(material, `#${channels.join("")}`);
+          entry.color = `#${channels.join("")}`;
         }
+      } else if (keyword === "Ks") {
+        surface.specular = parseRgb(parts);
+      } else if (keyword === "Ns") {
+        const ns = Number.parseFloat(parts[1]);
+        if (Number.isFinite(ns)) surface.shininess = Math.max(0, ns);
+      } else if (keyword === "Ke") {
+        surface.emissive = parseRgb(parts);
       }
     }
-    return colors;
+    for (const [key, surface] of surfaces) {
+      materials.get(key).material = toMaterial(surface);
+    }
+    return materials;
   }
   function resolveIndex(token, vertexCount) {
     const n = parseInt(token, 10);
@@ -4164,7 +4872,7 @@ void main() {
   }
   function parseObj(text, options = {}) {
     const colors = options.colors ?? DEFAULT_COLORS12;
-    const materialColors = options.useMtlColors && options.mtl ? parseMtlColors(options.mtl) : void 0;
+    const materials = options.useMtlColors && options.mtl ? parseMtl(options.mtl) : void 0;
     const vertices = [];
     const faces = [];
     let material;
@@ -4188,9 +4896,11 @@ void main() {
           indices.push(resolveIndex(vertexToken, vertices.length));
         }
         if (indices.length >= 3) {
-          const mtlColor = material ? materialColors?.get(material) : void 0;
-          const color = mtlColor ?? (materialColors ? colors[0] ?? "#888888" : colors[faces.length % colors.length]);
-          faces.push({ indices, color });
+          const entry = material ? materials?.get(material) : void 0;
+          const color = entry?.color ?? (materials ? colors[0] ?? "#888888" : colors[faces.length % colors.length]);
+          const face = { indices, color };
+          if (entry?.material) face.material = entry.material;
+          faces.push(face);
         }
       }
     }