3d-spinner 0.9.3 → 0.9.4

package/dist/animations/ghost-train.d.ts

@@ -0,0 +1,72 @@
+import type { AnimationFrame, AnimationLabel, SpinnerAnimation } from "../animation.js";
+import { type Backend } from "../engines/little-3d-engine/little-3d-engine.js";
+import type { MotionController } from "../motion/controller.js";
+export interface GhostTrainOptions {
+    /** How the convoy moves. Default a tilted square track. */
+    motion?: MotionController;
+    /** Uniform car size in scene units. Default `0.3`. */
+    size?: number;
+    /** Rendering backend. Default `"canvas2d"`. */
+    backend?: Backend;
+    /** Overlay label; progress mode shows a percentage. */
+    label?: AnimationLabel;
+    /** Fade the label with the story's beginning and end. Default `true`. */
+    fadeLabel?: boolean;
+}
+/**
+ * A progress story: a translucent train of ice cubes runs laps around a tilted
+ * square track, cars turning smoothly through the corners as if seen from above.
+ * Every 2% of progress attaches one more car, popping it into existence at the
+ * tail. At 100% the lead car keeps going in its current direction of travel and
+ * every following car funnels through that same exit point along the exact same
+ * path, the convoy accelerating clear of the view within four seconds. Car
+ * count follows the
+ * reported progress, so scrubbing in either direction stays smooth.
+ * {@link trailEmitter} exposes the lead car to a particle layer for the star trail.
+ */
+export declare class GhostTrainAnimation implements SpinnerAnimation {
+    private engine?;
+    private label?;
+    private observer?;
+    private readonly cars;
+    private readonly appear;
+    private readonly headings;
+    private readonly motion;
+    private readonly size;
+    private readonly backend?;
+    private readonly labelContent?;
+    private readonly fadeLabel;
+    private aspect;
+    private enterAt;
+    private outroAt;
+    private carsAtOutro;
+    private exitPathTime;
+    private exitPoint;
+    private exitDir;
+    private exitSpeed;
+    private lastNow;
+    private finished;
+    constructor(options?: GhostTrainOptions);
+    mount(target: HTMLElement): void;
+    enter(now: number): void;
+    exit(now: number): void;
+    isFinished(): boolean;
+    /** Milliseconds the lead car keeps moving into the outro; feed a trail layer's `outroMs`. */
+    get outroDurationMs(): number;
+    /**
+     * 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(): MotionController;
+    render(now: number, frame: AnimationFrame): void;
+    destroy(): void;
+    /** Extra path-time every car has accelerated forward by, `now` ms into the outro. */
+    private warp;
+    /**
+     * 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.
+     */
+    private pathPosition;
+}

package/dist/animations/ghost-train.js

