3d-spinner 0.9.1 → 0.9.3

package/dist/engines/little-3d-engine/shapes/{cube-sphere.d.ts → primitives/spheres/cube-sphere.d.ts}

@@ -1,4 +1,4 @@
-import type { Mesh } from "../core/mesh.js";
+import type { Mesh } from "../../../core/mesh.js";
 /**
  * Build a cube-sphere (spherified cube) centered on the origin: each cube face
  * is gridded and projected onto the sphere. Even, all-quad, no poles.

package/dist/engines/little-3d-engine/shapes/{icosphere.d.ts → primitives/spheres/icosphere.d.ts}

@@ -1,4 +1,4 @@
-import type { Mesh } from "../core/mesh.js";
+import type { Mesh } from "../../../core/mesh.js";
 /**
  * Build an icosphere (subdivided icosahedron) centered on the origin. Gives the
  * most uniform triangle distribution of the sphere types.

package/dist/engines/little-3d-engine/shapes/{icosphere.js → primitives/spheres/icosphere.js}

@@ -1,4 +1,4 @@
-import { sphereFromTriangles } from "../core/geometry.js";
+import { sphereFromTriangles } from "../../../core/geometry.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 const T = (1 + Math.sqrt(5)) / 2;
 const SEED_VERTICES = [

package/dist/engines/little-3d-engine/shapes/{octa-sphere.d.ts → primitives/spheres/octa-sphere.d.ts}

@@ -1,4 +1,4 @@
-import type { Mesh } from "../core/mesh.js";
+import type { Mesh } from "../../../core/mesh.js";
 /**
  * Build an octa-sphere (subdivided octahedron) centered on the origin.
  *

package/dist/engines/little-3d-engine/shapes/{octa-sphere.js → primitives/spheres/octa-sphere.js}

@@ -1,4 +1,4 @@
-import { sphereFromTriangles } from "../core/geometry.js";
+import { sphereFromTriangles } from "../../../core/geometry.js";
 const DEFAULT_COLORS = ["#3b82f6", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#ef4444"];
 const SEED_VERTICES = [
     { x: 1, y: 0, z: 0 },

package/dist/engines/little-3d-engine/shapes/{uv-sphere.d.ts → primitives/spheres/uv-sphere.d.ts}

@@ -1,4 +1,4 @@
-import type { Mesh } from "../core/mesh.js";
+import type { Mesh } from "../../../core/mesh.js";
 /**
  * Build a UV (latitude/longitude) sphere centered on the origin.
  *

package/dist/engines/little-3d-engine/shapes/{tetrahedron.d.ts → primitives/tetrahedron.d.ts}

@@ -1,4 +1,4 @@
-import type { Mesh } from "../core/mesh.js";
+import type { Mesh } from "../../core/mesh.js";
 /**
  * Build a regular tetrahedron mesh centered on the origin.
  *

package/dist/engines/little-3d-engine/textures/dynamic/canvas-texture.d.ts

@@ -0,0 +1 @@
+export declare function canvasTexture(draw: (ctx: CanvasRenderingContext2D) => void, size?: number): HTMLCanvasElement;

package/dist/engines/little-3d-engine/textures/dynamic/canvas-texture.js

@@ -0,0 +1,8 @@
+export function canvasTexture(draw, size = 96) {
+    const canvas = document.createElement("canvas");
+    canvas.width = canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    if (ctx)
+        draw(ctx);
+    return canvas;
+}

package/dist/engines/little-3d-engine/textures/dynamic/shine.d.ts

@@ -0,0 +1,2 @@
+/** A soft radial glow for particle billboards. */
+export declare function shineTexture(): HTMLCanvasElement;

package/dist/engines/little-3d-engine/textures/dynamic/shine.js

