@spatialwalk/avatarkit 1.0.0-beta.61 → 1.0.0-beta.63

package/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.0-beta.63] - 2026-01-14
+
+### ✨ New Features
+- **Audio Context Initialization API** - Added `initializeAudioContext()` method to `AvatarController`
+  - Must be called in a user gesture context (click, touchstart, etc.) before any audio operations
+  - Ensures AudioContext is created and initialized in a user gesture context, preventing browser security policy issues
+  - All audio operations (`send()`, `yieldAudioData()`, `start()`, `playback()`, etc.) now require prior initialization
+
+### 🔧 Improvements
+- **Initialization Flow** - Removed all lazy initialization logic for audio context
+  - Audio context initialization is now centralized in `initializeAudioContext()` method
+  - All audio operations check for initialization before proceeding
+  - Clear error messages when audio operations are attempted without initialization
+
+### 🐛 Bugfixes
+- **Audio Context User Gesture Requirement** - Fixed issue where AudioContext could not be properly initialized when external applications request recording permissions
+  - Audio context must now be initialized in user gesture context, ensuring browser security policies are satisfied
+
+## [1.0.0-beta.62] - 2026-01-14
+
+### ✨ New Features
+- **Bezier Curve Transition Animation** - Implemented Bezier curve easing functions for smoother transitions
+  - Added Bezier curve interpolation with different curves for different facial components (jaw, expression, eye, neck, global)
+  - Replaced linear interpolation with Bezier curve interpolation for more natural animation
+  - Split transition duration into start (200ms) and end (1600ms) for different transition types
+
+### 🔧 Improvements
+- **Transition API Enhancement** - Updated `generateTransitionFromIdle()` to support both start and end transitions
+  - Added `transitionType` parameter: `'start'` for Idle -> Flame, `'end'` for Flame -> Idle
+  - Removed deprecated linear interpolation code and unused easing functions
+
 ## [1.0.0-beta.61] - 2026-01-14
 
 ### 🔧 Improvements

package/README.md

@@ -20,6 +20,10 @@ npm install @spatialwalk/avatarkit
 
 ## 🎯 Quick Start
 
+### ⚠️ Important: Audio Context Initialization
+
+**Before using any audio-related features, you MUST initialize the audio context in a user gesture context** (e.g., `click`, `touchstart` event handlers). This is required by browser security policies. Calling `initializeAudioContext()` outside a user gesture will fail.
+
 ### Basic Usage
 
 ```typescript
@@ -70,13 +74,21 @@ const avatar = await avatarManager.load('character-id', (progress) => {
 const container = document.getElementById('avatar-container')
 const avatarView = new AvatarView(avatar, container)
 
-// 4. Start real-time communication (SDK mode only)
-await avatarView.avatarController.start()
-
-// 5. Send audio data (SDK mode, must be mono PCM16 format matching configured sample rate)
-const audioData = new ArrayBuffer(1024) // Example: PCM16 audio data at configured sample rate
-avatarView.avatarController.send(audioData, false) // Send audio data
-avatarView.avatarController.send(audioData, true) // end=true marks the end of current conversation round
+// 4. ⚠️ CRITICAL: Initialize audio context (MUST be called in user gesture context)
+// This method MUST be called within a user gesture event handler (click, touchstart, etc.)
+// to satisfy browser security policies. Calling it outside a user gesture will fail.
+button.addEventListener('click', async () => {
+  // Initialize audio context - MUST be in user gesture context
+  await avatarView.controller.initializeAudioContext()
+  
+  // 5. Start real-time communication (SDK mode only)
+  await avatarView.controller.start()
+  
+  // 6. Send audio data (SDK mode, must be mono PCM16 format matching configured sample rate)
+  const audioData = new ArrayBuffer(1024) // Example: PCM16 audio data at configured sample rate
+  avatarView.controller.send(audioData, false) // Send audio data
+  avatarView.controller.send(audioData, true) // end=true marks the end of current conversation round
+})
 ```
 
 ### Host Mode Example
