@spatialwalk/avatarkit 1.0.0-beta.57 → 1.0.0-beta.58

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.0-beta.58] - 2026-01-12
+
+### ✨ New Features
+- **Transition Duration Control API** - Added `setTransitionDuration(isStart: boolean, durationMs: number)` method to `AvatarView` to configure transition animation durations:
+  - `isStart: true` configures the start transition duration (Idle -> Speaking), default 400ms
+  - `isStart: false` configures the end transition duration (Speaking -> Idle), default 1600ms
+  - Allows external applications to customize transition animation timing
+
 ## [1.0.0-beta.57] - 2026-01-09
 
 ### 🐛 Bugfixes

package/dist/{StreamingAudioPlayer-Co3xec_k.js → StreamingAudioPlayer-Cka1VDtX.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { A as APP_CONFIG, e as errorToMessage, l as logEvent, a as logger } from "./index-cfYSlUmQ.js";
+import { A as APP_CONFIG, e as errorToMessage, l as logEvent, a as logger } from "./index-wQJM-Vug.js";
 class StreamingAudioPlayer {
   constructor(options) {
     __publicField(this, "audioContext", null);

package/dist/core/AvatarView.d.ts

@@ -1,4 +1,3 @@
-import { Flame } from '../generated/driveningress/v1/driveningress';
 import { Avatar } from './Avatar';
 import { AvatarController } from './AvatarController';
 export declare class AvatarView {
@@ -22,7 +21,8 @@ export declare class AvatarView {
     private currentFPS;
     private transitionKeyframes;
     private transitionStartTime;
-    private readonly transitionDurationMs;
+    private startTransitionDurationMs;
+    private endTransitionDurationMs;
     private cachedIdleFirstFrame;
     private idleCurrentFrameIndex;
     private characterHandle;
@@ -57,7 +57,7 @@ export declare class AvatarView {
     private startRealtimeRendering;
     private stopRealtimeRendering;
     dispose(): void;
-    renderFlame(flame: Flame): Promise<void>;
+    setTransitionDuration(isStart: boolean, durationMs: number): void;
     private rerenderCurrentFrameWithNewCamera;
     private handleResize;
     get transform(): {

package/dist/{index-cfYSlUmQ.js → index-wQJM-Vug.js}

@@ -7639,7 +7639,7 @@ const _AnimationPlayer = class _AnimationPlayer {
     if (this.streamingPlayer) {
       return;
     }
-    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-Co3xec_k.js");
+    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-Cka1VDtX.js");
     const { AvatarSDK: AvatarSDK2 } = await Promise.resolve().then(() => AvatarSDK$1);
     const audioFormat = AvatarSDK2.getAudioFormat();
     this.streamingPlayer = new StreamingAudioPlayer({
@@ -9062,7 +9062,7 @@ class AvatarSDK {
 }
 __publicField(AvatarSDK, "_isInitialized", false);
 __publicField(AvatarSDK, "_configuration", null);
-__publicField(AvatarSDK, "_version", "1.0.0-beta.57");
+__publicField(AvatarSDK, "_version", "1.0.0-beta.58");
 __publicField(AvatarSDK, "_avatarCore", null);
 __publicField(AvatarSDK, "_dynamicSdkConfig", null);
 const AvatarSDK$1 = Object.freeze(Object.defineProperty({
@@ -13936,31 +13936,82 @@ function lerpArrays(from, to2, progress) {
   }
   return result2;
 }
-function linearLerp(from, to2, progress) {
-  const easedProgress = 0.5 - Math.cos(progress * Math.PI) * 0.5;
+const clamp01 = (x2) => Math.max(0, Math.min(1, x2));
+function createBezierEasing(x1, y1, x2, y2) {
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  const sampleCurveX = (t2) => ((ax * t2 + bx) * t2 + cx) * t2;
+  const sampleCurveY = (t2) => ((ay * t2 + by) * t2 + cy) * t2;
+  const sampleCurveDerivativeX = (t2) => (3 * ax * t2 + 2 * bx) * t2 + cx;
+  const solveCurveX = (x3) => {
+    let t2 = x3;
+    for (let i2 = 0; i2 < 8; i2++) {
+      const error = sampleCurveX(t2) - x3;
+      if (Math.abs(error) < 1e-6) break;
+      const d2 = sampleCurveDerivativeX(t2);
+      if (Math.abs(d2) < 1e-6) break;
+      t2 -= error / d2;
+    }
+    return t2;
+  };
+  return (x3) => {
+    if (x3 <= 0) return 0;
+    if (x3 >= 1) return 1;
+    return sampleCurveY(solveCurveX(x3));
+  };
+}
+const BEZIER_CURVES = {
+  jaw: createBezierEasing(0.2, 0.8, 0.3, 1),
+  expression: createBezierEasing(0.4, 0, 0.2, 1),
+  eye: createBezierEasing(0.3, 0, 0.1, 1),
+  neck: createBezierEasing(0.1, 0.2, 0.2, 1),
+  global: createBezierEasing(0.42, 0, 0.58, 1)
+};
+const TIME_SCALE = {
+  jaw: 2.5,
+  expression: 1.6,
+  eye: 1.3,
+  neck: 1,
+  global: 1
+};
+function bezierLerp(from, to2, progress) {
+  const getT = (key) => {
+    const scaledProgress = clamp01(progress * TIME_SCALE[key]);
+    return BEZIER_CURVES[key](scaledProgress);
+  };
   return {
-    translation: lerpArrays(from.translation || [0, 0, 0], to2.translation || [0, 0, 0], easedProgress),
-    rotation: lerpArrays(from.rotation || [0, 0, 0], to2.rotation || [0, 0, 0], easedProgress),
-    neckPose: lerpArrays(from.neckPose || [0, 0, 0], to2.neckPose || [0, 0, 0], easedProgress),
-    jawPose: lerpArrays(from.jawPose || [0, 0, 0], to2.jawPose || [0, 0, 0], easedProgress),
-    eyePose: lerpArrays(from.eyePose || [0, 0, 0, 0, 0, 0], to2.eyePose || [0, 0, 0, 0, 0, 0], easedProgress),
+    translation: lerpArrays(from.translation || [0, 0, 0], to2.translation || [0, 0, 0], getT("global")),
+    rotation: lerpArrays(from.rotation || [0, 0, 0], to2.rotation || [0, 0, 0], getT("global")),
+    neckPose: lerpArrays(from.neckPose || [0, 0, 0], to2.neckPose || [0, 0, 0], getT("neck")),
+    jawPose: lerpArrays(from.jawPose || [0, 0, 0], to2.jawPose || [0, 0, 0], getT("jaw")),
+    eyePose: lerpArrays(from.eyePose || [0, 0, 0, 0, 0, 0], to2.eyePose || [0, 0, 0, 0, 0, 0], getT("eye")),
     eyeLid: (() => {
       const fromEyelid = from.eyeLid;
       const toEyelid = to2.eyeLid;
-      if (fromEyelid && fromEyelid.length > 0 && toEyelid && toEyelid.length > 0)
-        return lerpArrays(fromEyelid, toEyelid, easedProgress);
+      if ((fromEyelid == null ? void 0 : fromEyelid.length) && (toEyelid == null ? void 0 : toEyelid.length))
+        return lerpArrays(fromEyelid, toEyelid, getT("eye"));
       return fromEyelid || toEyelid || [];
     })(),
-    expression: lerpArrays(from.expression || [], to2.expression || [], easedProgress)
+    expression: lerpArrays(from.expression || [], to2.expression || [], getT("expression"))
   };
 }
 function generateTransitionFrames(from, to2, durationMs, fps = 25) {
   const steps = Math.max(1, Math.floor(durationMs / 1e3 * fps));
   const frames = Array.from({ length: steps });
+  if (steps === 1) {
+    frames[0] = to2;
+    return frames;
+  }
   for (let i2 = 0; i2 < steps; i2++) {
     const progress = i2 / (steps - 1);
-    frames[i2] = linearLerp(from, to2, progress);
+    frames[i2] = bezierLerp(from, to2, progress);
   }
+  frames[0] = from;
+  frames[frames.length - 1] = to2;
   return frames;
 }
 class AvatarView {
@@ -13985,7 +14036,8 @@ class AvatarView {
     __publicField(this, "currentFPS", 0);
     __publicField(this, "transitionKeyframes", []);
     __publicField(this, "transitionStartTime", 0);
-    __publicField(this, "transitionDurationMs", 400);
+    __publicField(this, "startTransitionDurationMs", 400);
+    __publicField(this, "endTransitionDurationMs", 1600);
     __publicField(this, "cachedIdleFirstFrame", null);
     __publicField(this, "idleCurrentFrameIndex", 0);
     __publicField(this, "characterHandle", null);
@@ -14039,12 +14091,12 @@ class AvatarView {
     toFixed.expression = ensureLen(toFixed.expression, exprLen);
     return { from: fromFixed, to: toFixed };
   }
-  generateAndAlignTransitionFrames(from, to2) {
+  generateAndAlignTransitionFrames(from, to2, durationMs) {
     const aligned = this.alignFlamePair(from, to2);
     let keyframes = generateTransitionFrames(
       aligned.from,
       aligned.to,
-      this.transitionDurationMs,
+      durationMs,
       APP_CONFIG.animation.fps
     );
     if (keyframes.length < 2) {
@@ -14394,7 +14446,8 @@ class AvatarView {
             return;
           }
           const elapsed = performance.now() - this.transitionStartTime;
-          const progress = Math.min(1, Math.max(0, elapsed / this.transitionDurationMs));
+          const currentTransitionDurationMs = state === "transitioningToSpeaking" ? this.startTransitionDurationMs : this.endTransitionDurationMs;
+          const progress = Math.min(1, Math.max(0, elapsed / currentTransitionDurationMs));
           const steps = this.transitionKeyframes.length;
           const idx = Math.min(steps - 1, Math.floor(progress * (steps - 1)));
           const currentFrame = this.transitionKeyframes[idx];
@@ -14420,7 +14473,7 @@ class AvatarView {
               return;
             }
           }
-          if (state === "transitioningToSpeaking" && this.transitionStartTime > 0 && this.transitionKeyframes.length > 0 && elapsed >= this.transitionDurationMs + 100) {
+          if (state === "transitioningToSpeaking" && this.transitionStartTime > 0 && this.transitionKeyframes.length > 0 && elapsed >= this.startTransitionDurationMs + 100) {
             this.setState("speaking");
             this.transitionKeyframes = [];
             this.avatarController.onTransitionComplete();
@@ -14550,7 +14603,7 @@ class AvatarView {
         await this.getCachedIdleFirstFrame();
         const firstSpeaking = keyframes[0];
         const firstSpeakingWithPostProcessing = this.avatarController.applyPostProcessingToFlame(firstSpeaking);
-        this.transitionKeyframes = this.generateAndAlignTransitionFrames(idleFrameProto, firstSpeakingWithPostProcessing);
+        this.transitionKeyframes = this.generateAndAlignTransitionFrames(idleFrameProto, firstSpeakingWithPostProcessing, this.startTransitionDurationMs);
         this.transitionStartTime = performance.now();
         if (this.transitionKeyframes.length === 0) {
           this.setState("speaking");
@@ -14603,7 +14656,7 @@ class AvatarView {
           const lastSpeaking = this.avatarController.applyPostProcessingToFlame(lastSpeakingRaw);
           const idleFirstProto = await this.getCachedIdleFirstFrame();
           if (idleFirstProto) {
-            this.transitionKeyframes = this.generateAndAlignTransitionFrames(lastSpeaking, idleFirstProto);
+            this.transitionKeyframes = this.generateAndAlignTransitionFrames(lastSpeaking, idleFirstProto, this.endTransitionDurationMs);
             this.transitionStartTime = performance.now();
             if (this.transitionKeyframes.length > 0 && this.renderingState === "transitioningToIdle") {
               if (APP_CONFIG.debug)
@@ -14667,6 +14720,22 @@ class AvatarView {
     if (APP_CONFIG.debug)
       logger.log("[AvatarView] Avatar view disposed successfully");
   }
+  setTransitionDuration(isStart, durationMs) {
+    if (durationMs <= 0) {
+      throw new Error("Transition duration must be a positive number");
+    }
+    if (isStart) {
+      this.startTransitionDurationMs = durationMs;
+      if (APP_CONFIG.debug) {
+        logger.log("[AvatarView] Start transition duration updated:", durationMs);
+      }
+    } else {
+      this.endTransitionDurationMs = durationMs;
+      if (APP_CONFIG.debug) {
+        logger.log("[AvatarView] End transition duration updated:", durationMs);
+      }
+    }
+  }
   getCameraConfig() {
     return this.cameraConfig;
   }
@@ -14683,30 +14752,6 @@ class AvatarView {
       }
     }
   }
-  async renderFlame(flame) {
-    if (!this.isInitialized || !this.renderSystem) {
-      throw new Error("AvatarView not initialized");
-    }
-    try {
-      const processedFlame = this.avatarController.applyPostProcessingToFlame(flame);
-      const wasmParams = convertProtoFlameToWasmParams(processedFlame);
-      const avatarCore = AvatarSDK.getAvatarCore();
-      if (!avatarCore) {
-        throw new Error("AvatarCore not available");
-      }
-      const splatData = await avatarCore.computeFrameFlatFromParams(
-        wasmParams,
-        this.characterHandle ?? void 0
-      );
-      if (splatData) {
-        this.renderSystem.loadSplatsFromPackedData(splatData);
-        this.renderSystem.renderFrame();
-      }
-    } catch (error) {
-      logger.error("[AvatarView] Failed to render flame:", error instanceof Error ? error.message : String(error));
-      throw error;
-    }
-  }
   async rerenderCurrentFrameWithNewCamera() {
     if (this.avatarController.state !== AvatarState.paused || this.renderingState !== "speaking" || !this.renderSystem) {
       return;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { b, c, f, d, j, g, C, i, D, E, k, h, L, R, S, m } from "./index-cfYSlUmQ.js";
+import { b, c, f, d, j, g, C, i, D, E, k, h, L, R, S, m } from "./index-wQJM-Vug.js";
 export {
   b as Avatar,
   c as AvatarController,

package/dist/utils/animation-interpolation.d.ts

@@ -1,4 +1,12 @@
 import { Flame } from '../generated/driveningress/v1/driveningress';
+export interface TransitionConfig {
+    duration: number;
+    delay: number;
+    easing: (t: number) => number;
+}
+export declare const TRANSITION_LAYERS: Record<string, TransitionConfig>;
+
+export declare function bezierLerp(from: Flame, to: Flame, progress: number): Flame;
 
 export declare function linearLerp(from: Flame, to: Flame, progress: number): Flame;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spatialwalk/avatarkit",
   "type": "module",
-  "version": "1.0.0-beta.57",
+  "version": "1.0.0-beta.58",
   "packageManager": "pnpm@10.18.2",
   "description": "SPAvatar SDK - 3D Gaussian Splatting Avatar Rendering SDK",
   "author": "SPAvatar Team",

package/dist/docs/render-flame-api-example.d.ts

@@ -1,28 +0,0 @@
-import { AvatarView, Flame } from '@spatialwalk/avatarkit';
-declare function initializeSDK(): Promise<void>;
-declare function createAvatarView(characterId: string, container: HTMLElement): Promise<AvatarView>;
-declare function fetchFlameDataFromServer(characterId: string, audioData: ArrayBuffer): Promise<Flame[]>;
-declare class FlameRenderer {
-    private avatarView;
-    private keyframes;
-    private currentFrameIndex;
-    private animationFrameId;
-    private isPlaying;
-    private fps;
-    private frameInterval;
-    private lastRenderTime;
-    constructor(avatarView: AvatarView);
-    setKeyframes(keyframes: Flame[]): void;
-    start(): void;
-    stop(): void;
-    renderFrame(frameIndex: number): Promise<void>;
-    private renderLoop;
-    setFPS(fps: number): void;
-    seek(frameIndex: number): void;
-    getCurrentFrameIndex(): number;
-    getTotalFrames(): number;
-}
-declare function main(): Promise<void>;
-declare function fetchAudioData(): Promise<ArrayBuffer>;
-
-export { initializeSDK, createAvatarView, fetchFlameDataFromServer, FlameRenderer, main, fetchAudioData };