@@ -0,0 +1,14 @@
+import { canvasTexture } from "./canvas-texture.js";
+/** A soft radial glow for particle billboards. */
+export function shineTexture() {
+    return canvasTexture((ctx) => {
+        const halo = ctx.createRadialGradient(48, 48, 1, 48, 48, 46);
+        halo.addColorStop(0, "rgba(255,255,255,1)");
+        halo.addColorStop(0.08, "rgba(255,255,255,1)");
+        halo.addColorStop(0.22, "rgba(210,240,255,0.7)");
+        halo.addColorStop(0.55, "rgba(120,200,255,0.22)");
+        halo.addColorStop(1, "rgba(80,160,255,0)");
+        ctx.fillStyle = halo;
+        ctx.fillRect(0, 0, 96, 96);
+    });
+}

package/dist/engines/little-3d-engine/textures/dynamic/star.d.ts

@@ -0,0 +1,2 @@
+/** A white five-point star on a transparent square canvas. */
+export declare function starTexture(): HTMLCanvasElement;

package/dist/engines/little-3d-engine/textures/dynamic/star.js

@@ -0,0 +1,16 @@
+import { canvasTexture } from "./canvas-texture.js";
+/** A white five-point star on a transparent square canvas. */
+export function starTexture() {
+    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));
+        }
+        ctx.closePath();
+        ctx.fill();
+    });
+}

package/dist/engines/little-3d-engine/textures/dynamic/streak.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A horizontal streak fading from transparent to white.
+ * Head at x=91 (alignToMotion rolls the billboard +x onto the velocity).
+ */
+export declare function streakTexture(): HTMLCanvasElement;

package/dist/engines/little-3d-engine/textures/dynamic/streak.js

