3d-spinner 0.9.3 → 0.9.4

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

@@ -1,2 +1,14 @@
-/** A white five-point star on a transparent square canvas. */
-export declare function starTexture(): HTMLCanvasElement;
+/** 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

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

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

@@ -1,9 +1,10 @@
 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.
+ * 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

@@ -1,44 +1,37 @@
 import { CompositeAnimation } from "../composite-animation.js";
-import { ObjectMotionAnimation } from "../animations/object-motion.js";
+import { GhostTrainAnimation } from "../animations/ghost-train.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 { starTexture } from "../engines/little-3d-engine/little-3d-engine.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.
+ * 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 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 },
+    const train = new GhostTrainAnimation({
+        motion: options.object?.motion,
         backend: options.backend,
-        ...options.object,
-        label: options.object?.label,
     });
+    // 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.13,
-        speed: 0.07,
+        size: 0.15,
+        speed: 0.11,
         colors: ["#e0f2fe", "#a5f3fc", "#c4b5fd"],
-        texture: particles.texture ?? starTexture(),
-        emitter: object.trailEmitter(),
-        outroMs: object.outroDurationMs,
+        texture: particles.texture ?? starTexture({ glow: 5 }),
+        emitter: train.trailEmitter(),
+        outroMs: train.outroDurationMs,
         seed: 17,
         backend: options.backend,
         ...particles,
         label: options.label ?? particles.label,
         fadeLabel: options.fadeLabel ?? particles.fadeLabel,
     });
-    return progressSpinner(new CompositeAnimation([trail, object]), options);
+    return progressSpinner(new CompositeAnimation([trail, train]), options);
 }

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

@@ -1,8 +1,10 @@
 import type { ProgressSpinnerOptions } from "../index.js";
-import type { MotionProgressPrefabOptions } from "./types.js";
+import type { ProgressPrefabOptions } 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.
+ * 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?: MotionProgressPrefabOptions): ProgressSpinnerOptions;
+export declare function rocketLaunch(options?: ProgressPrefabOptions): ProgressSpinnerOptions;

package/dist/prefabs/rocket-launch.js

@@ -1,59 +1,16 @@
-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 { RocketLaunchAnimation } from "../animations/rocket-launch.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.
+ * 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 = {}) {
-    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 },
+    return progressSpinner(new RocketLaunchAnimation({
         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);
+        label: options.label,
+        fadeLabel: options.fadeLabel,
+    }), options);
 }