3d-spinner 0.9.3 → 0.9.4

package/dist/animations/rocket-launch.js

@@ -0,0 +1,375 @@
+import { animationLabelOpacity, mountAnimationLabel, } from "../animation-label.js";
+import { Little3dEngine, pyramid, quad, } from "../engines/little-3d-engine/little-3d-engine.js";
+import { canvasTexture } from "../engines/little-3d-engine/textures/dynamic/canvas-texture.js";
+import { easeOutBack } from "../engines/little-tween-engine/core/tweens.js";
+const ROCKETS = 20; // one per 5% of progress
+const CAMERA_Z = 3;
+const FOV = (55 * Math.PI) / 180;
+const HALF_HEIGHT = Math.tan(FOV / 2) * CAMERA_Z;
+const SIZE = 0.12;
+const ROW_Y = -0.5; // the row sits just under the centered progress text
+const PARTICLE_Z = 0.3; // in front of the rockets so exhaust and smoke read clearly
+const SLIDE_MS = 460; // cartoon slide-in from the right
+const SLIDE_GATE = 0.45; // a rocket starts sliding once its left neighbor is this far in
+const EXIT_HURRY = 2.5; // at 100% any stragglers rush in before the row can launch
+const LAUNCH_SPREAD_MS = 620; // staggered blast-off window at 100%
+const ASCENT_G = 5.2; // climb acceleration, scene units per second squared
+const FINISH_PAD_MS = 2000; // time after the last blast-off before the scene is done
+const TURNERS = 3; // rockets that veer off mid-climb
+const TURN_MIN_Y = 0.2;
+const TURN_MAX_Y = 0.8; // "about halfway", jittered so no two turn at the same height
+const TURN_MIN_DEG = 30;
+const TURN_MAX_DEG = 50;
+const DEG = Math.PI / 180;
+const SMOKE_LIFE_MS = 1400;
+const SMOKE_GAP_MS = 320; // low rate: a lazy idle wisp per rocket
+const SMOKE_RISE = 0.55;
+const SMOKE_SIZE = 0.17;
+const SMOKE_PEAK = 0.16; // very transparent
+const SMOKE_POOL = 104;
+const FIRE_LIFE_MS = 420;
+const FIRE_GAP_MS = 55;
+const FIRE_ON_MS = 950; // stop the exhaust once the rocket has cleared the view
+const FIRE_TRAIL = 0.25; // how fast a puff drifts back off the nozzle
+const FIRE_SPREAD = 0.09;
+const FIRE_SIZE = 0.15;
+const FIRE_PEAK = 0.9;
+const FIRE_POOL = 140;
+const SMOKE_COLORS = ["#e2e8f0", "#cbd5e1"];
+const FIRE_COLORS = ["#fef3c7", "#fde047", "#fb923c", "#ef4444"];
+const ROCKET_COLORS = ["#e2e8f0", "#f8fafc", "#cbd5e1", "#94a3b8", "#e2e8f0"];
+function clamp01(value) {
+    return Math.max(0, Math.min(1, value));
+}
+function smoothstep(edge0, edge1, value) {
+    const x = clamp01((value - edge0) / (edge1 - edge0));
+    return x * x * (3 - 2 * x);
+}
+function hash01(index, salt) {
+    let h = (Math.imul(index + 1, 0x9e3779b9) ^ Math.imul(salt + 1, 0x85ebca6b)) >>> 0;
+    h = Math.imul(h ^ (h >>> 16), 0x45d9f3b);
+    h ^= h >>> 16;
+    return (h >>> 0) / 4294967296;
+}
+/** A soft round puff for tinting: white so the face color sets the hue, alpha falls off radially. */
+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);
+    });
+}
+/**
+ * A progress story told by a launch pad. Every 5% of progress a small rocket
+ * slides in cartoon-style from the right and lines up left-to-right under the
+ * progress text, idling with a thin wisp of smoke. At 100% the whole row blasts
+ * off in a loose stagger on columns of fire; partway up three of them suddenly
+ * veer 30-50 degrees and streak away. Rocket count follows the reported
+ * progress, so scrubbing in either direction stays smooth.
+ */
+export class RocketLaunchAnimation {
+    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] = hash01(i, 7) * LAUNCH_SPREAD_MS;
+        }
+        // Pick the three veering rockets deterministically, then give each its own
+        // turn height, angle, and side.
+        const order = Array.from({ length: ROCKETS }, (_, i) => i).sort((a, b) => hash01(a, 11) - hash01(b, 11));
+        for (const i of order.slice(0, TURNERS)) {
+            const height = TURN_MIN_Y + hash01(i, 12) * (TURN_MAX_Y - TURN_MIN_Y);
+            const angle = (TURN_MIN_DEG + hash01(i, 13) * (TURN_MAX_DEG - TURN_MIN_DEG)) * DEG;
+            const sign = hash01(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 import("../engines/little-3d-engine/renderers/webgpu-textured.js")).WebGPUTexturedRenderer(rendererOptions)
+                : this.backend === "webgl"
+                    ? new (await import("../engines/little-3d-engine/renderers/webgl-textured.js")).WebGLTexturedRenderer(rendererOptions)
+                    : new (await import("../engines/little-3d-engine/renderers/canvas2d-textured.js")).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_Z }, fov: FOV },
+        });
+        // Untextured pyramids render lit through the inner renderer; the textured
+        // smoke and fire quads draw over them as billboards.
+        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;
+        // At 100% the runner calls exit(): hurry any stragglers onto the pad, then
+        // launch only once the whole row is grounded, so a hard scrub straight to
+        // 100% still plays every rocket's slide-in instead of snapping them in.
+        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_HEIGHT * 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;
+            }
+            // Grounded: slide in and idle.
+            const blend = this.blends[i];
+            if (blend <= 0)
+                continue;
+            const transform = this.rockets[i].transform;
+            transform.position.x = spawnX + (homeX - spawnX) * easeOutBack(blend);
+            transform.position.y = ROW_Y;
+            transform.position.z = 0;
+            transform.rotation.x = 0;
+            transform.rotation.y = 0;
+            transform.rotation.z = 0;
+            transform.scale = SIZE * smoothstep(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 = undefined;
+        this.label?.container.remove();
+        this.label = undefined;
+        this.engine?.destroy();
+        this.engine = undefined;
+        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) {
+        // One rocket per 5%; round so the twentieth lands ~97.5% and is grounded
+        // before the 100% blast-off, never colliding with it.
+        const want = exiting ? ROCKETS : Math.min(ROCKETS, Math.round(progress * ROCKETS));
+        const rate = (dt / SLIDE_MS) * (exiting ? EXIT_HURRY : 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 / 1000;
+        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_HEIGHT + 0.4 || Math.abs(pos.x) > halfWidth + 0.4)
+            return; // gone
+        const transform = this.rockets[i].transform;
+        transform.position.x = pos.x;
+        transform.position.y = pos.y;
+        transform.position.z = 0;
+        transform.rotation.x = 0;
+        transform.rotation.y = 0;
+        transform.rotation.z = roll;
+        transform.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 / 1000;
+            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 = (hash01(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 transform = this.fire[cursor].transform;
+            transform.position.x = baseX + back.x * FIRE_TRAIL * seconds + perp.x * lat;
+            transform.position.y = baseY + back.y * FIRE_TRAIL * seconds + perp.y * lat - 0.12 * seconds * seconds;
+            transform.position.z = PARTICLE_Z;
+            transform.rotation.z = hash01(i * 97 + n, 2) * Math.PI * 2;
+            transform.scale = FIRE_SIZE * (0.7 + 0.5 * hash01(i * 97 + n, 3)) * (1 - 0.55 * life);
+            this.fireFades[cursor].opacity =
+                FIRE_PEAK * smoothstep(0, 0.15, life) * (1 - smoothstep(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;
+        // Stop spawning once this rocket is about to launch; live wisps still drift off.
+        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 = (hash01(i * 131 + n, 1) - 0.5) * 0.14;
+            const transform = this.smoke[cursor].transform;
+            transform.position.x = homeX + drift * life;
+            transform.position.y = baseY + SMOKE_RISE * life;
+            transform.position.z = PARTICLE_Z;
+            transform.rotation.z = hash01(i * 131 + n, 2) * Math.PI * 2;
+            transform.scale = SMOKE_SIZE * (0.5 + 0.8 * life) * (0.7 + 0.6 * hash01(i * 131 + n, 3));
+            this.smokeFades[cursor].opacity =
+                SMOKE_PEAK * smoothstep(0, 0.25, life) * (1 - smoothstep(0.5, 1, life));
+            cursor++;
+        }
+        return cursor;
+    }
+}

package/dist/cjs/animations/grid-assembly.cjs

@@ -165,31 +165,6 @@ function expandToTriangles(mesh) {
   }
   return { positions, normals, colors, 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 };
-}
-function sphereFromTriangles(seedVertices, seedFaces, size, detail, colors) {
-  const radius = size / 2;
-  let triangles = seedFaces.map((f) => f.map((i) => normalize(seedVertices[i])));
-  const levels = Math.max(0, Math.floor(detail) - 1);
-  for (let level = 0; level < levels; level++) {
-    const next = [];
-    for (const [a, b, c] of triangles) {
-      const ab = normalize(midpoint(a, b));
-      const bc = normalize(midpoint(b, c));
-      const ca = normalize(midpoint(c, a));
-      next.push([a, ab, ca], [b, bc, ab], [c, ca, bc], [ab, bc, ca]);
-    }
-    triangles = next;
-  }
-  const vertices = [];
-  const faces = triangles.map((tri, i) => {
-    const base = vertices.length;
-    vertices.push(scale(tri[0], radius), scale(tri[1], radius), scale(tri[2], radius));
-    return { indices: [base, base + 1, base + 2], color: colors[i % colors.length] };
-  });
-  return { vertices, faces };
-}
 var init_geometry = __esm({
   "src/engines/little-3d-engine/core/geometry.ts"() {
     "use strict";
@@ -967,83 +942,8 @@ function cube(size = 1, colors = DEFAULT_COLORS) {
   return { vertices, faces };
 }
 
-// src/engines/little-3d-engine/shapes/primitives/tetrahedron.ts
-var DEFAULT_COLORS2 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b"];
-function tetrahedron(size = 1, colors = DEFAULT_COLORS2) {
-  const s = size / 2;
-  const vertices = [
-    { x: s, y: s, z: s },
-    { x: s, y: -s, z: -s },
-    { x: -s, y: s, z: -s },
-    { x: -s, y: -s, z: s }
-  ];
-  const faces = [
-    { indices: [0, 1, 2], color: colors[0 % colors.length] },
-    { indices: [0, 3, 1], color: colors[1 % colors.length] },
-    { 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_COLORS3 = [
-  "#3b82f6",
-  "#8b5cf6",
-  "#ec4899",
-  "#f59e0b",
-  "#10b981",
-  "#ef4444",
-  "#06b6d4",
-  "#eab308"
-];
-function octahedron(size = 1, colors = DEFAULT_COLORS3) {
-  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 };
-}
-
-// src/engines/little-3d-engine/shapes/primitives/pyramid.ts
-var DEFAULT_COLORS4 = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981"];
-function pyramid(size = 1, colors = DEFAULT_COLORS4) {
-  const h = size / 2;
-  const vertices = [
-    { x: -h, y: -h, z: h },
-    { x: h, y: -h, z: h },
-    { x: h, y: -h, z: -h },
-    { x: -h, y: -h, z: -h },
-    { x: 0, y: h, z: 0 }
-  ];
-  const faces = [
-    { indices: [0, 3, 2, 1], color: colors[0 % colors.length] },
-    { indices: [4, 0, 1], color: colors[1 % colors.length] },
-    { indices: [4, 1, 2], color: colors[2 % colors.length] },
-    { indices: [4, 2, 3], color: colors[3 % colors.length] },
-    { indices: [4, 3, 0], color: colors[4 % colors.length] }
-  ];
-  return { vertices, faces };
-}
-
 // src/engines/little-3d-engine/shapes/primitives/spheres/icosphere.ts
 init_geometry();
-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 },
@@ -1059,31 +959,6 @@ var SEED_VERTICES = [
   { x: -T, y: 0, z: -1 },
   { x: -T, y: 0, z: 1 }
 ];
-var SEED_FACES = [
-  [0, 11, 5],
-  [0, 5, 1],
-  [0, 1, 7],
-  [0, 7, 10],
-  [0, 10, 11],
-  [1, 5, 9],
-  [5, 11, 4],
-  [11, 10, 2],
-  [10, 7, 6],
-  [7, 1, 8],
-  [3, 9, 4],
-  [3, 4, 2],
-  [3, 2, 6],
-  [3, 6, 8],
-  [3, 8, 9],
-  [4, 9, 5],
-  [2, 4, 11],
-  [6, 2, 10],
-  [8, 6, 7],
-  [9, 8, 1]
-];
-function icosphere(size = 1, detail = 1, colors = DEFAULT_COLORS5) {
-  return sphereFromTriangles(SEED_VERTICES, SEED_FACES, size, detail, colors);
-}
 
 // src/engines/little-3d-engine/shapes/primitives/spheres/octa-sphere.ts
 init_geometry();
@@ -1263,6 +1138,7 @@ var FOV = 55 * Math.PI / 180;
 var TWO_PI = 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_HURRY = 2.5;
@@ -1271,15 +1147,11 @@ var SPIN_MS = 380;
 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 clamp012(value) {
   return Math.max(0, Math.min(1, value));
 }
@@ -1307,6 +1179,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;
@@ -1315,7 +1190,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(resolveMesh);
@@ -1332,7 +1206,9 @@ var GridAssemblyAnimation = class {
       this.slots.push({ x: (col - 2) * spacing, y: (2 - row) * spacing, z: 0 });
       this.tumbleX.push(TWO_PI * hash01(i, 2) - Math.PI);
       this.tumbleY.push(TWO_PI * 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";
@@ -1393,7 +1269,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_MS) {
       this.finished = true;
     }
     this.engine.render();
@@ -1410,7 +1286,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_HURRY : 1);
     for (let i = 0; i < COUNT; i++) {
       const target = i < want ? 1 : 0;
@@ -1473,25 +1350,30 @@ var GridAssemblyAnimation = class {
     if (!this.captured) {
       this.captured = this.handles.map((handle) => ({ ...handle.transform.position }));
     }
-    const u = clamp012((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(clamp012(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 = clamp012((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 = clamp012((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));
       }
     }
   }

package/dist/cjs/engines/little-3d-engine/little-3d-engine.cjs

@@ -1238,18 +1238,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);
   });
 }