@@ -0,0 +1,20 @@
+import { canvasTexture } from "./canvas-texture.js";
+/**
+ * A horizontal streak fading from transparent to white.
+ * Head at x=91 (alignToMotion rolls the billboard +x onto the velocity).
+ */
+export function streakTexture() {
+    return canvasTexture((ctx) => {
+        const gradient = ctx.createLinearGradient(5, 0, 91, 0);
+        gradient.addColorStop(0, "rgba(255,255,255,0)");
+        gradient.addColorStop(0.7, "rgba(255,255,255,0.4)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.strokeStyle = gradient;
+        ctx.lineWidth = 3.5;
+        ctx.lineCap = "round";
+        ctx.beginPath();
+        ctx.moveTo(5, 48);
+        ctx.lineTo(91, 48);
+        ctx.stroke();
+    });
+}

package/dist/index.d.ts

@@ -34,4 +34,5 @@ export interface Spinner {
     destroy(): void;
 }
 export declare function createSpinner(target: HTMLElement, options: SpinnerOptions): Spinner;
-export type { SpinnerAnimation, AnimationFrame } from "./animation.js";
+export type { SpinnerAnimation, AnimationFrame, AnimationLabel } from "./animation.js";
+export type { CompositeAnimationLayer } from "./composite-animation.js";

package/dist/prefabs/charged-orb.d.ts

@@ -0,0 +1,17 @@
+import { type ChargedOrbOptions } from "../animations/charged-orb.js";
+import type { ProgressSpinnerOptions } from "../index.js";
+import type { ParticlesOptions } from "../animations/particles.js";
+import type { ProgressPrefabOptions } from "./types.js";
+export interface ChargedOrbPrefabOptions extends ProgressPrefabOptions {
+    /** Overrides for the orb layer. */
+    orb?: ChargedOrbOptions;
+    /** Overrides for the particle layer. */
+    particles?: ParticlesOptions;
+}
+/**
+ * A progress story: the center orb pops straight to full size, and every 10%
+ * of progress a mini orb pops out of it into an evenly spread satellite ring,
+ * each satellite trailing its own spark stream; at 100% the satellites take
+ * one extra lap, dive back into the big orb, and the orb pops away.
+ */
+export declare function chargedOrb(options?: ChargedOrbPrefabOptions): ProgressSpinnerOptions;

package/dist/prefabs/charged-orb.js

@@ -0,0 +1,37 @@
+import { CompositeAnimation } from "../composite-animation.js";
+import { ParticlesAnimation } from "../animations/particles.js";
+import { ChargedOrbAnimation } from "../animations/charged-orb.js";
+import { shineTexture } from "../engines/little-3d-engine/little-3d-engine.js";
+import { progressSpinner } from "./spinner.js";
+/**
+ * A progress story: the center orb pops straight to full size, and every 10%
+ * of progress a mini orb pops out of it into an evenly spread satellite ring,
+ * each satellite trailing its own spark stream; at 100% the satellites take
+ * one extra lap, dive back into the big orb, and the orb pops away.
+ */
+export function chargedOrb(options = {}) {
+    const particles = options.particles ?? {};
+    const rate = particles.rate ?? 60;
+    const orb = new ChargedOrbAnimation({
+        backend: options.backend,
+        ...options.orb,
+    });
+    // One spark stream per satellite: the emitter cycles spawn slots across the
+    // live mini orbs, so its gap must match the particle layer's emission gap.
+    const streams = new ParticlesAnimation({
+        rate,
+        lifeMs: 1200,
+        size: 0.12,
+        speed: 0.05,
+        colors: ["#ffffff", "#a5f3fc", "#818cf8"],
+        texture: particles.texture ?? shineTexture(),
+        emitter: orb.satelliteEmitter(1000 / rate),
+        outroMs: orb.outroEmitMs,
+        seed: 5,
+        backend: options.backend,
+        ...particles,
+        label: options.label ?? particles.label,
+        fadeLabel: options.fadeLabel ?? particles.fadeLabel,
+    });
+    return progressSpinner(new CompositeAnimation([orb, streams]), options);
+}

package/dist/prefabs/crystal-comet.d.ts

@@ -0,0 +1,4 @@
+import type { IndeterminateSpinnerOptions } from "../index.js";
+import type { MotionPrefabOptions } from "./types.js";
+/** A spinning crystal primitive with a luminous comet trail. */
+export declare function crystalComet(options?: MotionPrefabOptions): IndeterminateSpinnerOptions;

package/dist/prefabs/crystal-comet.js

@@ -0,0 +1,41 @@
+import { CompositeAnimation } from "../composite-animation.js";
+import { ObjectMotionAnimation } from "../animations/object-motion.js";
+import { ParticlesAnimation } from "../animations/particles.js";
+import { shineTexture, tetrahedron } from "../engines/little-3d-engine/little-3d-engine.js";
+import { figureEightMotion } from "../motion/figure-eight.js";
+import { spinner } from "./spinner.js";
+/** A spinning crystal primitive with a luminous comet trail. */
+export function crystalComet(options = {}) {
+    const motion = options.object?.motion ?? figureEightMotion({ size: 0.66, periodMs: 7200 });
+    const particles = options.particles ?? {};
+    // The object defines the primary direction; the particles trail its actual position through
+    // the intro/outro fly transitions (not the bare path), so the two layers stay in sync.
+    const object = new ObjectMotionAnimation({
+        mesh: () => tetrahedron(1, ["#f0f9ff", "#7dd3fc", "#818cf8", "#e879f9"]),
+        motion,
+        size: 0.42,
+        rotation: { spinX: 0.002, spinY: 0.003 },
+        backend: options.backend,
+        ...options.object,
+        label: options.object?.label,
+    });
+    const animation = new CompositeAnimation([
+        new ParticlesAnimation({
+            rate: 44,
+            lifeMs: 2300,
+            size: 0.25,
+            speed: 0.08,
+            colors: ["#ffffff", "#bae6fd", "#818cf8"],
+            texture: particles.texture ?? shineTexture(),
+            emitter: object.trailEmitter(),
+            outroMs: object.outroDurationMs,
+            seed: 28,
+            backend: options.backend,
+            ...particles,
+            label: options.label ?? particles.label ?? "Polishing pixels",
+            fadeLabel: options.fadeLabel ?? particles.fadeLabel,
+        }),
+        object,
+    ]);
+    return spinner(animation, options);
+}

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

@@ -0,0 +1,9 @@
+import type { ProgressSpinnerOptions } from "../index.js";
+import type { MotionProgressPrefabOptions } from "./types.js";
+/**
+ * A progress story: a translucent train of ice cubes pulls in and runs laps
+ * around a tilted square track, shedding a trail of pale stars while progress
+ * climbs; at 100% the whole convoy flies off along the track, cars following
+ * the lead one by one, and the star trail drains behind them.
+ */
+export declare function ghostTrain(options?: MotionProgressPrefabOptions): ProgressSpinnerOptions;

package/dist/prefabs/ghost-train.js

@@ -0,0 +1,44 @@
+import { CompositeAnimation } from "../composite-animation.js";
+import { ObjectMotionAnimation } from "../animations/object-motion.js";
+import { ParticlesAnimation } from "../animations/particles.js";
+import { cube, starTexture } from "../engines/little-3d-engine/little-3d-engine.js";
+import { squareMotion } from "../motion/square.js";
+import { progressSpinner } from "./spinner.js";
+/**
+ * A progress story: a translucent train of ice cubes pulls in and runs laps
+ * around a tilted square track, shedding a trail of pale stars while progress
+ * climbs; at 100% the whole convoy flies off along the track, cars following
+ * the lead one by one, and the star trail drains behind them.
+ */
+export function ghostTrain(options = {}) {
+    const motion = options.object?.motion ?? squareMotion({ size: 1.7, periodMs: 6800, tilt: 0.5 });
+    const particles = options.particles ?? {};
+    // The object defines the primary direction; the particles trail its actual position through
+    // the intro/outro fly transitions (not the bare path), so the two layers stay in sync.
+    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 trail = new ParticlesAnimation({
+        rate: 30,
+        lifeMs: 1700,
+        size: 0.13,
+        speed: 0.07,
+        colors: ["#e0f2fe", "#a5f3fc", "#c4b5fd"],
+        texture: particles.texture ?? starTexture(),
+        emitter: object.trailEmitter(),
+        outroMs: object.outroDurationMs,
+        seed: 17,
+        backend: options.backend,
+        ...particles,
+        label: options.label ?? particles.label,
+        fadeLabel: options.fadeLabel ?? particles.fadeLabel,
+    });
+    return progressSpinner(new CompositeAnimation([trail, object]), options);
+}

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

@@ -0,0 +1,13 @@
+import { type GridAssemblyOptions } from "../animations/grid-assembly.js";
+import type { ProgressSpinnerOptions } from "../index.js";
+import type { ProgressPrefabOptions } from "./types.js";
+export interface GridAssemblyPrefabOptions extends ProgressPrefabOptions {
+    /** Overrides for the assembly animation. */
+    assembly?: GridAssemblyOptions;
+}
+/**
+ * A progress story: 25 shapes fly in and circle the view edge, dock one by one
+ * into a 5x5 grid as progress climbs, hold the finished grid for a moment at
+ * 100%, then dive into the center and vanish with a small pop.
+ */
+export declare function gridAssembly(options?: GridAssemblyPrefabOptions): ProgressSpinnerOptions;

package/dist/prefabs/grid-assembly.js

@@ -0,0 +1,15 @@
+import { GridAssemblyAnimation, } from "../animations/grid-assembly.js";
+import { progressSpinner } from "./spinner.js";
+/**
+ * A progress story: 25 shapes fly in and circle the view edge, dock one by one
+ * into a 5x5 grid as progress climbs, hold the finished grid for a moment at
+ * 100%, then dive into the center and vanish with a small pop.
+ */
+export function gridAssembly(options = {}) {
+    return progressSpinner(new GridAssemblyAnimation({
+        backend: options.backend,
+        label: options.label,
+        fadeLabel: options.fadeLabel,
+        ...options.assembly,
+    }), options);
+}

package/dist/prefabs/monochrome-streak.d.ts

@@ -0,0 +1,4 @@
+import type { IndeterminateSpinnerOptions } from "../index.js";
+import type { ParticlePrefabOptions } from "./types.js";
+/** A fountain of black and white streaks that turn with their travel direction. */
+export declare function monochromeStreak(options?: ParticlePrefabOptions): IndeterminateSpinnerOptions;

package/dist/prefabs/monochrome-streak.js

@@ -0,0 +1,25 @@
+import { ParticlesAnimation } from "../animations/particles.js";
+import { streakTexture } from "../engines/little-3d-engine/little-3d-engine.js";
+import { spinner } from "./spinner.js";
+/** A fountain of black and white streaks that turn with their travel direction. */
+export function monochromeStreak(options = {}) {
+    const particles = options.particles ?? {};
+    return spinner(new ParticlesAnimation({
+        rate: 70,
+        lifeMs: 2800,
+        size: 0.38,
+        speed: 1.35,
+        direction: { x: 0, y: 1, z: 0 },
+        spread: 0.62,
+        gravity: { x: 0, y: -1.45, z: 0 },
+        colors: ["#fff", "#000"],
+        texture: particles.texture ?? streakTexture(),
+        spin: 0,
+        alignToMotion: true,
+        seed: 37,
+        backend: options.backend,
+        ...particles,
+        label: options.label ?? particles.label ?? "Loading...",
+        fadeLabel: options.fadeLabel ?? particles.fadeLabel,
+    }), options);
+}

package/dist/prefabs/plane-star-trail.d.ts

@@ -0,0 +1,4 @@
+import type { IndeterminateSpinnerOptions } from "../index.js";
+import type { MotionPrefabOptions } from "./types.js";
+/** A small plane looping through a stream of colorful star particles. */
+export declare function planeStarTrail(options?: MotionPrefabOptions): IndeterminateSpinnerOptions;

package/dist/prefabs/plane-star-trail.js

@@ -0,0 +1,40 @@
+import { CompositeAnimation } from "../composite-animation.js";
+import { ObjectMotionAnimation } from "../animations/object-motion.js";
+import { ParticlesAnimation } from "../animations/particles.js";
+import { planeMesh, starTexture } from "../engines/little-3d-engine/little-3d-engine.js";
+import { figureEightMotion } from "../motion/figure-eight.js";
+import { spinner } from "./spinner.js";
+/** A small plane looping through a stream of colorful star particles. */
+export function planeStarTrail(options = {}) {
+    const motion = options.object?.motion ?? figureEightMotion({ size: 0.72, periodMs: 6200 });
+    const particles = options.particles ?? {};
+    // The object defines the primary direction; the particles trail its actual position through
+    // the intro/outro fly transitions (not the bare path), so the two layers stay in sync.
+    const object = new ObjectMotionAnimation({
+        mesh: planeMesh,
+        motion,
+        size: 0.48,
+        backend: options.backend,
+        ...options.object,
+        label: options.object?.label,
+    });
+    const animation = new CompositeAnimation([
+        new ParticlesAnimation({
+            rate: 34,
+            lifeMs: 1900,
+            size: 0.16,
+            speed: 0.11,
+            colors: ["#fde047", "#f472b6", "#7dd3fc"],
+            texture: particles.texture ?? starTexture(),
+            emitter: object.trailEmitter(),
+            outroMs: object.outroDurationMs,
+            seed: 11,
+            backend: options.backend,
+            ...particles,
+            label: options.label ?? particles.label ?? "Flying in...",
+            fadeLabel: options.fadeLabel ?? particles.fadeLabel,
+        }),
+        object,
+    ]);
+    return spinner(animation, options);
+}

package/dist/prefabs/prefabs.d.ts

@@ -0,0 +1,10 @@
+export type { MotionPrefabOptions, MotionProgressPrefabOptions, ParticlePrefabOptions, PrefabOptions, ProgressPrefabOptions, } from "./types.js";
+export { chargedOrb, type ChargedOrbPrefabOptions } from "./charged-orb.js";
+export { crystalComet } from "./crystal-comet.js";
+export { ghostTrain } from "./ghost-train.js";
+export { gridAssembly, type GridAssemblyPrefabOptions } from "./grid-assembly.js";
+export { monochromeStreak } from "./monochrome-streak.js";
+export { planeStarTrail } from "./plane-star-trail.js";
+export { pulsingStarfield } from "./pulsing-starfield.js";
+export { rocketLaunch } from "./rocket-launch.js";
+export { starSwarm } from "./star-swarm.js";

package/dist/prefabs/prefabs.js

@@ -0,0 +1,9 @@
+export { chargedOrb } from "./charged-orb.js";
+export { crystalComet } from "./crystal-comet.js";
+export { ghostTrain } from "./ghost-train.js";
+export { gridAssembly } from "./grid-assembly.js";
+export { monochromeStreak } from "./monochrome-streak.js";
+export { planeStarTrail } from "./plane-star-trail.js";
+export { pulsingStarfield } from "./pulsing-starfield.js";
+export { rocketLaunch } from "./rocket-launch.js";
+export { starSwarm } from "./star-swarm.js";

package/dist/prefabs/pulsing-starfield.d.ts

@@ -0,0 +1,4 @@
+import type { IndeterminateSpinnerOptions } from "../index.js";
+import type { ParticlePrefabOptions } from "./types.js";
+/** High-shine particles drifting around a slowly pulsing HTML message. */
+export declare function pulsingStarfield(options?: ParticlePrefabOptions): IndeterminateSpinnerOptions;

package/dist/prefabs/pulsing-starfield.js

@@ -0,0 +1,27 @@
+import { ParticlesAnimation } from "../animations/particles.js";
+import { shineTexture } from "../engines/little-3d-engine/little-3d-engine.js";
+import { spinner } from "./spinner.js";
+function pulsingLabel() {
+    const label = document.createElement("div");
+    label.innerHTML = `<style>
+    @keyframes spinner-prefab-pulse { 0%,100% { color:#fff; transform:scale(1); } 50% { color:#93c5fd; transform:scale(1.06); } }
+  </style><div style="animation:spinner-prefab-pulse 2.4s ease-in-out infinite;font-size:2rem">Loading the good stuff</div>`;
+    return label;
+}
+/** High-shine particles drifting around a slowly pulsing HTML message. */
+export function pulsingStarfield(options = {}) {
+    const particles = options.particles ?? {};
+    return spinner(new ParticlesAnimation({
+        rate: 48,
+        lifeMs: 4200,
+        size: 0.3,
+        speed: 0.34,
+        colors: ["#ffffff", "#dbeafe", "#93c5fd", "#c4b5fd"],
+        texture: particles.texture ?? shineTexture(),
+        seed: 71,
+        backend: options.backend,
+        ...particles,
+        label: options.label ?? particles.label ?? pulsingLabel(),
+        fadeLabel: options.fadeLabel ?? particles.fadeLabel,
+    }), options);
+}

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

@@ -0,0 +1,8 @@
+import type { ProgressSpinnerOptions } from "../index.js";
+import type { MotionProgressPrefabOptions } from "./types.js";
+/**
+ * A progress story: a silver rocket glides in and patrols a slow loop on a
+ * column of embers while progress climbs; at 100% it pitches up and blasts off
+ * the top of the view, exhaust trailing behind it.
+ */
+export declare function rocketLaunch(options?: MotionProgressPrefabOptions): ProgressSpinnerOptions;

package/dist/prefabs/rocket-launch.js

@@ -0,0 +1,59 @@
+import { CompositeAnimation } from "../composite-animation.js";
+import { ObjectMotionAnimation } from "../animations/object-motion.js";
+import { ParticlesAnimation } from "../animations/particles.js";
+import { pyramid, shineTexture } from "../engines/little-3d-engine/little-3d-engine.js";
+import { easeInCubic } from "../engines/little-tween-engine/core/tweens.js";
+import { circleMotion } from "../motion/circle.js";
+import { progressSpinner } from "./spinner.js";
+// C1 launch: the handoff velocity coasts to a stop while the vertical climb
+// accelerates, so the nose rotates smoothly from the patrol tangent to straight up.
+const 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,
+        },
+    };
+};
+/**
+ * A progress story: a silver rocket glides in and patrols a slow loop on a
+ * column of embers while progress climbs; at 100% it pitches up and blasts off
+ * the top of the view, exhaust trailing behind it.
+ */
+export function rocketLaunch(options = {}) {
+    const motion = options.object?.motion
+        ?? circleMotion({ radius: 0.55, periodMs: 7000, 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);
+}

package/dist/prefabs/spinner.d.ts

@@ -0,0 +1,7 @@
+import type { CompositeAnimation } from "../composite-animation.js";
+import type { ParticlesAnimation } from "../animations/particles.js";
+import type { SpinnerAnimation } from "../animation.js";
+import type { IndeterminateSpinnerOptions, ProgressSpinnerOptions } from "../index.js";
+import type { PrefabOptions, ProgressPrefabOptions } from "./types.js";
+export declare function spinner(animation: CompositeAnimation | ParticlesAnimation, options: PrefabOptions): IndeterminateSpinnerOptions;
+export declare function progressSpinner(animation: SpinnerAnimation, options: ProgressPrefabOptions): ProgressSpinnerOptions;

package/dist/prefabs/spinner.js

@@ -0,0 +1,17 @@
+export function spinner(animation, options) {
+    return {
+        type: "indeterminate",
+        animation,
+        loop: options.loop,
+        periodMs: options.periodMs,
+    };
+}
+export function progressSpinner(animation, options) {
+    return {
+        type: "progress",
+        animation,
+        progress: options.progress ?? 0.001,
+        timeout: options.timeout,
+        until: options.until,
+    };
+}

package/dist/prefabs/star-swarm.d.ts

@@ -0,0 +1,4 @@
+import type { IndeterminateSpinnerOptions } from "../index.js";
+import type { ParticlePrefabOptions } from "./types.js";
+/** Bright star particles wandering around a centered loading message. */
+export declare function starSwarm(options?: ParticlePrefabOptions): IndeterminateSpinnerOptions;

package/dist/prefabs/star-swarm.js

@@ -0,0 +1,27 @@
+import { ParticlesAnimation } from "../animations/particles.js";
+import { starTexture } from "../engines/little-3d-engine/little-3d-engine.js";
+import { wanderMotion } from "../motion/wander.js";
+import { spinner } from "./spinner.js";
+/** Bright star particles wandering around a centered loading message. */
+export function starSwarm(options = {}) {
+    const particles = options.particles ?? {};
+    const emitter = particles.emitter ?? wanderMotion({
+        bounds: { x: 1.1, y: 0.72, z: 0.35 },
+        periodMs: 7200,
+        seed: 19,
+    });
+    return spinner(new ParticlesAnimation({
+        rate: 38,
+        lifeMs: 2600,
+        size: 0.15,
+        speed: 0.17,
+        colors: ["#fef08a", "#f9a8d4", "#a5f3fc"],
+        texture: particles.texture ?? starTexture(),
+        emitter,
+        seed: 91,
+        backend: options.backend,
+        ...particles,
+        label: options.label ?? particles.label ?? "Loading...",
+        fadeLabel: options.fadeLabel ?? particles.fadeLabel,
+    }), options);
+}