3d-spinner 0.9.2 → 0.9.3

package/dist/cjs/animations/object-motion.cjs

@@ -797,6 +797,7 @@ function orderRenderItems(items, eye) {
   return opaque.concat(transparent);
 }
 async function createRenderer(backend, options = {}) {
+  if (typeof backend === "function") return backend(options);
   switch (backend) {
     case "webgl":
       return new (await Promise.resolve().then(() => (init_webgl(), webgl_exports))).WebGLRenderer(options);
@@ -825,6 +826,48 @@ __export(object_motion_exports, {
 });
 module.exports = __toCommonJS(object_motion_exports);
 
+// src/animation-label.ts
+var LABEL_STYLE = [
+  "position:absolute",
+  "inset:0",
+  "display:flex",
+  "align-items:center",
+  "justify-content:center",
+  "pointer-events:none",
+  "font:700 1.6rem/1 system-ui,sans-serif",
+  "letter-spacing:0.02em",
+  "color:rgba(255,255,255,0.9)",
+  "text-shadow:0 1px 10px rgba(0,0,0,0.6)",
+  "z-index:1"
+].join(";");
+function animationLabelOpacity(now, enterAt, introDurationMs, exitAt, outroDurationMs) {
+  if (enterAt === Infinity) return 0;
+  const intro = introDurationMs <= 0 ? 1 : Math.max(0, Math.min(1, (now - enterAt) / introDurationMs));
+  const outro = exitAt === Infinity ? 1 : outroDurationMs <= 0 ? 0 : Math.max(0, Math.min(1, 1 - (now - exitAt) / outroDurationMs));
+  return Math.min(intro, outro);
+}
+function mountAnimationLabel(target, content) {
+  var _a;
+  const container = document.createElement("div");
+  container.style.cssText = LABEL_STYLE;
+  container.setAttribute("role", "status");
+  if (typeof content === "string") container.textContent = content;
+  else if (content) {
+    (_a = content.style).pointerEvents || (_a.pointerEvents = "auto");
+    container.appendChild(content);
+  }
+  target.appendChild(container);
+  return {
+    container,
+    setText(value) {
+      if (typeof content !== "object") container.textContent = value;
+    },
+    setOpacity(value) {
+      container.style.opacity = String(value);
+    }
+  };
+}
+
 // src/engines/little-3d-engine/core/camera.ts
 init_math();
 var DEFAULTS = {
@@ -875,7 +918,7 @@ function transform(init) {
 init_renderer();
 init_light();
 
-// src/engines/little-3d-engine/shapes/icosphere.ts
+// src/engines/little-3d-engine/shapes/primitives/spheres/icosphere.ts
 init_geometry();
 var T = (1 + Math.sqrt(5)) / 2;
 var SEED_VERTICES = [
@@ -893,7 +936,7 @@ var SEED_VERTICES = [
   { x: -T, y: 0, z: 1 }
 ];
 
-// src/engines/little-3d-engine/shapes/octa-sphere.ts
+// src/engines/little-3d-engine/shapes/primitives/spheres/octa-sphere.ts
 init_geometry();
 
 // src/engines/little-3d-engine/little-3d-engine.ts
@@ -1048,32 +1091,49 @@ var Little3dEngine = class {
 init_math();
 
 // src/motion/transitions.ts
-function easeOutBack(delta) {
-  const c = 1.70158;
-  const u = delta - 1;
-  return 1 + (c + 1) * u * u * u + c * u * u;
+var DEFAULT_DISTANCE = 3.5;
+function add(a, b) {
+  return { x: a.x + b.x, y: a.y + b.y, z: a.z + b.z };
 }
-function grow() {
-  return (input) => ({ size: (input.size ?? 1) * easeOutBack(input.delta) });
+function scaleVector(v, factor) {
+  return { x: v.x * factor, y: v.y * factor, z: v.z * factor };
 }
-function shrink() {
-  return (input) => ({ size: (input.size ?? 1) * (1 - input.delta * input.delta) });
+function vectorLength(v) {
+  return Math.hypot(v.x, v.y, v.z);
+}
+function normalizeVector(v) {
+  const length = vectorLength(v);
+  if (length < 1e-6) return { x: 1, y: 0, z: 0 };
+  return scaleVector(v, 1 / length);
+}
+function resolveDirection(input, fallback) {
+  return normalizeVector(fallback ?? input.direction ?? input.velocity ?? { x: 1, y: 0, z: 0 });
+}
+function joinVelocity(input, options, durationMs) {
+  const inputSpeed = input.velocity ? vectorLength(input.velocity) : 0;
+  if (input.velocity && inputSpeed > 1e-6 && !options.direction) {
+    return input.velocity;
+  }
+  const distance = options.distance ?? DEFAULT_DISTANCE;
+  return scaleVector(resolveDirection(input, options.direction), distance / durationMs);
+}
+function enterFromObjectDirection(options = {}) {
+  return (input) => {
+    const durationMs = Math.max(1, input.durationMs);
+    const velocity = joinVelocity(input, options, durationMs);
+    const remaining = durationMs - input.elapsedMs;
+    return { position: add(input.position, scaleVector(velocity, -remaining)) };
+  };
+}
+function leaveInObjectDirection(options = {}) {
+  return (input) => {
+    const durationMs = Math.max(1, input.durationMs);
+    const velocity = joinVelocity(input, options, durationMs);
+    return { position: add(input.position, scaleVector(velocity, input.elapsedMs)) };
+  };
 }
 
 // src/animations/object-motion.ts
-var LABEL_STYLE = [
-  "position:absolute",
-  "inset:0",
-  "display:flex",
-  "align-items:center",
-  "justify-content:center",
-  "pointer-events:none",
-  "font:700 1.6rem/1 system-ui,sans-serif",
-  "letter-spacing:0.02em",
-  "color:rgba(255,255,255,0.9)",
-  "text-shadow:0 1px 10px rgba(0,0,0,0.6)",
-  "z-index:1"
-].join(";");
 var WORLD_UP = { x: 0, y: 1, z: 0 };
 var DEFAULT_INTRO_MS = 2100;
 var DEFAULT_OUTRO_MS = 2100;
@@ -1089,13 +1149,14 @@ var FACE_FORWARD = {
   "+y": (v) => ({ x: v.y, y: -v.x, z: v.z }),
   "-y": (v) => ({ x: -v.y, y: v.x, z: v.z })
 };
-function add(a, b) {
+function add2(a, b) {
   return { x: a.x + b.x, y: a.y + b.y, z: a.z + b.z };
 }
 function resolveMesh(mesh) {
   return typeof mesh === "function" ? mesh() : mesh;
 }
 function applyColor(mesh, color) {
+  if (color === void 0) return mesh;
   return { vertices: mesh.vertices, faces: mesh.faces.map((face) => ({ ...face, color })) };
 }
 function faceForward(mesh, facing) {
@@ -1138,7 +1199,7 @@ function orientationFor(forward, bank) {
   if (Math.hypot(right.x, right.y, right.z) < 1e-4) right = { x: 0, y: 0, z: 1 };
   right = normalize(right);
   const levelUp = cross(right, fwd);
-  const up = add(scale(levelUp, Math.cos(bank)), scale(right, Math.sin(bank)));
+  const up = add2(scale(levelUp, Math.cos(bank)), scale(right, Math.sin(bank)));
   const w = normalize(cross(fwd, up));
   return {
     x: Math.atan2(cross(w, fwd).z, w.z),
@@ -1175,7 +1236,7 @@ function clamp012(value) {
 function motionVectorAt(motion, t) {
   return scale(subtract(motion.positionAt(t + 1), motion.positionAt(t - 1)), 0.5);
 }
-function resolveDirection(velocity, fallback) {
+function resolveDirection2(velocity, fallback) {
   return Math.hypot(velocity.x, velocity.y, velocity.z) > 1e-6 ? normalize(velocity) : fallback;
 }
 function resolveTransition(config, fallback, durationMs) {
@@ -1197,15 +1258,16 @@ var ObjectMotionAnimation = class {
     this.outroDirection = { x: 1, y: 0, z: 0 };
     const centered = centerAndScaleMesh(resolveMesh(options.mesh), options.size ?? 1);
     const facing = faceForward(centered, options.facing ?? "+x");
-    this.mesh = applyColor(facing, options.color ?? "#cbd5e1");
+    this.mesh = applyColor(facing, options.color);
     this.motion = options.motion;
     this.backend = options.backend;
     this.transparency = options.transparency;
-    this.labelText = options.label;
+    this.labelContent = options.label;
+    this.fadeLabel = options.fadeLabel ?? true;
     this.tailCount = Math.max(0, Math.floor(options.tail?.count ?? 0));
     this.tailGap = Math.max(0, options.tail?.gapMs ?? 0);
-    this.intro = resolveTransition(options.intro, grow(), DEFAULT_INTRO_MS);
-    this.outro = resolveTransition(options.outro, shrink(), DEFAULT_OUTRO_MS);
+    this.intro = resolveTransition(options.intro, enterFromObjectDirection(), DEFAULT_INTRO_MS);
+    this.outro = resolveTransition(options.outro, leaveInObjectDirection(), DEFAULT_OUTRO_MS);
     const rotation = options.rotation;
     this.rotationOffset = { x: rotation?.x ?? 0, y: rotation?.y ?? 0, z: rotation?.z ?? 0 };
     this.rotationSpin = {
@@ -1216,7 +1278,7 @@ var ObjectMotionAnimation = class {
     this.hasExtraRotation = this.rotationOffset.x !== 0 || this.rotationOffset.y !== 0 || this.rotationOffset.z !== 0 || this.rotationSpin.x !== 0 || this.rotationSpin.y !== 0 || this.rotationSpin.z !== 0;
   }
   mount(target) {
-    target.style.position = "relative";
+    if (!target.style.position) target.style.position = "relative";
     const engine = new Little3dEngine({
       backend: this.backend,
       camera: { position: { x: 0, y: 0, z: 3 } }
@@ -1230,11 +1292,8 @@ var ObjectMotionAnimation = class {
     engine.mount(target).catch((error) => {
       target.textContent = error instanceof Error ? error.message : String(error);
     });
-    const label = document.createElement("div");
-    label.style.cssText = LABEL_STYLE;
-    label.setAttribute("role", "status");
-    target.appendChild(label);
-    this.label = label;
+    this.label = mountAnimationLabel(target, this.labelContent);
+    if (this.fadeLabel) this.label.setOpacity(0);
   }
   enter(now) {
     if (this.started) return;
@@ -1245,12 +1304,25 @@ var ObjectMotionAnimation = class {
     if (!this.started || this.outroStart !== Infinity) return;
     this.outroPosition = this.motion.positionAt(now);
     this.outroVelocity = motionVectorAt(this.motion, now);
-    this.outroDirection = resolveDirection(this.outroVelocity, this.headings[0]);
+    this.outroDirection = resolveDirection2(this.outroVelocity, this.headings[0]);
     this.outroStart = now;
   }
   isFinished() {
     return this.finished;
   }
+  /** Milliseconds the fly-out takes; used to align a following particle trail's outro. */
+  get outroDurationMs() {
+    return this.outro.durationMs;
+  }
+  /**
+   * A {@link MotionController} that follows the object's *actual* position, including
+   * the intro fly-in and outro fly-out (it falls back to the raw motion path before
+   * {@link enter} and once idle). Feed it to a particle layer's `emitter` so the
+   * particles trail the object through its transitions instead of the bare path.
+   */
+  trailEmitter() {
+    return { positionAt: (t) => this.sampleAt(t)?.position ?? this.motion.positionAt(t) };
+  }
   render(now, frame) {
     if (!this.engine || !this.label) return;
     if (this.outroStart !== Infinity && now >= this.outroStart + this.outro.durationMs + this.tailCount * this.tailGap) {
@@ -1293,11 +1365,20 @@ var ObjectMotionAnimation = class {
       transform2.rotation.y = euler.y;
       transform2.rotation.z = euler.z;
     }
-    this.label.textContent = frame.indeterminate ? this.labelText ?? "" : `${Math.round(frame.progress * 100)}%`;
+    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.started ? this.introStart : Infinity,
+        this.intro.durationMs,
+        this.outroStart,
+        this.outro.durationMs
+      ));
+    }
     this.engine.render();
   }
   destroy() {
-    this.label?.remove();
+    this.label?.container.remove();
     this.label = void 0;
     this.engine?.destroy();
     this.engine = void 0;
@@ -1330,7 +1411,7 @@ var ObjectMotionAnimation = class {
     const delta = transition.durationMs === 0 ? 1 : clamp012(elapsedMs / transition.durationMs);
     const input = this.transitionInput(phase, delta, elapsedMs, transition.durationMs, start);
     const output = transition.transition(input);
-    return this.applyTransitionOutput(input, output);
+    return this.applyTransitionOutput(input, output, phase, t);
   }
   transitionInput(phase, delta, elapsedMs, durationMs, start) {
     if (phase === "intro") {
@@ -1339,7 +1420,7 @@ var ObjectMotionAnimation = class {
       return {
         delta,
         position: this.motion.positionAt(handoff),
-        direction: resolveDirection(velocity, { x: 1, y: 0, z: 0 }),
+        direction: resolveDirection2(velocity, { x: 1, y: 0, z: 0 }),
         velocity,
         size: 1,
         durationMs,
@@ -1358,9 +1439,9 @@ var ObjectMotionAnimation = class {
       phase
     };
   }
-  applyTransitionOutput(input, output) {
+  applyTransitionOutput(input, output, phase, t) {
     return {
-      position: output.position ?? input.position,
+      position: output.position ?? (phase === "intro" ? this.motion.positionAt(t) : input.position),
       size: output.size ?? input.size ?? 1,
       orientation: output.orientation
     };