@@ -0,0 +1,247 @@
+import { animationLabelOpacity, mountAnimationLabel, } from "../animation-label.js";
+import { Little3dEngine, cube, cross, dot, normalize, subtract, } from "../engines/little-3d-engine/little-3d-engine.js";
+import { squareMotion } from "../motion/square.js";
+import { easeOutBack } from "../engines/little-tween-engine/core/tweens.js";
+const MAX_CARS = 50; // one car per 2% of progress
+const CAMERA_Z = 3;
+const FOV = (55 * Math.PI) / 180;
+const HALF_HEIGHT = Math.tan(FOV / 2) * CAMERA_Z;
+const RUN_GAP_MS = 130; // spacing between cars in path-time; 49 gaps stay under one lap
+const POP_MS = 320; // a new car pops into existence over this long
+const SAMPLE_MS = 8; // heading sample step
+const TURN_RATE = (0.4 * Math.PI) / 180; // max heading change per millisecond (smooth cornering)
+// Blast-off: the whole convoy funnels through the lead car's exit point and
+// follows the exact same escape path. A time-warp accelerates every car's
+// path-time after exit so all of them clear the view within MAX_OUTRO_MS.
+const MAX_OUTRO_MS = 4000;
+const WARP_ACCEL = 1000; // extra path-milliseconds accrued, = 0.5 * WARP_ACCEL * seconds^2
+const TRAIL_OUTRO_MS = 1200; // how long the lead keeps shedding stars into the outro
+const TRANSPARENCY = { mode: "two-sided", opacity: 0.275 };
+const CAR_COLORS = ["#bae6fd", "#7dd3fc", "#38bdf8", "#0ea5e9", "#a5f3fc", "#e0f2fe"];
+const WORLD_UP = { x: 0, y: 1, z: 0 };
+function clamp01(value) {
+    return Math.max(0, Math.min(1, value));
+}
+/** Orientation (engine Euler) that points the car's local +X along `forward`, kept upright. */
+function orientationFor(forward) {
+    const fwd = normalize(forward);
+    let right = cross(fwd, WORLD_UP);
+    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),
+    };
+}
+/** Rotate unit vector `from` toward `to` by at most `maxRad`, for a rate-limited turn. */
+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; // (near-)opposite: snap rather than spin unpredictably
+    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 });
+}
+/**
+ * A progress story: a translucent train of ice cubes runs laps around a tilted
+ * square track, cars turning smoothly through the corners as if seen from above.
+ * Every 2% of progress attaches one more car, popping it into existence at the
+ * tail. At 100% the lead car keeps going in its current direction of travel and
+ * every following car funnels through that same exit point along the exact same
+ * path, the convoy accelerating clear of the view within four seconds. Car
+ * count follows the
+ * reported progress, so scrubbing in either direction stays smooth.
+ * {@link trailEmitter} exposes the lead car to a particle layer for the star trail.
+ */
+export class GhostTrainAnimation {
+    constructor(options = {}) {
+        this.cars = [];
+        this.appear = new Array(MAX_CARS).fill(0);
+        this.headings = new Array(MAX_CARS).fill(undefined);
+        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 = 0.001; // 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_Z }, fov: FOV },
+        });
+        const mesh = cube(1, CAR_COLORS);
+        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;
+        // The lead car keeps going in its current direction of travel; every car
+        // funnels through the exit point and follows that same straight path out.
+        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;
+        // One car per 2%; round so the fiftieth attaches ~99% and has a beat to pop
+        // before the 100% blast-off (mirrors the rocket-launch count).
+        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] = clamp01(this.appear[k] + Math.sign(target - this.appear[k]) * (dt / POP_MS));
+            if (this.appear[k] <= 0) {
+                this.headings[k] = undefined;
+                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; // off-screen: leave it hidden
+            }
+            const ahead = subtract(this.pathPosition(p + SAMPLE_MS), 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 = orientationFor(this.headings[k]);
+            const transform = this.cars[k].transform;
+            transform.position.x = position.x;
+            transform.position.y = position.y;
+            transform.position.z = position.z;
+            transform.rotation.x = orientation.x;
+            transform.rotation.y = orientation.y;
+            transform.rotation.z = orientation.z;
+            transform.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 = undefined;
+        this.label?.container.remove();
+        this.label = undefined;
+        this.engine?.destroy();
+        this.engine = undefined;
+        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) / 1000;
+        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,
+        };
+    }
+}

package/dist/animations/grid-assembly.d.ts