@@ -89,10 +101,17 @@ avatarView.avatarController.send(audioData, true) // end=true marks the end of c
 const container = document.getElementById('avatar-container')
 const avatarView = new AvatarView(avatar, container)
 
-// 4. Host Mode Workflow:
-// Send audio data first to get conversationId, then use it to send animation data
-const conversationId = avatarView.avatarController.yieldAudioData(audioData, false)
-avatarView.avatarController.yieldFramesData(animationDataArray, conversationId) // animationDataArray: (Uint8Array | ArrayBuffer)[]
+// 4. ⚠️ CRITICAL: Initialize audio context (MUST be called in user gesture context)
+// This method MUST be called within a user gesture event handler (click, touchstart, etc.)
+// to satisfy browser security policies. Calling it outside a user gesture will fail.
+button.addEventListener('click', async () => {
+  // Initialize audio context - MUST be in user gesture context
+  await avatarView.controller.initializeAudioContext()
+  
+  // 5. Host Mode Workflow:
+  // Send audio data first to get conversationId, then use it to send animation data
+  const conversationId = avatarView.controller.yieldAudioData(audioData, false)
+  avatarView.controller.yieldFramesData(animationDataArray, conversationId) // animationDataArray: (Uint8Array | ArrayBuffer)[]
 ```
 
 ### Complete Examples
@@ -350,34 +369,52 @@ Audio/animation playback controller (playback layer), manages synchronized playb
 #### SDK Mode Methods
 
 ```typescript
-// Start WebSocket service
-await avatarView.avatarController.start()
-
-// Send audio data (must be 16kHz mono PCM16 format)
-const conversationId = avatarView.avatarController.send(audioData: ArrayBuffer, end: boolean)
-// Returns: conversationId - Conversation ID for this conversation session
-// end: false (default) - Continue sending audio data for current conversation
-// end: true - Mark the end of current conversation round. After end=true, sending new audio data will interrupt any ongoing playback from the previous conversation round
+// ⚠️ CRITICAL: Initialize audio context first (MUST be called in user gesture context)
+// This method MUST be called within a user gesture event handler (click, touchstart, etc.)
+// to satisfy browser security policies. Calling it outside a user gesture will fail.
+// All audio operations (start, send, etc.) require prior initialization.
+button.addEventListener('click', async () => {
+  // Initialize audio context - MUST be in user gesture context
+  await avatarView.controller.initializeAudioContext()
+  
+  // Start WebSocket service
+  await avatarView.controller.start()
+  
+  // Send audio data (must be 16kHz mono PCM16 format)
+  const conversationId = avatarView.controller.send(audioData: ArrayBuffer, end: boolean)
+  // Returns: conversationId - Conversation ID for this conversation session
+  // end: false (default) - Continue sending audio data for current conversation
+  // end: true - Mark the end of current conversation round. After end=true, sending new audio data will interrupt any ongoing playback from the previous conversation round
+})
 
 // Close WebSocket service
-avatarView.avatarController.close()
+avatarView.controller.close()
 ```
 
 #### Host Mode Methods
 
 ```typescript
-// Stream audio chunks (must be 16kHz mono PCM16 format)
-const conversationId = avatarView.avatarController.yieldAudioData(
-  data: Uint8Array,               // Audio chunk data
-  isLast: boolean = false         // Whether this is the last chunk
-)
-// Returns: conversationId - Conversation ID for this audio session
-
-// Stream animation keyframes (requires conversationId from audio data)
-avatarView.avatarController.yieldFramesData(
-  keyframesDataArray: (Uint8Array | ArrayBuffer)[],  // Animation keyframes binary data array (each element is a protobuf encoded Message)
-  conversationId: string                              // Conversation ID (required)
-)
+// ⚠️ CRITICAL: Initialize audio context first (MUST be called in user gesture context)
+// This method MUST be called within a user gesture event handler (click, touchstart, etc.)
+// to satisfy browser security policies. Calling it outside a user gesture will fail.
+// All audio operations (yieldAudioData, yieldFramesData, etc.) require prior initialization.
+button.addEventListener('click', async () => {
+  // Initialize audio context - MUST be in user gesture context
+  await avatarView.controller.initializeAudioContext()
+  
+  // Stream audio chunks (must be 16kHz mono PCM16 format)
+  const conversationId = avatarView.controller.yieldAudioData(
+    data: Uint8Array,               // Audio chunk data
+    isLast: boolean = false         // Whether this is the last chunk
+  )
+  // Returns: conversationId - Conversation ID for this audio session
+
+  // Stream animation keyframes (requires conversationId from audio data)
+  avatarView.controller.yieldFramesData(
+    keyframesDataArray: (Uint8Array | ArrayBuffer)[],  // Animation keyframes binary data array (each element is a protobuf encoded Message)
+    conversationId: string                              // Conversation ID (required)
+  )
+})
 ```
 
 **⚠️ Important: Conversation ID (conversationId) Management**

package/dist/{StreamingAudioPlayer-DIcPerS7.js → StreamingAudioPlayer-CO9WTktN.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, l as logger, e as errorToMessage, a as logEvent } from "./index-jWgogoMs.js";
+import { A as APP_CONFIG, l as logger, e as errorToMessage, a as logEvent } from "./index-C1md-jKJ.js";
 class StreamingAudioPlayer {
   constructor(options) {
     __publicField(this, "audioContext", null);

package/dist/core/AvatarController.d.ts

@@ -44,6 +44,8 @@ export declare class AvatarController {
         playbackMode?: DrivingServiceMode;
     });
     getCurrentConversationId(): string | null;
+    initializeAudioContext(): Promise<void>;
+    private checkAudioContextInitialized;
     start(): Promise<void>;
     send(audioData: ArrayBuffer, end?: boolean): string | null;
     close(): void;

package/dist/core/AvatarView.d.ts

@@ -22,7 +22,8 @@ export declare class AvatarView {
     private currentFPS;
     private transitionKeyframes;
     private transitionStartTime;
-    private readonly transitionDurationMs;
+    private readonly startTransitionDurationMs;
+    private readonly endTransitionDurationMs;
     private cachedIdleFirstFrame;
     private idleCurrentFrameIndex;
     private characterHandle;
@@ -61,7 +62,7 @@ export declare class AvatarView {
     private stopRealtimeRendering;
     dispose(): void;
     renderFlame(flame: Flame, enableIdleRendering?: boolean): Promise<void>;
-    generateTransitionFromIdle(toFlame: Flame, frameCount: number): Promise<Flame[]>;
+    generateTransitionFromIdle(toFlame: Flame, frameCount: number, transitionType?: 'start' | 'end'): Promise<Flame[]>;
     private rerenderCurrentFrameWithNewCamera;
     private handleResize;
     get transform(): {

package/dist/{index-jWgogoMs.js → index-C1md-jKJ.js}

@@ -7624,7 +7624,7 @@ const _AnimationPlayer = class _AnimationPlayer {
     if (this.streamingPlayer) {
       return;
     }
-    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-DIcPerS7.js");
+    const { StreamingAudioPlayer } = await import("./StreamingAudioPlayer-CO9WTktN.js");
     const { AvatarSDK: AvatarSDK2 } = await Promise.resolve().then(() => AvatarSDK$1);
     const audioFormat = AvatarSDK2.getAudioFormat();
     this.streamingPlayer = new StreamingAudioPlayer({
@@ -8961,7 +8961,7 @@ class AvatarSDK {
 }
 __publicField(AvatarSDK, "_isInitialized", false);
 __publicField(AvatarSDK, "_configuration", null);
-__publicField(AvatarSDK, "_version", "1.0.0-beta.61");
+__publicField(AvatarSDK, "_version", "1.0.0-beta.63");
 __publicField(AvatarSDK, "_avatarCore", null);
 __publicField(AvatarSDK, "_dynamicSdkConfig", null);
 const AvatarSDK$1 = Object.freeze(Object.defineProperty({
@@ -10741,38 +10741,71 @@ class AvatarController {
   getCurrentConversationId() {
     return this.getEffectiveConversationId();
   }
-  async start() {
-    if (!this.networkLayer) {
-      throw new SPAvatarError(
-        "Network layer not available. Use SDK mode.",
-        "NETWORK_LAYER_NOT_AVAILABLE"
-      );
+  async initializeAudioContext() {
+    var _a;
+    if ((_a = this.animationPlayer) == null ? void 0 : _a.isStreamingReady()) {
+      return;
     }
     if (!this.animationPlayer) {
       this.animationPlayer = new AnimationPlayer();
+    }
+    if (!this.animationPlayer.isStreamingReady()) {
       try {
         await this.animationPlayer.createAndInitializeStreamingPlayer();
       } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
-        logger.error("[AvatarController] Failed to create streaming player:", message);
-        logEvent("character_player", "error", {
-          avatar_id: this.avatar.id,
-          event: "streaming_player_init_failed",
-          reason: message
-        });
-        throw error;
+        logger.error("[AvatarController] Failed to initialize audio context:", message);
+        throw new SPAvatarError(
+          `Failed to initialize audio context: ${message}`,
+          "AUDIO_CONTEXT_INIT_FAILED"
+        );
       }
     }
+    const streamingPlayer = this.animationPlayer.getStreamingPlayer();
+    if (streamingPlayer) {
+      const audioContext = streamingPlayer.audioContext;
+      if (audioContext && audioContext.state === "suspended") {
+        try {
+          await audioContext.resume();
+        } catch (err) {
+          logger.warn("[AvatarController] Failed to resume AudioContext during initialization:", err);
+        }
+      }
+    }
+  }
+  checkAudioContextInitialized() {
+    var _a;
+    if (!((_a = this.animationPlayer) == null ? void 0 : _a.isStreamingReady())) {
+      throw new SPAvatarError(
+        "Audio context not initialized. Call initializeAudioContext() in a user gesture context first.",
+        "AUDIO_CONTEXT_NOT_INITIALIZED"
+      );
+    }
+  }
+  async start() {
+    if (!this.networkLayer) {
+      throw new SPAvatarError(
+        "Network layer not available. Use SDK mode.",
+        "NETWORK_LAYER_NOT_AVAILABLE"
+      );
+    }
+    this.checkAudioContextInitialized();
     await this.networkLayer.connect(this.avatar.id);
   }
   send(audioData, end = false) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
+    try {
+      this.checkAudioContextInitialized();
+    } catch (error) {
+      (_a = this.onError) == null ? void 0 : _a.call(this, error);
+      return null;
+    }
     if (!this.networkLayer) {
-      (_a = this.onError) == null ? void 0 : _a.call(this, new SPAvatarError("Network layer not available", "NETWORK_LAYER_NOT_AVAILABLE"));
+      (_b = this.onError) == null ? void 0 : _b.call(this, new SPAvatarError("Network layer not available", "NETWORK_LAYER_NOT_AVAILABLE"));
       return null;
     }
     if (!this.networkLayer.canSend()) {
-      (_b = this.onError) == null ? void 0 : _b.call(this, new SPAvatarError("Service not connected", "NOT_CONNECTED"));
+      (_c = this.onError) == null ? void 0 : _c.call(this, new SPAvatarError("Service not connected", "NOT_CONNECTED"));
       logEvent("character_manager", "warning", {
         avatar_id: this.avatar.id,
         event: "send_not_connected"
@@ -10790,7 +10823,7 @@ class AvatarController {
     }
     if (!this.isPlaying && this.currentState === AvatarState.idle) {
       this.currentState = AvatarState.active;
-      (_c = this.onConversationState) == null ? void 0 : _c.call(this, this.mapToConversationState(AvatarState.active));
+      (_d = this.onConversationState) == null ? void 0 : _d.call(this, this.mapToConversationState(AvatarState.active));
     }
     return this.networkLayer.getCurrentConversationId();
   }
@@ -10810,18 +10843,13 @@ class AvatarController {
     (_a = this.onConnectionState) == null ? void 0 : _a.call(this, ConnectionState.disconnected);
   }
   async playback(initialAudioChunks, initialKeyframes) {
+    this.checkAudioContextInitialized();
     if (this.isPlaying || this.currentConversationId) {
       this.interrupt();
     }
     this.currentConversationId = this.generateAndLogNewConversationId();
     this.reqEnd = false;
     this.clearPlaybackData();
-    if (!this.animationPlayer) {
-      this.animationPlayer = new AnimationPlayer();
-    }
-    if (!this.animationPlayer.isStreamingReady()) {
-      await this.animationPlayer.createAndInitializeStreamingPlayer();
-    }
     if (initialAudioChunks && initialAudioChunks.length > 0) {
       this.pendingAudioChunks.push(...initialAudioChunks);
     }
@@ -10848,7 +10876,13 @@ class AvatarController {
     return this.currentConversationId;
   }
   yieldAudioData(data, isLast = false) {
-    var _a, _b;
+    var _a, _b, _c;
+    try {
+      this.checkAudioContextInitialized();
+    } catch (error) {
+      (_a = this.onError) == null ? void 0 : _a.call(this, error);
+      return null;
+    }
     if (this.reqEnd && this.isPlaying && this.currentConversationId) {
       this.interrupt();
       this.currentConversationId = this.generateAndLogNewConversationId();
@@ -10879,12 +10913,12 @@ class AvatarController {
         metrics.tap2Timestamp = Date.now();
       }
     }
-    if (this.isPlaying && ((_a = this.animationPlayer) == null ? void 0 : _a.isStreamingReady())) {
+    if (this.isPlaying && ((_b = this.animationPlayer) == null ? void 0 : _b.isStreamingReady())) {
       this.animationPlayer.addAudioChunk(data, isLast);
     } else {
       if (data.length > 0 || isLast) {
         this.pendingAudioChunks.push({ data, isLast });
-        (_b = this.onConversationState) == null ? void 0 : _b.call(this, this.mapToConversationState(AvatarState.active));
+        (_c = this.onConversationState) == null ? void 0 : _c.call(this, this.mapToConversationState(AvatarState.active));
       }
     }
     return this.currentConversationId;
@@ -11237,6 +11271,7 @@ class AvatarController {
   }
   async startStreamingPlaybackInternal() {
     var _a, _b, _c;
+    this.checkAudioContextInitialized();
     if (this.isPlaying) {
       this.isStartingPlayback = false;
       return;
@@ -11245,30 +11280,15 @@ class AvatarController {
       return;
     }
     this.isStartingPlayback = true;
-    if (!this.animationPlayer) {
-      this.animationPlayer = new AnimationPlayer();
-    }
-    if (!this.animationPlayer.isStreamingReady()) {
-      try {
-        await this.animationPlayer.createAndInitializeStreamingPlayer();
-      } catch (error) {
-        this.isStartingPlayback = false;
-        const message = error instanceof Error ? error.message : String(error);
-        logger.error("[AvatarController] Failed to create streaming player:", message);
-        logEvent("character_player", "error", {
-          avatar_id: this.avatar.id,
-          event: "streaming_player_init_failed",
-          reason: message
-        });
-        throw error;
-      }
-    }
     if (!this.currentKeyframes || this.currentKeyframes.length === 0) {
       this.isStartingPlayback = false;
       logger.warn("[AvatarController] No animation data to play");
       return;
     }
     try {
+      if (!this.animationPlayer) {
+        throw new SPAvatarError("Animation player not initialized", "ANIMATION_PLAYER_NOT_INITIALIZED");
+      }
       await this.animationPlayer.prepareStreamingPlayer(() => {
         var _a2, _b2;
         this.isPlaying = false;
@@ -11490,21 +11510,7 @@ class AvatarController {
   async startAudioOnlyPlayback() {
     var _a, _b;
     if (!this.animationPlayer) {
-      this.animationPlayer = new AnimationPlayer();
-    }
-    if (!this.animationPlayer.isStreamingReady()) {
-      try {
-        await this.animationPlayer.createAndInitializeStreamingPlayer();
-      } catch (error) {
-        const message = error instanceof Error ? error.message : String(error);
-        logger.error("[AvatarController] Failed to create streaming player for audio-only mode:", message);
-        logEvent("character_player", "error", {
-          avatar_id: this.avatar.id,
-          event: "audio_only_streaming_player_init_failed",
-          reason: message
-        });
-        throw error;
-      }
+      throw new SPAvatarError("Animation player not initialized", "ANIMATION_PLAYER_NOT_INITIALIZED");
     }
     try {
       await this.animationPlayer.prepareStreamingPlayer(() => {
@@ -11587,7 +11593,9 @@ class AvatarController {
   }
   addAudioChunkToBuffer(data, isLast) {
     if (!this.animationPlayer) {
-      this.animationPlayer = new AnimationPlayer();
+      logger.warn("[AvatarController] animationPlayer is null in addAudioChunkToBuffer, this should not happen");
+      this.pendingAudioChunks.push({ data, isLast });
+      return;
     }
     if (this.isPlaying && this.animationPlayer.isStreamingReady()) {
       this.animationPlayer.addAudioChunk(data, isLast);
@@ -13851,31 +13859,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 {
@@ -13900,7 +13959,8 @@ class AvatarView {
     __publicField(this, "currentFPS", 0);
     __publicField(this, "transitionKeyframes", []);
     __publicField(this, "transitionStartTime", 0);
-    __publicField(this, "transitionDurationMs", 400);
+    __publicField(this, "startTransitionDurationMs", 200);
+    __publicField(this, "endTransitionDurationMs", 1600);
     __publicField(this, "cachedIdleFirstFrame", null);
     __publicField(this, "idleCurrentFrameIndex", 0);
     __publicField(this, "characterHandle", null);
@@ -13957,12 +14017,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) {
@@ -14321,7 +14381,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];
@@ -14347,7 +14408,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();
@@ -14477,7 +14538,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");
@@ -14530,7 +14591,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)
@@ -14640,7 +14701,7 @@ class AvatarView {
       throw error;
     }
   }
-  async generateTransitionFromIdle(toFlame, frameCount) {
+  async generateTransitionFromIdle(toFlame, frameCount, transitionType = "start") {
     if (!this.isInitialized) {
       throw new Error("AvatarView not initialized");
     }
@@ -14656,16 +14717,18 @@ class AvatarView {
       const idleFrameProto = convertWasmParamsToProtoFlame(idleParams);
       const toFlameWithPostProcessing = this.avatarController.applyPostProcessingToFlame(toFlame);
       const aligned = this.alignFlamePair(idleFrameProto, toFlameWithPostProcessing);
+      const from = transitionType === "start" ? aligned.from : aligned.to;
+      const to2 = transitionType === "start" ? aligned.to : aligned.from;
       const fps = APP_CONFIG.animation.fps;
       const durationMs = frameCount / fps * 1e3;
       const transitionFrames = generateTransitionFrames(
-        aligned.from,
-        aligned.to,
+        from,
+        to2,
         durationMs,
         fps
       );
-      transitionFrames[0] = aligned.from;
-      transitionFrames[transitionFrames.length - 1] = aligned.to;
+      transitionFrames[0] = from;
+      transitionFrames[transitionFrames.length - 1] = to2;
       return transitionFrames;
     } catch (error) {
       logger.error("[AvatarView] Failed to generate transition from idle:", error instanceof Error ? error.message : String(error));

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-jWgogoMs.js";
+import { b, c, f, d, j, g, C, i, D, E, k, h, L, R, S, m } from "./index-C1md-jKJ.js";
 export {
   b as Avatar,
   c as AvatarController,

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

@@ -1,6 +1,6 @@
 import { Flame } from '../generated/driveningress/v1/driveningress';
 
-export declare function linearLerp(from: Flame, to: Flame, progress: number): Flame;
+export declare function bezierLerp(from: Flame, to: Flame, progress: number): Flame;
 
 export declare function generateTransitionFrames(from: Flame, to: Flame, durationMs: number, fps?: number): Flame[];
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spatialwalk/avatarkit",
   "type": "module",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.63",
   "description": "SPAvatar SDK - 3D Gaussian Splatting Avatar Rendering SDK",
   "author": "SPAvatar Team",
   "license": "MIT",