3d-spinner 0.9.2 → 0.9.4

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,14 @@
+/** Options for {@link starTexture}. */
+export interface StarTextureOptions {
+    /**
+     * Radius of a soft glow drawn around the star, in canvas pixels. A blurred
+     * copy of the star is composited underneath the crisp one, so the glow takes
+     * the particle's tint. Default `0` (no glow).
+     */
+    glow?: number;
+}
+/**
+ * A white five-point star on a transparent square canvas. With `glow`, a
+ * blurred copy is composited beneath the crisp star for a soft halo.
+ */
+export declare function starTexture(options?: StarTextureOptions): HTMLCanvasElement;

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

@@ -0,0 +1,31 @@
+import { canvasTexture } from "./canvas-texture.js";
+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();
+}
+/**
+ * A white five-point star on a transparent square canvas. With `glow`, a
+ * blurred copy is composited beneath the crisp star for a soft halo.
+ */
+export function starTexture(options = {}) {
+    const glow = Math.max(0, options.glow ?? 0);
+    return canvasTexture((ctx) => {
+        if (glow > 0) {
+            ctx.save();
+            ctx.filter = `blur(${glow}px)`;
+            drawStar(ctx);
+            ctx.restore();
+        }
+        drawStar(ctx);
+    });
+}

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,10 @@
+import type { ProgressSpinnerOptions } from "../index.js";
+import type { MotionProgressPrefabOptions } from "./types.js";
+/**
+ * A progress story: a translucent train of ice cubes runs laps around a tilted
+ * square track, shedding a trail of pale stars. Every 2% of progress attaches
+ * one more car, popping it into existence at the tail; at 100% the whole convoy
+ * peels off the track one after another and accelerates away, clearing the view
+ * within four seconds as the star trail drains behind it.
+ */
+export declare function ghostTrain(options?: MotionProgressPrefabOptions): ProgressSpinnerOptions;

package/dist/prefabs/ghost-train.js

@@ -0,0 +1,37 @@
+import { CompositeAnimation } from "../composite-animation.js";
+import { GhostTrainAnimation } from "../animations/ghost-train.js";
+import { ParticlesAnimation } from "../animations/particles.js";
+import { starTexture } from "../engines/little-3d-engine/little-3d-engine.js";
+import { progressSpinner } from "./spinner.js";
+/**
+ * A progress story: a translucent train of ice cubes runs laps around a tilted
+ * square track, shedding a trail of pale stars. Every 2% of progress attaches
+ * one more car, popping it into existence at the tail; at 100% the whole convoy
+ * peels off the track one after another and accelerates away, clearing the view
+ * within four seconds as the star trail drains behind it.
+ */
+export function ghostTrain(options = {}) {
+    const particles = options.particles ?? {};
+    const train = new GhostTrainAnimation({
+        motion: options.object?.motion,
+        backend: options.backend,
+    });
+    // The lead car defines the primary direction; the stars trail its actual position
+    // through the laps and the accelerating blast-off, so the two layers stay in sync.
+    const trail = new ParticlesAnimation({
+        rate: 30,
+        lifeMs: 1700,
+        size: 0.15,
+        speed: 0.11,
+        colors: ["#e0f2fe", "#a5f3fc", "#c4b5fd"],
+        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, train]), 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,10 @@
+import type { ProgressSpinnerOptions } from "../index.js";
+import type { ProgressPrefabOptions } from "./types.js";
+/**
+ * A progress story on a launch pad: every 5% of progress a small rocket slides
+ * in cartoon-style from the right and lines up under the progress text, idling
+ * on 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.
+ */
+export declare function rocketLaunch(options?: ProgressPrefabOptions): ProgressSpinnerOptions;

package/dist/prefabs/rocket-launch.js

@@ -0,0 +1,16 @@
+import { RocketLaunchAnimation } from "../animations/rocket-launch.js";
+import { progressSpinner } from "./spinner.js";
+/**
+ * A progress story on a launch pad: every 5% of progress a small rocket slides
+ * in cartoon-style from the right and lines up under the progress text, idling
+ * on 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.
+ */
+export function rocketLaunch(options = {}) {
+    return progressSpinner(new RocketLaunchAnimation({
+        backend: options.backend,
+        label: options.label,
+        fadeLabel: options.fadeLabel,
+    }), 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);
+}

package/dist/prefabs/types.d.ts

@@ -0,0 +1,46 @@
+import type { AnimationLabel } from "../animation.js";
+import type { ObjectMotionOptions } from "../animations/object-motion.js";
+import type { ParticlesOptions } from "../animations/particles.js";
+import type { Backend } from "../engines/little-3d-engine/little-3d-engine.js";
+export interface PrefabOptions {
+    /** Rendering backend used by every layer. Default `"canvas2d"`. */
+    backend?: Backend;
+    /** Text or custom HTML shown over the prefab. */
+    label?: AnimationLabel;
+    /** Fade the label during intro and outro. Default `true`. */
+    fadeLabel?: boolean;
+    /** Indeterminate progress loop. Default `"bounce"`. */
+    loop?: "bounce" | "restart";
+    /** Milliseconds for one progress sweep. Default `2000`. */
+    periodMs?: number;
+}
+export interface ProgressPrefabOptions {
+    /** Rendering backend used by every layer. Default `"canvas2d"`. */
+    backend?: Backend;
+    /** Text or custom HTML shown over the prefab (progress mode shows a percentage). */
+    label?: AnimationLabel;
+    /** Fade the label with the story's beginning and end. Default `true`. */
+    fadeLabel?: boolean;
+    /** Initial progress 0..1. Defaults just above zero so the story begins on mount. */
+    progress?: number;
+    /** Auto-complete (drive progress to 1) after this many milliseconds. */
+    timeout?: number;
+    /** Auto-complete at this absolute time. If both are set, the earlier wins. */
+    until?: Date;
+}
+export interface MotionPrefabOptions extends PrefabOptions {
+    /** Overrides for the moving object layer, including `mesh` and `motion`. */
+    object?: Partial<ObjectMotionOptions>;
+    /** Overrides for the particle layer. */
+    particles?: ParticlesOptions;
+}
+export interface ParticlePrefabOptions extends PrefabOptions {
+    /** Overrides for the particle animation. */
+    particles?: ParticlesOptions;
+}
+export interface MotionProgressPrefabOptions extends ProgressPrefabOptions {
+    /** Overrides for the moving object layer, including `mesh` and `motion`. */
+    object?: Partial<ObjectMotionOptions>;
+    /** Overrides for the particle layer. */
+    particles?: ParticlesOptions;
+}

package/dist/prefabs/types.js

@@ -0,0 +1 @@
+export {};