@@ -19,13 +19,14 @@ export interface GridAssemblyOptions {
     fadeLabel?: boolean;
 }
 /**
- * A progress story in three acts: 25 shapes fly in and circle just inside the
- * view edge; as progress climbs they leave the orbit one by one and dock into
- * a 5x5 grid at the center (docked shapes idle with a staggered spin every two
- * seconds); at completion the finished grid holds for a second, then every
- * shape dives into the center while shrinking away and vanishes with a small
- * pop. Docking is driven by time-based blends toward per-shape targets, so a
- * progress jump in either direction stays smooth.
+ * A progress story in three acts: 25 pastel dark-blue cubes fly in and circle
+ * just inside the view edge, completing the full ring before any of them move;
+ * once the circle is complete they leave the orbit one by one as progress climbs
+ * and dock into a 5x5 grid at the center (docked cubes idle with a staggered
+ * spin every two seconds); at completion the finished grid holds for a second,
+ * then the cubes dive into the center a little staggered, shrinking away and
+ * vanishing with a small pop. Docking is driven by time-based blends toward
+ * per-shape targets, so a progress jump in either direction stays smooth.
  */
 export declare class GridAssemblyAnimation implements SpinnerAnimation {
     private engine?;
@@ -36,6 +37,9 @@ export declare class GridAssemblyAnimation implements SpinnerAnimation {
     private readonly dockedAt;
     private readonly tumbleX;
     private readonly tumbleY;
+    private readonly collapseDelay;
+    private readonly popStarted;
+    private maxCollapseDelay;
     private readonly fades;
     private readonly slots;
     private readonly meshes;
@@ -52,7 +56,6 @@ export declare class GridAssemblyAnimation implements SpinnerAnimation {
     private collapseAt;
     private captured?;
     private lastNow;
-    private popFading;
     private finished;
     constructor(options?: GridAssemblyOptions);
     mount(target: HTMLElement): void;

package/dist/animations/grid-assembly.js

@@ -1,5 +1,5 @@
 import { animationLabelOpacity, mountAnimationLabel, } from "../animation-label.js";
-import { Little3dEngine, cube, tetrahedron, octahedron, pyramid, icosphere, } from "../engines/little-3d-engine/little-3d-engine.js";
+import { Little3dEngine, cube, } from "../engines/little-3d-engine/little-3d-engine.js";
 import { easeInCubic, easeInOutCubic, easeOutCubic, } from "../engines/little-tween-engine/core/tweens.js";
 const GRID = 5;
 const COUNT = GRID * GRID;
@@ -8,6 +8,8 @@ const FOV = (55 * Math.PI) / 180;
 const TWO_PI = Math.PI * 2;
 const INTRO_MS = 900;
 const INTRO_STAGGER_MS = 60;
+// The orbit ring is fully formed once the last-staggered shape finishes flying in.
+const INTRO_DONE_MS = (COUNT - 1) * INTRO_STAGGER_MS + INTRO_MS;
 const GATE_DOCK = 0.35;
 const GATE_UNDOCK = 0.65;
 const EXIT_HURRY = 2.5;
@@ -16,15 +18,12 @@ const SPIN_MS = 380;
 const SPIN_STAGGER_MS = 80;
 const HOLD_MS = 1000;
 const COLLAPSE_MS = 700;
+const COLLAPSE_SPREAD_MS = 500; // shapes leave a little staggered, not all at once
 const POP_MS = 170;
 const LABEL_FADE_MS = 600;
-const 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"]),
-];
+// Every shape is the same pastel dark-blue cube; the six face tints give it depth.
+const CUBE_COLORS = ["#8397c6", "#7186b8", "#6176a8", "#93a6cf", "#556a9c", "#7a8fc0"];
+const DEFAULT_MESHES = [() => cube(1, CUBE_COLORS)];
 function clamp01(value) {
     return Math.max(0, Math.min(1, value));
 }
@@ -48,13 +47,14 @@ function hash01(index, salt) {
     return (h >>> 0) / 4294967296;
 }
 /**
- * A progress story in three acts: 25 shapes fly in and circle just inside the
- * view edge; as progress climbs they leave the orbit one by one and dock into
- * a 5x5 grid at the center (docked shapes idle with a staggered spin every two
- * seconds); at completion the finished grid holds for a second, then every
- * shape dives into the center while shrinking away and vanishes with a small
- * pop. Docking is driven by time-based blends toward per-shape targets, so a
- * progress jump in either direction stays smooth.
+ * A progress story in three acts: 25 pastel dark-blue cubes fly in and circle
+ * just inside the view edge, completing the full ring before any of them move;
+ * once the circle is complete they leave the orbit one by one as progress climbs
+ * and dock into a 5x5 grid at the center (docked cubes idle with a staggered
+ * spin every two seconds); at completion the finished grid holds for a second,
+ * then the cubes dive into the center a little staggered, shrinking away and
+ * vanishing with a small pop. Docking is driven by time-based blends toward
+ * per-shape targets, so a progress jump in either direction stays smooth.
  */
 export class GridAssemblyAnimation {
     constructor(options = {}) {
@@ -63,6 +63,9 @@ export class GridAssemblyAnimation {
         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;
@@ -71,7 +74,6 @@ export class GridAssemblyAnimation {
         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);
@@ -88,7 +90,9 @@ export class GridAssemblyAnimation {
             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)
@@ -153,7 +157,7 @@ export class GridAssemblyAnimation {
         if (this.fadeLabel) {
             this.label.setOpacity(animationLabelOpacity(now, this.enterAt, LABEL_FADE_MS, this.collapseAt, 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();
@@ -170,7 +174,12 @@ export class GridAssemblyAnimation {
     }
     updateBlends(dt, progress, now) {
         const exiting = this.exitAt !== Infinity;
-        const want = exiting ? COUNT : Math.min(COUNT, Math.floor(progress * COUNT + 1e-9));
+        // Hold every shape on the orbit until the ring is fully formed: no shape
+        // starts diving to its grid cell before the circle is complete.
+        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;
@@ -241,27 +250,32 @@ export class GridAssemblyAnimation {
         if (!this.captured) {
             this.captured = this.handles.map((handle) => ({ ...handle.transform.position }));
         }
-        const u = clamp01((now - this.collapseAt) / COLLAPSE_MS);
-        const pull = easeInCubic(u);
+        // Each shape dives and pops on its own small delay, so the grid empties a
+        // little staggered instead of all at once.
         for (let i = 0; i < COUNT; i++) {
             const transform = this.handles[i].transform;
             const from = this.captured[i];
+            const local = now - this.collapseAt - this.collapseDelay[i];
+            if (local <= 0) {
+                transform.position.x = from.x;
+                transform.position.y = from.y;
+                transform.position.z = from.z;
+                transform.scale = this.size;
+                continue;
+            }
+            const pull = easeInCubic(clamp01(local / COLLAPSE_MS));
             transform.position.x = from.x * (1 - pull);
             transform.position.y = from.y * (1 - pull);
             transform.position.z = from.z * (1 - pull);
             transform.scale = this.size * (1 - 0.99 * pull);
-        }
-        if (u >= 1) {
-            if (!this.popFading) {
-                this.popFading = true;
-                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 = clamp01((now - this.collapseAt - COLLAPSE_MS) / POP_MS);
-            for (let i = 0; i < COUNT; i++) {
+                }
+                const v = clamp01((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));
+                transform.scale = v >= 1 ? 0 : this.size * 0.01 * (1 + 1.6 * Math.sin(Math.PI * v));
             }
         }
     }

package/dist/animations/rocket-launch.d.ts

@@ -0,0 +1,58 @@
+import type { AnimationFrame, AnimationLabel, SpinnerAnimation } from "../animation.js";
+import { type Backend } from "../engines/little-3d-engine/little-3d-engine.js";
+export interface RocketLaunchOptions {
+    /** Rendering backend. Default `"canvas2d"`. */
+    backend?: Backend;
+    /** Overlay label; progress mode shows a percentage. */
+    label?: AnimationLabel;
+    /** Fade the label with the story's beginning and launch. Default `true`. */
+    fadeLabel?: boolean;
+}
+/**
+ * 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 declare class RocketLaunchAnimation implements SpinnerAnimation {
+    private engine?;
+    private label?;
+    private observer?;
+    private readonly backend?;
+    private readonly labelContent?;
+    private readonly fadeLabel;
+    private readonly rockets;
+    private readonly smoke;
+    private readonly fire;
+    private readonly smokeFades;
+    private readonly fireFades;
+    private readonly blends;
+    private readonly groundedAt;
+    private readonly turnS;
+    private readonly turnDir;
+    private readonly turnRoll;
+    private readonly stagger;
+    private aspect;
+    private enterAt;
+    private exitAt;
+    private launchedAt;
+    private lastNow;
+    private finished;
+    constructor(options?: RocketLaunchOptions);
+    mount(target: HTMLElement): void;
+    enter(now: number): void;
+    exit(now: number): void;
+    isFinished(): boolean;
+    render(now: number, frame: AnimationFrame): void;
+    destroy(): void;
+    private updateBlends;
+    /** Along-track distance climbed `la` ms after this rocket's own blast-off. */
+    private ascentDistance;
+    /** Rocket center, nose direction, and roll `la` ms into its climb. */
+    private ascentPose;
+    private renderAscent;
+    private emitFire;
+    private emitSmoke;
+}