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

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file.
 
+## [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/dist/{StreamingAudioPlayer-DIcPerS7.js → StreamingAudioPlayer-BWsAt_s7.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-Bhjn1nq3.js";
 class StreamingAudioPlayer {
   constructor(options) {
     __publicField(this, "audioContext", null);

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-Bhjn1nq3.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-BWsAt_s7.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.62");
 __publicField(AvatarSDK, "_avatarCore", null);
 __publicField(AvatarSDK, "_dynamicSdkConfig", null);
 const AvatarSDK$1 = Object.freeze(Object.defineProperty({
@@ -13851,31 +13851,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 +13951,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 +14009,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 +14373,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 +14400,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 +14530,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 +14583,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 +14693,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 +14709,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-Bhjn1nq3.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.62",
   "description": "SPAvatar SDK - 3D Gaussian Splatting Avatar Rendering SDK",
   "author": "SPAvatar Team",
   "license": "MIT",