@sage-rsc/talking-head-react 1.3.8 → 1.4.0

package/src/lib/talkinghead.mjs

@@ -349,8 +349,7 @@ class TalkingHead {
     this.posePropNames = [...names];
 
     // Use "side" as the first pose, weight on left leg
-    // Note: This will be overridden by gender-specific selection when avatar loads
-    this.poseName = "side"; // First pose (default, will be gender-adjusted on avatar load)
+    this.poseName = "side"; // First pose
     this.poseWeightOnLeft = true; // Initial weight on left leg
     this.gesture = null; // Values that override pose properties
     this.poseCurrentTemplate = this.poseTemplates[this.poseName];
@@ -375,7 +374,6 @@ class TalkingHead {
     //           1. State (idle, speaking, listening)
     //           2. Mood (moodX, moodY)
     //           3. Pose (poseX, poseY)
-    //           4. Body Movement (walking, prancing, gesturing, dancing, excited)
     //           5. View (full, upper, head)
     //           6. Body form ('M','F')
     //           7. Alt (sequence of objects with propabilities p. If p is not
@@ -453,18 +451,16 @@ class TalkingHead {
         ]
       },
       'happy' : {
-        baseline: { mouthSmile: 0.2, eyesLookDown: 0 },
+        baseline: { mouthSmile: 0.2, eyesLookDown: 0.1 },
         speech: { deltaRate: 0, deltaPitch: 0.1, deltaVolume: 0 },
         anims: [
           { name: 'breathing', delay: 1500, dt: [ 1200,500,1000 ], vs: { chestInhale: [0.5,0.5,0] } },
           { name: 'pose',
             idle: {
               alt: [
-                { p: 0.6, delay: [5000,30000], vs: { pose: ['side'] },
-                  'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
-                },
+                { p: 0.6, delay: [5000,30000], vs: { pose: ['side'] } },
                 { p: 0.2, delay: [5000,30000], vs: { pose: ['hip'] },
-                  'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
+                  'M': { delay: [5000,30000], vs: { pose: ['side'] } }
                 },
                 { p: 0.1, delay: [5000,30000], vs: { pose: ['straight'] } },
                 { delay: [5000,10000], vs: { pose: ['wide'] } },
@@ -473,12 +469,8 @@ class TalkingHead {
             },
             speaking: {
               alt: [
-                { p: 0.4, delay: [5000,30000], vs: { pose: ['side'] },
-                  'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
-                },
-                { p: 0.4, delay: [5000,30000], vs: { pose: ['straight'] },
-                  'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
-                },
+                { p: 0.4, delay: [5000,30000], vs: { pose: ['side'] } },
+                { p: 0.4, delay: [5000,30000], vs: { pose: ['straight'] } },
                 { delay: [5000,20000], vs: { pose: ['hip'] },
                   'M': { delay: [5000,30000], vs: { pose: ['wide'] } }
                 },
@@ -773,6 +765,10 @@ class TalkingHead {
     this.animClips = [];
     this.animPoses = [];
 
+    // Animate
+    this.animate = this.animate.bind(this);
+    this._raf = null;
+
     // Clock
     this.animFrameDur = 1000/ this.opt.modelFPS;
     this.animClock = 0;
@@ -780,12 +776,9 @@ class TalkingHead {
     this.animTimeLast = 0;
     this.easing = this.sigmoidFactory(5); // Ease in and out
 
-    // Lip-sync extensions, import statically
+    // Lip-sync extensions, import dynamically
     this.lipsync = {};
-    this.opt.lipsyncModules.forEach( x => {
-      // Load synchronously using statically imported modules
-      this.lipsyncGetProcessor(x);
-    });
+    this.opt.lipsyncModules.forEach( x => this.lipsyncGetProcessor(x) );
     this.visemeNames = [
       'aa', 'E', 'I', 'O', 'U', 'PP', 'SS', 'TH', 'DD', 'FF', 'kk',
       'nn', 'RR', 'CH', 'sil'
@@ -960,9 +953,6 @@ class TalkingHead {
     this.audioAnalyzerNode.smoothingTimeConstant = 0.1;
     this.audioAnalyzerNode.minDecibels = -70;
     this.audioAnalyzerNode.maxDecibels = -10;
-    
-    // Audio analyzer for precise lip-sync
-    this.audioAnalyzer = new AudioAnalyzer(this.audioCtx);
     this.audioReverbNode = this.audioCtx.createConvolver();
     
     // Connect nodes
@@ -1122,20 +1112,24 @@ class TalkingHead {
   * Clear 3D object.
   * @param {Object} obj Object
   */
-  clearThree(obj){
-    while( obj.children.length ){
+  clearThree(obj) {
+    while (obj.children.length) {
       this.clearThree(obj.children[0]);
       obj.remove(obj.children[0]);
     }
-    if ( obj.geometry ) obj.geometry.dispose();
 
-    if ( obj.material ) {
-      Object.keys(obj.material).forEach( x => {
-        if ( obj.material[x] && obj.material[x] !== null && typeof obj.material[x].dispose === 'function' ) {
-          obj.material[x].dispose();
-        }
-      });
-      obj.material.dispose();
+    if (obj.geometry) obj.geometry.dispose();
+
+    if (obj.material) {
+      if (Array.isArray(obj.material)) {
+        obj.material.forEach(m => {
+          if (m.map) m.map.dispose();
+          m.dispose();
+        });
+      } else {
+        if (obj.material.map) obj.material.map.dispose();
+        obj.material.dispose();
+      }
     }
   }
 
@@ -1244,19 +1238,27 @@ class TalkingHead {
     this.stop();
     this.avatar = avatar;
     
-    // Initialize body movement properties
+    // Initialize custom properties
     this.bodyMovement = avatar.bodyMovement || 'idle';
     this.movementIntensity = avatar.movementIntensity || 0.5;
-    this.showFullAvatar = avatar.showFullAvatar || false;
-    
+    this.lockedPosition = null;
+    this.originalPosition = null;
+    this.positionWasLocked = false;
+
     // Initialize FBX animation loader
     this.fbxAnimationLoader = null;
 
     // Dispose Dynamic Bones
     this.dynamicbones.dispose();
 
-    // Clear previous scene, if avatar was previously loaded
-    this.mixer = null;
+    // Clear previous mixer/scene, if avatar was previously loaded
+    if (this.mixer) {
+      this.mixer.removeEventListener('finished', this._mixerHandler);
+      this.mixer.stopAllAction();
+      this.mixer.uncacheRoot(this.armature);
+      this.mixer = null;
+      this._mixerHandler = null;
+    }
     if ( this.isAvatarOnly ) {
       if ( this.armature ) {
         this.clearThree( this.armature );
@@ -1570,7 +1572,7 @@ class TalkingHead {
   * Render scene.
   */
   render() {
-    if ( this.isRunning && !this.isAvatarOnly && this.renderer ) {
+    if ( this.isRunning && !this.isAvatarOnly ) {
       this.renderer.render( this.scene, this.camera );
     }
   }
@@ -1579,7 +1581,7 @@ class TalkingHead {
   * Resize avatar.
   */
   onResize() {
-    if ( !this.isAvatarOnly && this.renderer ) {
+    if ( !this.isAvatarOnly ) {
       this.camera.aspect = this.nodeAvatar.clientWidth / this.nodeAvatar.clientHeight;
       this.camera.updateProjectionMatrix();
       this.renderer.setSize( this.nodeAvatar.clientWidth, this.nodeAvatar.clientHeight );
@@ -1612,6 +1614,23 @@ class TalkingHead {
     // Apply shoulder adjustment to lower shoulders
     this.applyShoulderAdjustment();
   }
+
+  /**
+  * Update avatar pose deltas
+  */
+  updatePoseDelta() {
+    for( const [key,d] of Object.entries(this.poseDelta.props) ) {
+      if ( d.x === 0 && d.y === 0 && d.z === 0 ) continue;
+      e.set(d.x,d.y,d.z);
+      const o = this.poseAvatar.props[key];
+      if ( o.isQuaternion ) {
+        q.setFromEuler(e);
+        o.multiply(q);
+      } else if ( o.isVector3 ) {
+        o.add( e );
+      }
+    }
+  }
   
   /**
    * Apply shoulder adjustment to lower shoulders to a more natural position
@@ -1675,23 +1694,6 @@ class TalkingHead {
     }
   }
 
-  /**
-  * Update avatar pose deltas
-  */
-  updatePoseDelta() {
-    for( const [key,d] of Object.entries(this.poseDelta.props) ) {
-      if ( d.x === 0 && d.y === 0 && d.z === 0 ) continue;
-      e.set(d.x,d.y,d.z);
-      const o = this.poseAvatar.props[key];
-      if ( o.isQuaternion ) {
-        q.setFromEuler(e);
-        o.multiply(q);
-      } else if ( o.isVector3 ) {
-        o.add( e );
-      }
-    }
-  }
-
   /**
   * Update morph target values.
   * @param {number} dt Delta time in ms.
@@ -2156,523 +2158,87 @@ class TalkingHead {
 
   }
 
+
   /**
-   * Initialize FBX animation loader
-   */
-  async initializeFBXAnimationLoader() {
-    try {
-      // Dynamic import to avoid loading issues
-      const { FBXAnimationLoader } = await import('./fbxAnimationLoader.js');
-      this.fbxAnimationLoader = new FBXAnimationLoader(this.armature);
-      console.log('FBX Animation Loader initialized');
-    } catch (error) {
-      console.warn('FBX Animation Loader not available:', error);
-      this.fbxAnimationLoader = null;
-    }
+  * Get morph target names.
+  * @return {string[]} Morph target names.
+  */
+  getMorphTargetNames() {
+    return [ 'eyesRotateX', 'eyesRotateY', ...Object.keys(this.mtAvatar)].sort();
   }
 
   /**
-   * Set body movement type.
-   * @param {string} movement Movement type (idle, walking, prancing, gesturing, dancing, excited).
-   */
-  setBodyMovement(movement) {
-    this.bodyMovement = movement;
-    
-    // Only set avatar property if avatar exists
-    if (this.avatar) {
-      this.avatar.bodyMovement = movement;
-    }
-    
-    console.log('Body movement set to:', movement);
-    
-    // Respect the current showFullAvatar setting instead of forcing it to true
-    // Only unlock position when returning to idle
-    if (movement === 'idle') {
-      // Unlock position when returning to idle
-      this.unlockAvatarPosition();
+  * Get baseline value for the morph target.
+  * @param {string} mt Morph target name
+  * @return {number} Value, null if not in baseline
+  */
+  getBaselineValue( mt ) {
+    if ( mt === 'eyesRotateY' ) {
+      const ll = this.getBaselineValue('eyeLookOutLeft');
+      if ( ll === undefined ) return undefined;
+      const lr = this.getBaselineValue('eyeLookInLeft');
+      if ( lr === undefined ) return undefined;
+      const rl = this.getBaselineValue('eyeLookOutRight');
+      if ( rl === undefined ) return undefined;
+      const rr = this.getBaselineValue('eyeLookInRight');
+      if ( rr === undefined ) return undefined;
+      return ll - lr;
+    } else if ( mt === 'eyesRotateX' ) {
+      const d = this.getBaselineValue('eyesLookDown');
+      if ( d === undefined ) return undefined;
+      const u = this.getBaselineValue('eyesLookUp');
+      if ( u === undefined ) return undefined;
+      return d - u;
+    } else {
+      return this.mtAvatar[mt]?.baseline;
     }
-    // Note: We no longer force showFullAvatar to true for body movements
-    // The avatar will use whatever showFullAvatar value was set by the user
-    
-    // Apply body movement animation
-    this.applyBodyMovementAnimation();
   }
 
   /**
-   * Apply body movement animation based on current movement type.
-   */
-  async applyBodyMovementAnimation() {
-    // Check if avatar is ready
-    if (!this.armature || !this.animQueue) {
-      console.log('Avatar not ready for body movement animations');
-      return;
-    }
-    
-    console.log('Avatar is running:', this.isRunning);
-    console.log('Animation queue exists:', !!this.animQueue);
-    
-    // Remove existing body movement animations
-    const beforeLength = this.animQueue.length;
-    this.animQueue = this.animQueue.filter(anim => !anim.template.name.startsWith('bodyMovement'));
-    const afterLength = this.animQueue.length;
-    console.log(`Filtered animation queue: ${beforeLength} -> ${afterLength} animations`);
-    
-    if (this.bodyMovement === 'idle') {
-      // Stop FBX animations if any
-      if (this.fbxAnimationLoader) {
-        this.fbxAnimationLoader.stopCurrentAnimation();
-      }
-      return; // No body movement for idle
-    }
-    
-    // Try to use FBX animations first
-    if (this.fbxAnimationLoader) {
-      try {
-        await this.fbxAnimationLoader.playGestureAnimation(this.bodyMovement, this.movementIntensity);
-        console.log('Applied FBX body movement animation:', this.bodyMovement);
-        return; // Successfully applied FBX animation
-      } catch (error) {
-        console.warn('FBX animation failed, falling back to code animation:', error);
-      }
-    }
-    
-    // Fallback to code-based animations
-    const movementAnim = this.createBodyMovementAnimation(this.bodyMovement);
-    console.log('Created movement animation:', movementAnim);
-    if (movementAnim) {
-      try {
-        // Use animFactory to create proper animation object
-        const animObj = this.animFactory(movementAnim, true); // true for looping
-        
-        // Validate the animation object before adding
-        if (animObj && animObj.ts && animObj.ts.length > 0) {
-          this.animQueue.push(animObj);
-          console.log('Applied code-based body movement animation:', this.bodyMovement);
-          console.log('Animation queue length:', this.animQueue.length);
-          console.log('Animation object:', animObj);
-        } else {
-          console.error('Invalid animation object created for:', this.bodyMovement);
-          console.error('Animation object:', animObj);
-        }
-      } catch (error) {
-        console.error('Error creating body movement animation:', error);
+  * Set baseline for morph target.
+  * @param {string} mt Morph target name
+  * @param {number} val Value, null if to be removed from baseline
+  */
+  setBaselineValue( mt, val ) {
+    if ( mt === 'eyesRotateY' ) {
+      this.setBaselineValue('eyeLookOutLeft', (val === null) ? null : (val>0 ? val : 0) );
+      this.setBaselineValue('eyeLookInLeft', (val === null) ? null : (val>0 ? 0 : -val) );
+      this.setBaselineValue('eyeLookOutRight', (val === null) ? null : (val>0 ? 0 : -val) );
+      this.setBaselineValue('eyeLookInRight', (val === null) ? null : (val>0 ? val : 0) );
+    } else if ( mt === 'eyesRotateX' ) {
+      this.setBaselineValue('eyesLookDown', (val === null) ? null : (val>0 ? val : 0) );
+      this.setBaselineValue('eyesLookUp', (val === null) ? null : (val>0 ? 0 : -val) );
+    } else {
+      if ( this.mtAvatar.hasOwnProperty(mt) ) {
+        Object.assign(this.mtAvatar[mt],{ base: null, baseline: val, needsUpdate: true });
       }
     }
   }
 
   /**
-   * Lock avatar position to prevent movement during animations.
-   */
-  lockAvatarPosition() {
-    if (!this.armature) {
-      console.warn('Cannot lock position: armature not available');
-      return;
-    }
-    
-    // Store the original position if not already stored
-    if (!this.originalPosition) {
-      this.originalPosition = {
-        x: this.armature.position.x,
-        y: this.armature.position.y,
-        z: this.armature.position.z
-      };
-      console.log('Original position stored:', this.originalPosition);
-    }
-    
-    // Lock the avatar at its CURRENT position (don't move it)
-    this.lockedPosition = {
-      x: this.armature.position.x,
-      y: this.armature.position.y,
-      z: this.armature.position.z
-    };
-    
-    console.log('Avatar position locked at current position:', this.lockedPosition);
-  }
-
-  /**
-   * Unlock avatar position and restore original position.
-   */
-  unlockAvatarPosition() {
-    if (this.armature && this.originalPosition) {
-      // Restore avatar to its original position before locking
-      this.armature.position.set(
-        this.originalPosition.x,
-        this.originalPosition.y,
-        this.originalPosition.z
-      );
-      console.log('Avatar position restored to original:', this.originalPosition);
-    } else if (this.armature) {
-      // Fallback: reset to center if no original position was stored
-      this.armature.position.set(0, 0, 0);
-      console.log('Avatar position reset to center (0,0,0)');
-    }
-    this.lockedPosition = null;
-    this.originalPosition = null; // Clear original position after unlock
-    console.log('Avatar position unlocked');
-  }
-
-  /**
-   * Ensure avatar stays at locked position.
-   */
-  maintainLockedPosition() {
-    if (this.lockedPosition && this.armature) {
-      // Enforce the locked position - keep avatar exactly where it was locked
-      // This prevents FBX animations from moving the avatar
-        this.armature.position.set(
-          this.lockedPosition.x,
-        this.lockedPosition.y,
-          this.lockedPosition.z
-        );
-    }
-  }
-
-  /**
-   * Create body movement animation.
-   * @param {string} movementType Movement type.
-   * @returns {Object} Animation object.
-   */
-  createBodyMovementAnimation(movementType) {
-    const intensity = this.movementIntensity || 0.5;
-    
-    const movementAnimations = {
-      walking: {
-        name: 'bodyMovement_walking',
-        delay: [500, 2000],
-        dt: [800, 1200],
-        vs: {
-          bodyRotateY: [-0.1 * intensity, 0.1 * intensity, 0],
-          bodyRotateZ: [-0.05 * intensity, 0.05 * intensity, 0],
-          bodyRotateX: [-0.02 * intensity, 0.02 * intensity, 0]
-        }
-      },
-      prancing: {
-        name: 'bodyMovement_prancing',
-        delay: [300, 1000],
-        dt: [400, 800],
-        vs: {
-          bodyRotateY: [-0.15 * intensity, 0.15 * intensity, 0],
-          bodyRotateZ: [-0.08 * intensity, 0.08 * intensity, 0],
-          bodyRotateX: [-0.05 * intensity, 0.05 * intensity, 0]
-        }
-      },
-      gesturing: {
-        name: 'bodyMovement_gesturing',
-        delay: [400, 1500],
-        dt: [600, 1000],
-        vs: {
-          bodyRotateY: [-0.08 * intensity, 0.08 * intensity, 0],
-          bodyRotateZ: [-0.03 * intensity, 0.03 * intensity, 0]
-        }
-      },
-      dancing: {
-        name: 'bodyMovement_dancing',
-        delay: [200, 600],
-        dt: [400, 800],
-        vs: {
-          bodyRotateY: [-0.25 * intensity, 0.25 * intensity, 0],
-          bodyRotateZ: [-0.15 * intensity, 0.15 * intensity, 0],
-          bodyRotateX: [-0.1 * intensity, 0.1 * intensity, 0]
-        }
-      },
-      dancing2: {
-        name: 'bodyMovement_dancing2',
-        delay: [150, 500],
-        dt: [300, 700],
-        vs: {
-          bodyRotateY: [-0.3 * intensity, 0.3 * intensity, 0],
-          bodyRotateZ: [-0.2 * intensity, 0.2 * intensity, 0],
-          bodyRotateX: [-0.12 * intensity, 0.12 * intensity, 0]
-        }
-      },
-      dancing3: {
-        name: 'bodyMovement_dancing3',
-        delay: [100, 400],
-        dt: [200, 600],
-        vs: {
-          bodyRotateY: [-0.35 * intensity, 0.35 * intensity, 0],
-          bodyRotateZ: [-0.25 * intensity, 0.25 * intensity, 0],
-          bodyRotateX: [-0.15 * intensity, 0.15 * intensity, 0]
-        }
-      },
-      excited: {
-        name: 'bodyMovement_excited',
-        delay: [200, 600],
-        dt: [300, 700],
-        vs: {
-          bodyRotateY: [-0.12 * intensity, 0.12 * intensity, 0],
-          bodyRotateZ: [-0.06 * intensity, 0.06 * intensity, 0],
-          bodyRotateX: [-0.04 * intensity, 0.04 * intensity, 0]
-        }
-      },
-      happy: {
-        name: 'bodyMovement_happy',
-        delay: [300, 800],
-        dt: [500, 1000],
-        vs: {
-          bodyRotateY: [-0.08 * intensity, 0.08 * intensity, 0],
-          bodyRotateZ: [-0.04 * intensity, 0.04 * intensity, 0],
-          bodyRotateX: [-0.02 * intensity, 0.02 * intensity, 0]
-        }
-      },
-      surprised: {
-        name: 'bodyMovement_surprised',
-        delay: [100, 300],
-        dt: [200, 500],
-        vs: {
-          bodyRotateY: [-0.05 * intensity, 0.05 * intensity, 0],
-          bodyRotateZ: [-0.03 * intensity, 0.03 * intensity, 0],
-          bodyRotateX: [-0.01 * intensity, 0.01 * intensity, 0]
-        }
-      },
-      thinking: {
-        name: 'bodyMovement_thinking',
-        delay: [800, 2000],
-        dt: [1000, 1500],
-        vs: {
-          bodyRotateY: [-0.06 * intensity, 0.06 * intensity, 0],
-          bodyRotateZ: [-0.03 * intensity, 0.03 * intensity, 0],
-          bodyRotateX: [-0.02 * intensity, 0.02 * intensity, 0]
-        }
-      },
-      nodding: {
-        name: 'bodyMovement_nodding',
-        delay: [400, 800],
-        dt: [300, 600],
-        vs: {
-          bodyRotateX: [-0.1 * intensity, 0.1 * intensity, 0],
-          bodyRotateY: [-0.02 * intensity, 0.02 * intensity, 0]
-        }
-      },
-      shaking: {
-        name: 'bodyMovement_shaking',
-        delay: [200, 400],
-        dt: [150, 300],
-        vs: {
-          bodyRotateY: [-0.15 * intensity, 0.15 * intensity, 0],
-          bodyRotateZ: [-0.05 * intensity, 0.05 * intensity, 0]
-        }
-      },
-      celebration: {
-        name: 'bodyMovement_celebration',
-        delay: [100, 300],
-        dt: [200, 500],
-        vs: {
-          bodyRotateY: [-0.2 * intensity, 0.2 * intensity, 0],
-          bodyRotateZ: [-0.1 * intensity, 0.1 * intensity, 0],
-          bodyRotateX: [-0.08 * intensity, 0.08 * intensity, 0]
-        }
-      },
-      energetic: {
-        name: 'bodyMovement_energetic',
-        delay: [150, 400],
-        dt: [250, 500],
-        vs: {
-          bodyRotateY: [-0.18 * intensity, 0.18 * intensity, 0],
-          bodyRotateZ: [-0.12 * intensity, 0.12 * intensity, 0],
-          bodyRotateX: [-0.08 * intensity, 0.08 * intensity, 0]
-        }
-      },
-      swaying: {
-        name: 'bodyMovement_swaying',
-        delay: [600, 1200],
-        dt: [800, 1000],
-        vs: {
-          bodyRotateY: [-0.1 * intensity, 0.1 * intensity, 0],
-          bodyRotateZ: [-0.05 * intensity, 0.05 * intensity, 0]
-        }
-      },
-      bouncing: {
-        name: 'bodyMovement_bouncing',
-        delay: [300, 600],
-        dt: [400, 700],
-        vs: {
-          bodyRotateY: [-0.05 * intensity, 0.05 * intensity, 0]
-        }
-      }
-    };
-    
-    // Handle dance variations
-    if (movementType === 'dancing') {
-      const danceVariations = ['dancing', 'dancing2', 'dancing3'];
-      const randomDance = danceVariations[Math.floor(Math.random() * danceVariations.length)];
-      return movementAnimations[randomDance] || movementAnimations['dancing'];
-    }
-    
-    return movementAnimations[movementType] || null;
-  }
-
-  /**
-   * Play a random dance animation
-   */
-  playRandomDance() {
-    const danceVariations = ['dancing', 'dancing2', 'dancing3'];
-    const randomDance = danceVariations[Math.floor(Math.random() * danceVariations.length)];
-    this.setBodyMovement(randomDance);
-  }
-
-  /**
-   * Play a reaction animation
-   * @param {string} reactionType - Type of reaction (happy, surprised, thinking, etc.)
-   */
-  playReaction(reactionType) {
-    const validReactions = ['happy', 'surprised', 'thinking', 'nodding', 'shaking', 'celebration', 'energetic', 'swaying', 'bouncing'];
-    if (validReactions.includes(reactionType)) {
-      this.setBodyMovement(reactionType);
-      
-      // Auto-return to idle after a delay for non-looping reactions
-      const nonLoopingReactions = ['surprised', 'nodding', 'shaking', 'celebration'];
-      if (nonLoopingReactions.includes(reactionType)) {
-        setTimeout(() => {
-          this.setBodyMovement('idle');
-        }, 3000); // Return to idle after 3 seconds
-      }
-    } else {
-      console.warn('Invalid reaction type:', reactionType);
-    }
-  }
-
-  /**
-   * Play a celebration sequence
-   */
-  playCelebration() {
-    this.playReaction('celebration');
-    
-    // After celebration, play a random dance
-    setTimeout(() => {
-      this.playRandomDance();
-    }, 2000);
-  }
-
-  /**
-   * Set movement intensity.
-   * @param {number} intensity Movement intensity (0-1).
-   */
-  setMovementIntensity(intensity) {
-    this.movementIntensity = Math.max(0, Math.min(1, intensity));
-    
-    // Only set avatar property if avatar exists
-    if (this.avatar) {
-      this.avatar.movementIntensity = this.movementIntensity;
-    }
-    
-    console.log('Movement intensity set to:', this.movementIntensity);
-    
-    // Update FBX animation intensity if available
-    if (this.fbxAnimationLoader) {
-      this.fbxAnimationLoader.setIntensity(this.movementIntensity);
-    }
-    
-    // Reapply body movement animation with new intensity
-    this.applyBodyMovementAnimation();
-  }
-
-  /**
-   * Set show full avatar.
-   * @param {boolean} show Whether to show full avatar.
-   */
-  setShowFullAvatar(show) {
-    this.showFullAvatar = show;
-    
-    // Only set avatar property if avatar exists
-    if (this.avatar) {
-      this.avatar.showFullAvatar = show;
-    }
-    
-    console.log('Show full avatar set to:', show);
-    
-    // Only change camera view if it's not already set to the desired view
-    // This prevents the avatar from sliding down when starting animations
-    if (show && this.viewName !== 'full') {
-      console.log('Changing camera view to full');
-      this.setView('full');
-    } else if (!show && this.viewName !== 'upper') {
-      console.log('Changing camera view to upper');
-      this.setView('upper');
-    } else {
-      console.log('Camera view already set to:', this.viewName);
-    }
-  }
-
-  /**
-  * Get morph target names.
-  * @return {string[]} Morph target names.
-  */
-  getMorphTargetNames() {
-    return [ 'eyesRotateX', 'eyesRotateY', ...Object.keys(this.mtAvatar)].sort();
-  }
-
-  /**
-  * Get baseline value for the morph target.
-  * @param {string} mt Morph target name
-  * @return {number} Value, null if not in baseline
-  */
-  getBaselineValue( mt ) {
-    if ( mt === 'eyesRotateY' ) {
-      const ll = this.getBaselineValue('eyeLookOutLeft');
-      if ( ll === undefined ) return undefined;
-      const lr = this.getBaselineValue('eyeLookInLeft');
-      if ( lr === undefined ) return undefined;
-      const rl = this.getBaselineValue('eyeLookOutRight');
-      if ( rl === undefined ) return undefined;
-      const rr = this.getBaselineValue('eyeLookInRight');
-      if ( rr === undefined ) return undefined;
-      return ll - lr;
-    } else if ( mt === 'eyesRotateX' ) {
-      const d = this.getBaselineValue('eyesLookDown');
-      if ( d === undefined ) return undefined;
-      const u = this.getBaselineValue('eyesLookUp');
-      if ( u === undefined ) return undefined;
-      return d - u;
-    } else {
-      return this.mtAvatar[mt]?.baseline;
-    }
-  }
-
-  /**
-  * Set baseline for morph target.
-  * @param {string} mt Morph target name
-  * @param {number} val Value, null if to be removed from baseline
-  */
-  setBaselineValue( mt, val ) {
-    if ( mt === 'eyesRotateY' ) {
-      this.setBaselineValue('eyeLookOutLeft', (val === null) ? null : (val>0 ? val : 0) );
-      this.setBaselineValue('eyeLookInLeft', (val === null) ? null : (val>0 ? 0 : -val) );
-      this.setBaselineValue('eyeLookOutRight', (val === null) ? null : (val>0 ? 0 : -val) );
-      this.setBaselineValue('eyeLookInRight', (val === null) ? null : (val>0 ? val : 0) );
-    } else if ( mt === 'eyesRotateX' ) {
-      this.setBaselineValue('eyesLookDown', (val === null) ? null : (val>0 ? val : 0) );
-      this.setBaselineValue('eyesLookUp', (val === null) ? null : (val>0 ? 0 : -val) );
-    } else {
-      if ( this.mtAvatar.hasOwnProperty(mt) ) {
-        Object.assign(this.mtAvatar[mt],{ base: null, baseline: val, needsUpdate: true });
-      }
-    }
-  }
-
-  /**
-  * Get fixed value for the morph target.
-  * @param {string} mt Morph target name
-  * @return {number} Value, null if not fixed
-  */
-  getFixedValue( mt ) {
-    if ( mt === 'eyesRotateY' ) {
-      const ll = this.getFixedValue('eyeLookOutLeft');
-      if ( ll === null ) return null;
-      const lr = this.getFixedValue('eyeLookInLeft');
-      if ( lr === null ) return null;
-      const rl = this.getFixedValue('eyeLookOutRight');
-      if ( rl === null ) return null;
-      const rr = this.getFixedValue('eyeLookInRight');
-      if ( rr === null ) return null;
-      return ll - lr;
-    } else if ( mt === 'eyesRotateX' ) {
-      const d = this.getFixedValue('eyesLookDown');
-      if ( d === null ) return null;
-      const u = this.getFixedValue('eyesLookUp');
-      if ( u === null ) return null;
-      return d - u;
-    } else {
-      return this.mtAvatar[mt]?.fixed;
+  * Get fixed value for the morph target.
+  * @param {string} mt Morph target name
+  * @return {number} Value, null if not fixed
+  */
+  getFixedValue( mt ) {
+    if ( mt === 'eyesRotateY' ) {
+      const ll = this.getFixedValue('eyeLookOutLeft');
+      if ( ll === null ) return null;
+      const lr = this.getFixedValue('eyeLookInLeft');
+      if ( lr === null ) return null;
+      const rl = this.getFixedValue('eyeLookOutRight');
+      if ( rl === null ) return null;
+      const rr = this.getFixedValue('eyeLookInRight');
+      if ( rr === null ) return null;
+      return ll - lr;
+    } else if ( mt === 'eyesRotateX' ) {
+      const d = this.getFixedValue('eyesLookDown');
+      if ( d === null ) return null;
+      const u = this.getFixedValue('eyesLookUp');
+      if ( u === null ) return null;
+      return d - u;
+    } else {
+      return this.mtAvatar[mt]?.fixed;
     }
   }
 
@@ -2714,10 +2280,6 @@ class TalkingHead {
     let a = t;
     while(1) {
       if ( a.hasOwnProperty(this.stateName) ) {
-        // Debug: Log state selection
-        if (this.stateName === 'speaking' || this.stateName === 'idle') {
-          console.log('Selected state:', this.stateName, 'for avatar body:', this.avatar?.body);
-        }
         a = a[this.stateName];
       } else if ( a.hasOwnProperty(this.moodName) ) {
         a = a[this.moodName];
@@ -2725,9 +2287,7 @@ class TalkingHead {
         a = a[this.poseName];
       } else if ( a.hasOwnProperty(this.viewName) ) {
         a = a[this.viewName];
-      } else if ( this.avatar && this.avatar.body && a.hasOwnProperty(this.avatar.body) ) {
-        // Debug: Log gender-specific override
-        console.log('Applying gender-specific override:', this.avatar.body, 'for state:', this.stateName, 'keys:', Object.keys(a));
+      } else if ( this.avatar.body && a.hasOwnProperty(this.avatar.body) ) {
         a = a[this.avatar.body];
       } else if ( a.hasOwnProperty('alt') ) {
 
@@ -2747,12 +2307,6 @@ class TalkingHead {
          }
         }
         a = b;
-        // Debug: Log selected alternative and check for gender override
-        if (this.avatar && this.avatar.body && a.hasOwnProperty(this.avatar.body)) {
-          console.log('Found gender override in selected alternative:', this.avatar.body, 'keys:', Object.keys(a));
-        }
-        // Continue loop to check for gender-specific override after selecting alternative
-        continue;
 
       } else {
         break;
@@ -2783,10 +2337,6 @@ class TalkingHead {
     }
 
     // Values
-    // Debug: Log pose selection
-    if (a.vs && a.vs.pose) {
-      console.log('Pose being selected from vs.pose:', a.vs.pose, 'for avatar body:', this.avatar?.body);
-    }
     for( let [mt,vs] of Object.entries(a.vs) ) {
       const base = this.getBaselineValue(mt);
       const vals = vs.map( x => {
@@ -2796,11 +2346,6 @@ class TalkingHead {
         } else if ( typeof x === 'function' ) {
           return x;
         } else if ( typeof x === 'string' || x instanceof String ) {
-          // Intercept pose values and override 'hip' and 'side' to 'wide' for male avatars
-          if (mt === 'pose' && this.avatar && this.avatar.body === 'M' && (x === 'hip' || x === 'side')) {
-            console.log('Intercepting pose', x, 'in animation factory, overriding to wide for male avatar');
-            return 'wide'; // Always use 'wide' for male avatars, never 'side' or 'hip'
-          }
           return x.slice();
         } else if ( Array.isArray(x) ) {
           if ( mt === 'gesture' ) {
@@ -2913,7 +2458,7 @@ class TalkingHead {
     if ( this.isAvatarOnly ) {
       dt = t;
     } else {
-      requestAnimationFrame( this.animate.bind(this) );
+      this._raf = requestAnimationFrame( this.animate );
       dt = t - this.animTimeLast;
       if ( dt < this.animFrameDur ) return;
       this.animTimeLast = t;
@@ -2997,7 +2542,7 @@ class TalkingHead {
     const tasks = [];
     for( i=0, l=this.animQueue.length; i<l; i++ ) {
       const x = this.animQueue[i];
-      if ( !x || !x.ts || !x.ts.length || this.animClock < x.ts[0] ) continue;
+      if ( this.animClock < x.ts[0] ) continue;
 
       for( j = x.ndx || 0, k = x.ts.length; j<k; j++ ) {
         if ( this.animClock < x.ts[j] ) break;
@@ -3091,18 +2636,7 @@ class TalkingHead {
         break;
 
       case 'pose':
-        // Ensure gender-appropriate pose for male avatars - always use 'wide', never 'side' or 'hip'
-        if (this.avatar && this.avatar.body === 'M') {
-          if (j === 'hip' || j === 'side') {
-            // Always override 'hip' and 'side' to 'wide' for male avatars
-            if (this.poseTemplates['wide']) {
-              j = 'wide';
-              console.log('Overriding pose', j === 'hip' ? 'hip' : 'side', 'to wide for male avatar');
-            }
-          }
-        }
         this.poseName = j;
-        console.log('Setting pose to:', this.poseName, 'for avatar body:', this.avatar?.body, 'state:', this.stateName);
         this.setPoseFromTemplate( this.poseTemplates[ this.poseName ] );
         break;
 
@@ -3334,28 +2868,17 @@ class TalkingHead {
   }
 
   /**
-  * Get lip-sync processor based on language. Uses statically imported modules.
+  * Get lip-sync processor based on language. Import module dynamically.
   * @param {string} lang Language
-  * @param {string} [path="./"] Module path (ignored, kept for compatibility)
+  * @param {string} [path="./"] Module path
   */
   lipsyncGetProcessor(lang, path="./") {
     if ( !this.lipsync.hasOwnProperty(lang) ) {
-      const langLower = lang.toLowerCase();
+      const moduleName = path + 'lipsync-' + lang.toLowerCase() + '.mjs';
       const className = 'Lipsync' + lang.charAt(0).toUpperCase() + lang.slice(1);
-      
-      try {
-        // Use statically imported module
-        const module = LIPSYNC_MODULES[langLower];
-        
-        if (module && module[className]) {
+      import(moduleName).then( module => {
         this.lipsync[lang] = new module[className];
-          console.log(`Loaded lip-sync module for ${lang}`);
-        } else {
-          console.warn(`Lip-sync module for ${lang} not found. Available modules:`, Object.keys(LIPSYNC_MODULES));
-        }
-      } catch (error) {
-        console.warn(`Failed to load lip-sync module for ${lang}:`, error);
-      }
+      });
     }
   }
 
@@ -3744,589 +3267,148 @@ class TalkingHead {
     }
 
     if ( onsubtitles ) {
-      o.onSubtitles = onsubtitles;
-    }
-
-    if ( opt.isRaw ) {
-      o.isRaw = true;
-    }
-
-    if ( Object.keys(o).length ) {
-      this.speechQueue.push(o);
-      if ( !o.isRaw ) {
-        this.speechQueue.push( { break: 300 } );
-      }
-      this.startSpeaking();
-    }
-
-  }
-
-  /**
-  * Play audio playlist using Web Audio API.
-  * @param {boolean} [force=false] If true, forces to proceed
-  */
-  async playAudio(force=false) {
-    if ( !this.armature || (this.isAudioPlaying && !force) ) return;
-    this.isAudioPlaying = true;
-    if ( this.audioPlaylist.length ) {
-      const item = this.audioPlaylist.shift();
-
-      // If Web Audio API is suspended, try to resume it
-      if ( this.audioCtx.state === "suspended" || this.audioCtx.state === "interrupted" ) {
-        const resume = this.audioCtx.resume();
-        const timeout = new Promise((_r, rej) => setTimeout(() => rej("p2"), 1000));
-        try {
-          await Promise.race([resume, timeout]);
-        } catch(e) {
-          console.log("Can't play audio. Web Audio API suspended. This is often due to calling some speak method before the first user action, which is typically prevented by the browser.");
-          this.playAudio(true);
-          return;
-        }
-      }
-
-      // AudioBuffer
-      let audio;
-      if ( Array.isArray(item.audio) ) {
-        // Convert from PCM samples
-        let buf = this.concatArrayBuffers( item.audio );
-        audio = this.pcmToAudioBuffer(buf);
-      } else {
-        audio = item.audio;
-      }
-
-      // Create audio source
-      this.audioSpeechSource = this.audioCtx.createBufferSource();
-      this.audioSpeechSource.buffer = audio;
-      this.audioSpeechSource.playbackRate.value = 1 / this.animSlowdownRate;
-      this.audioSpeechSource.connect(this.audioAnalyzerNode);
-      this.audioSpeechSource.addEventListener('ended', () => {
-        this.audioSpeechSource.disconnect();
-        this.playAudio(true);
-      }, { once: true });
-
-      // Rescale lipsync and push to queue
-      let delay = 0;
-      if ( item.anim ) {
-        // Find the lowest negative time point, if any
-        if ( !item.isRaw ) {
-          delay = Math.abs(Math.min(0, ...item.anim.map( x => Math.min(...x.ts) ) ) );
-        }
-        item.anim.forEach( x => {
-          for(let i=0; i<x.ts.length; i++) {
-            x.ts[i] = this.animClock + x.ts[i] + delay;
-          }
-          this.animQueue.push(x);
-        });
-      }
-
-      // Play, dealy in seconds so pre-animations can be played
-      this.audioSpeechSource.start(delay/1000);
-
-    } else {
-      this.isAudioPlaying = false;
-      this.startSpeaking(true);
-    }
-  }
-
-  /**
-   * Synthesize speech using browser's built-in Speech Synthesis API
-   * @param {Object} line Speech line object
-   */
-  async synthesizeWithBrowserTTS(line) {
-    return new Promise((resolve, reject) => {
-      // Get the text from the line
-      const text = line.text.map(x => x.word).join(' ');
-      
-      // Create speech synthesis utterance
-      const utterance = new SpeechSynthesisUtterance(text);
-      
-      // Set voice properties
-      const lang = line.lang || this.avatar.ttsLang || this.opt.ttsLang || 'en-US';
-      const rate = (line.rate || this.avatar.ttsRate || this.opt.ttsRate || 1) + this.mood.speech.deltaRate;
-      const pitch = (line.pitch || this.avatar.ttsPitch || this.opt.ttsPitch || 1) + this.mood.speech.deltaPitch;
-      const volume = (line.volume || this.avatar.ttsVolume || this.opt.ttsVolume || 1) + this.mood.speech.deltaVolume;
-      
-      utterance.lang = lang;
-      utterance.rate = Math.max(0.1, Math.min(10, rate));
-      utterance.pitch = Math.max(0, Math.min(2, pitch));
-      utterance.volume = Math.max(0, Math.min(1, volume));
-      
-      // Try to find a matching voice
-      const voices = speechSynthesis.getVoices();
-      const targetVoice = line.voice || this.avatar.ttsVoice || this.opt.ttsVoice;
-      if (targetVoice && voices.length > 0) {
-        const voice = voices.find(v => v.name.includes(targetVoice) || v.lang === lang);
-        if (voice) {
-          utterance.voice = voice;
-        }
-      }
-      
-      // Estimate duration based on text length and speech rate
-      const estimatedDuration = (text.length * 100) / utterance.rate; // Adjust for speech rate
-      
-      // Create audio buffer for the estimated duration
-      const audioBuffer = this.audioCtx.createBuffer(1, this.audioCtx.sampleRate * (estimatedDuration / 1000), this.audioCtx.sampleRate);
-      
-      // Generate lip-sync data from text using the existing lip-sync modules
-      const lipsyncLang = this.avatar.lipsyncLang || this.opt.lipsyncLang || 'en';
-      const processedText = this.lipsyncPreProcessText(text, lipsyncLang);
-      const lipsyncData = this.lipsyncWordsToVisemes(processedText, lipsyncLang);
-      
-      console.log('Browser TTS Lip-sync Debug:', {
-        text,
-        lipsyncLang,
-        processedText,
-        lipsyncData,
-        hasVisemes: lipsyncData && lipsyncData.visemes && lipsyncData.visemes.length > 0,
-        estimatedDuration
-      });
-      
-      // Generate lip-sync animation from the viseme data
-      const lipsyncAnim = [];
-      if (lipsyncData && lipsyncData.visemes && lipsyncData.visemes.length > 0) {
-        const totalDuration = lipsyncData.times[lipsyncData.visemes.length - 1] + lipsyncData.durations[lipsyncData.visemes.length - 1];
-        
-        for (let i = 0; i < lipsyncData.visemes.length; i++) {
-          const viseme = lipsyncData.visemes[i];
-          const relativeTime = lipsyncData.times[i] / totalDuration;
-          const relativeDuration = lipsyncData.durations[i] / totalDuration;
-          
-          const time = relativeTime * estimatedDuration;
-          const duration = relativeDuration * estimatedDuration;
-          
-          lipsyncAnim.push({
-            template: { name: 'viseme' },
-            ts: [time - Math.min(60, 2 * duration / 3), time + Math.min(25, duration / 2), time + duration + Math.min(60, duration / 2)],
-            vs: {
-              ['viseme_' + viseme]: [null, (viseme === 'PP' || viseme === 'FF') ? 0.9 : 0.6, 0]
-            }
-          });
-        }
-      }
-      
-      // Combine original animation with lip-sync animation
-      const combinedAnim = [...line.anim, ...lipsyncAnim];
-      
-      // Add to playlist
-      this.audioPlaylist.push({ anim: combinedAnim, audio: audioBuffer });
-        this.onSubtitles = line.onSubtitles || null;
-          this.resetLips();
-      if (line.mood) this.setMood(line.mood);
-        this.playAudio();
-
-      // Handle speech synthesis events
-      utterance.onend = () => {
-        resolve();
-      };
-      
-      utterance.onerror = (event) => {
-        console.error('Speech synthesis error:', event.error);
-        reject(event.error);
-      };
-      
-      // Start speaking
-      speechSynthesis.speak(utterance);
-    });
-  }
-
-  /**
-   * Synthesize speech using ElevenLabs TTS
-   * @param {Object} line Speech line object
-   */
-  async synthesizeWithElevenLabsTTS(line) {
-    // Get the text from the line
-    const text = line.text.map(x => x.word).join(' ');
-    
-    // ElevenLabs API request
-    const voiceId = line.voice || this.avatar.ttsVoice || this.opt.ttsVoice || "21m00Tcm4TlvDq8ikWAM"; // Default to Rachel
-    
-    const requestBody = {
-      text: text,
-      model_id: "eleven_monolingual_v1",
-      voice_settings: {
-        stability: 0.5,
-        similarity_boost: 0.5,
-        style: 0.0,
-        use_speaker_boost: true
-      }
-    };
-
-    const response = await fetch(`${this.opt.ttsEndpoint}/${voiceId}`, {
-      method: 'POST',
-      headers: {
-        'Accept': 'audio/mpeg',
-        'Content-Type': 'application/json',
-        'xi-api-key': this.opt.ttsApikey
-      },
-      body: JSON.stringify(requestBody)
-    });
-
-    if (!response.ok) {
-      throw new Error(`ElevenLabs TTS error: ${response.status} ${response.statusText}`);
-    }
-
-    // Get audio data
-    const audioArrayBuffer = await response.arrayBuffer();
-    const audioBuffer = await this.audioCtx.decodeAudioData(audioArrayBuffer);
-    
-    // Use text-based lip-sync with proper error handling
-    console.log('Using text-based lip-sync for debugging...');
-    const lipsyncLang = this.avatar.lipsyncLang || this.opt.lipsyncLang || 'en';
-    
-    let audioAnalysis;
-    try {
-      console.log('Lip-sync modules available:', {
-        hasLipsync: !!this.lipsync,
-        lipsyncKeys: this.lipsync ? Object.keys(this.lipsync) : [],
-        lipsyncLang: lipsyncLang
-      });
-      
-      const processedText = this.lipsyncPreProcessText(text, lipsyncLang);
-      const lipsyncData = this.lipsyncWordsToVisemes(processedText, lipsyncLang);
-      
-      console.log('Lip-sync data:', {
-        processedText,
-        lipsyncData,
-        hasVisemes: lipsyncData && lipsyncData.visemes && lipsyncData.visemes.length > 0
-      });
-      
-      if (lipsyncData && lipsyncData.visemes && lipsyncData.visemes.length > 0) {
-        // Create audio analysis structure for compatibility
-        audioAnalysis = {
-          visemes: lipsyncData.visemes.map((viseme, i) => ({
-            viseme: viseme,
-            startTime: (i * audioBuffer.duration) / lipsyncData.visemes.length,
-            endTime: ((i + 1) * audioBuffer.duration) / lipsyncData.visemes.length,
-            duration: audioBuffer.duration / lipsyncData.visemes.length,
-            intensity: 0.7
-          })),
-          words: [],
-          duration: audioBuffer.duration,
-          features: { onsets: [], boundaries: [] }
-        };
-      } else {
-        throw new Error('No visemes generated from text');
-      }
-    } catch (error) {
-      console.error('Text-based lip-sync failed, using fallback:', error);
-      // Fallback: create simple visemes from text
-      const words = text.toLowerCase().split(/\s+/);
-      const simpleVisemes = [];
-      
-      for (const word of words) {
-        // Simple phonetic mapping
-        for (const char of word) {
-          let viseme = 'aa'; // default
-          if ('aeiou'.includes(char)) viseme = 'aa';
-          else if ('bp'.includes(char)) viseme = 'PP';
-          else if ('fv'.includes(char)) viseme = 'FF';
-          else if ('st'.includes(char)) viseme = 'SS';
-          else if ('dln'.includes(char)) viseme = 'DD';
-          else if ('kg'.includes(char)) viseme = 'kk';
-          else if ('rw'.includes(char)) viseme = 'RR';
-          
-          simpleVisemes.push(viseme);
-        }
-      }
-      
-      audioAnalysis = {
-        visemes: simpleVisemes.map((viseme, i) => ({
-          viseme: viseme,
-          startTime: (i * audioBuffer.duration) / simpleVisemes.length,
-          endTime: ((i + 1) * audioBuffer.duration) / simpleVisemes.length,
-          duration: audioBuffer.duration / simpleVisemes.length,
-          intensity: 0.6
-        })),
-        words: [],
-        duration: audioBuffer.duration,
-        features: { onsets: [], boundaries: [] }
-      };
+      o.onSubtitles = onsubtitles;
     }
-    
-    console.log('ElevenLabs TTS Audio Analysis:', {
-      text,
-      audioDuration: audioBuffer.duration,
-      visemeCount: audioAnalysis.visemes ? audioAnalysis.visemes.length : 0,
-      wordCount: audioAnalysis.words ? audioAnalysis.words.length : 0,
-      features: {
-        onsets: audioAnalysis.features && audioAnalysis.features.onsets ? audioAnalysis.features.onsets.length : 0,
-        boundaries: audioAnalysis.features && audioAnalysis.features.phonemeBoundaries ? audioAnalysis.features.phonemeBoundaries.length : 0
-      },
-      visemes: audioAnalysis.visemes ? audioAnalysis.visemes.slice(0, 3) : [] // Show first 3 visemes for debugging
-    });
-    
-    // Generate precise lip-sync animation from audio analysis
-    const lipsyncAnim = [];
-    if (audioAnalysis.visemes && audioAnalysis.visemes.length > 0) {
-      console.log('ElevenLabs: Generating lip-sync animation from', audioAnalysis.visemes.length, 'visemes');
-      for (let i = 0; i < audioAnalysis.visemes.length; i++) {
-      const visemeData = audioAnalysis.visemes[i];
-      const time = visemeData.startTime * 1000; // Convert to milliseconds
-      const duration = visemeData.duration * 1000;
-      const intensity = visemeData.intensity;
-      
-      lipsyncAnim.push({
-        template: { name: 'viseme' },
-        ts: [time - Math.min(60, 2 * duration / 3), time + Math.min(25, duration / 2), time + duration + Math.min(60, duration / 2)],
-        vs: {
-          ['viseme_' + visemeData.viseme]: [null, intensity, 0]
-        }
-      });
+
+    if ( opt.isRaw ) {
+      o.isRaw = true;
     }
-    console.log('ElevenLabs: Generated', lipsyncAnim.length, 'lip-sync animation frames');
-    } else {
-      console.warn('ElevenLabs: No visemes available for lip-sync animation');
+
+    if ( Object.keys(o).length ) {
+      this.speechQueue.push(o);
+      if ( !o.isRaw ) {
+        this.speechQueue.push( { break: 300 } );
+      }
+      this.startSpeaking();
     }
-    
-    // Combine original animation with lip-sync animation
-    const combinedAnim = [...line.anim, ...lipsyncAnim];
-    console.log('ElevenLabs: Combined animation frames:', combinedAnim.length, '(original:', line.anim.length, '+ lipsync:', lipsyncAnim.length, ')');
-    
-    // Add to playlist
-    this.audioPlaylist.push({ anim: combinedAnim, audio: audioBuffer });
-        this.onSubtitles = line.onSubtitles || null;
-    this.resetLips();
-    if (line.mood) this.setMood(line.mood);
-        this.playAudio();
+
   }
 
   /**
-   * Synthesize speech using Deepgram Aura-2 TTS
-   * @param {Object} line Speech line object
-   */
-  async synthesizeWithDeepgramTTS(line) {
-    // Get the text from the line
-    const text = line.text.map(x => x.word).join(' ');
-    
-    // Deepgram API request
-    const voiceModel = line.voice || this.avatar.ttsVoice || this.opt.ttsVoice || "aura-2-thalia-en"; // Default to Thalia
-    
-    // Build URL with model as query parameter
-    const url = `${this.opt.ttsEndpoint}?model=${voiceModel}`;
-
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: {
-        'Authorization': `Token ${this.opt.ttsApikey}`,
-        'Content-Type': 'text/plain',
-        'Accept': 'audio/mpeg'
-      },
-      body: text
-    });
+  * Play audio playlist using Web Audio API.
+  * @param {boolean} [force=false] If true, forces to proceed
+  */
+  async playAudio(force=false) {
+    if ( !this.armature || (this.isAudioPlaying && !force) ) return;
+    this.isAudioPlaying = true;
+    if ( this.audioPlaylist.length ) {
+      const item = this.audioPlaylist.shift();
 
-    if (!response.ok) {
-      throw new Error(`Deepgram TTS error: ${response.status} ${response.statusText}`);
-    }
+      // If Web Audio API is suspended, try to resume it
+      if ( this.audioCtx.state === "suspended" || this.audioCtx.state === "interrupted" ) {
+        const resume = this.audioCtx.resume();
+        const timeout = new Promise((_r, rej) => setTimeout(() => rej("p2"), 1000));
+        try {
+          await Promise.race([resume, timeout]);
+        } catch(e) {
+          console.log("Can't play audio. Web Audio API suspended. This is often due to calling some speak method before the first user action, which is typically prevented by the browser.");
+          this.playAudio(true);
+          return;
+        }
+      }
 
-    // Get audio data
-    const audioArrayBuffer = await response.arrayBuffer();
-    const audioBuffer = await this.audioCtx.decodeAudioData(audioArrayBuffer);
-    
-    // Use text-based lip-sync with proper error handling
-    console.log('Using text-based lip-sync for Deepgram...');
-    const lipsyncLang = this.avatar.lipsyncLang || this.opt.lipsyncLang || 'en';
-    
-    let audioAnalysis;
-    try {
-      console.log('Lip-sync modules available:', {
-        hasLipsync: !!this.lipsync,
-        lipsyncKeys: this.lipsync ? Object.keys(this.lipsync) : [],
-        lipsyncLang: lipsyncLang
-      });
-      
-      const processedText = this.lipsyncPreProcessText(text, lipsyncLang);
-      const lipsyncData = this.lipsyncWordsToVisemes(processedText, lipsyncLang);
-      
-      console.log('Lip-sync data:', {
-        processedText,
-        lipsyncData,
-        hasVisemes: lipsyncData && lipsyncData.visemes && lipsyncData.visemes.length > 0
-      });
-      
-      if (lipsyncData && lipsyncData.visemes && lipsyncData.visemes.length > 0) {
-        // Create audio analysis structure for compatibility
-        audioAnalysis = {
-          visemes: lipsyncData.visemes.map((viseme, i) => ({
-            viseme: viseme,
-            startTime: (i * audioBuffer.duration) / lipsyncData.visemes.length,
-            endTime: ((i + 1) * audioBuffer.duration) / lipsyncData.visemes.length,
-            duration: audioBuffer.duration / lipsyncData.visemes.length,
-            intensity: 0.7
-          })),
-          words: [],
-          duration: audioBuffer.duration,
-          features: { onsets: [], boundaries: [] }
-        };
+      // AudioBuffer
+      let audio;
+      if ( Array.isArray(item.audio) ) {
+        // Convert from PCM samples
+        let buf = this.concatArrayBuffers( item.audio );
+        audio = this.pcmToAudioBuffer(buf);
       } else {
-        throw new Error('No visemes generated from text');
+        audio = item.audio;
       }
-    } catch (error) {
-      console.error('Text-based lip-sync failed, using fallback:', error);
-      // Fallback: create simple visemes from text
-      const words = text.toLowerCase().split(/\s+/);
-      const simpleVisemes = [];
-      
-      for (const word of words) {
-        // Simple phonetic mapping
-        for (const char of word) {
-          let viseme = 'aa'; // default
-          if ('aeiou'.includes(char)) viseme = 'aa';
-          else if ('bp'.includes(char)) viseme = 'PP';
-          else if ('fv'.includes(char)) viseme = 'FF';
-          else if ('st'.includes(char)) viseme = 'SS';
-          else if ('dln'.includes(char)) viseme = 'DD';
-          else if ('kg'.includes(char)) viseme = 'kk';
-          else if ('rw'.includes(char)) viseme = 'RR';
-          
-          simpleVisemes.push(viseme);
-        }
+
+      // Make sure previous audio source is cleared
+      if (this.audioSpeechSource) {
+        try { this.audioSpeechSource.stop?.() } catch(error) {};
+        this.audioSpeechSource.disconnect();
+        this.audioSpeechSource.onended = null;
+        this.audioSpeechSource = null;
       }
-      
-      audioAnalysis = {
-        visemes: simpleVisemes.map((viseme, i) => ({
-          viseme: viseme,
-          startTime: (i * audioBuffer.duration) / simpleVisemes.length,
-          endTime: ((i + 1) * audioBuffer.duration) / simpleVisemes.length,
-          duration: audioBuffer.duration / simpleVisemes.length,
-          intensity: 0.6
-        })),
-        words: [],
-        duration: audioBuffer.duration,
-        features: { onsets: [], boundaries: [] }
+
+      // Create audio source
+      const source = this.audioCtx.createBufferSource();
+      this.audioSpeechSource = source;
+      source.buffer = audio;
+      source.playbackRate.value = 1 / this.animSlowdownRate;
+      source.connect(this.audioAnalyzerNode);
+      source.onended = () => {
+        source.disconnect();
+        source.onended = null;
+        if ( this.audioSpeechSource === source ) {
+          this.audioSpeechSource = null;
+        }
+        this.playAudio(true);
       };
-    }
-    
-    console.log('Deepgram TTS Audio Analysis:', {
-      text,
-      audioDuration: audioBuffer.duration,
-      visemeCount: audioAnalysis.visemes ? audioAnalysis.visemes.length : 0,
-      wordCount: audioAnalysis.words ? audioAnalysis.words.length : 0,
-      features: {
-        onsets: audioAnalysis.features && audioAnalysis.features.onsets ? audioAnalysis.features.onsets.length : 0,
-        boundaries: audioAnalysis.features && audioAnalysis.features.phonemeBoundaries ? audioAnalysis.features.phonemeBoundaries.length : 0
-      },
-      visemes: audioAnalysis.visemes ? audioAnalysis.visemes.slice(0, 3) : [] // Show first 3 visemes for debugging
-    });
-    
-    // Generate precise lip-sync animation from audio analysis
-    const lipsyncAnim = [];
-    if (audioAnalysis.visemes && audioAnalysis.visemes.length > 0) {
-      console.log('Deepgram: Generating lip-sync animation from', audioAnalysis.visemes.length, 'visemes');
-      for (let i = 0; i < audioAnalysis.visemes.length; i++) {
-      const visemeData = audioAnalysis.visemes[i];
-      const time = visemeData.startTime * 1000; // Convert to milliseconds
-      const duration = visemeData.duration * 1000;
-      const intensity = visemeData.intensity;
-      
-      lipsyncAnim.push({
-        template: { name: 'viseme' },
-        ts: [time - Math.min(60, 2 * duration / 3), time + Math.min(25, duration / 2), time + duration + Math.min(60, duration / 2)],
-        vs: {
-          ['viseme_' + visemeData.viseme]: [null, intensity, 0]
+
+      // Rescale lipsync and push to queue
+      let delay = 0;
+      if ( item.anim ) {
+        // Find the lowest negative time point, if any
+        if ( !item.isRaw ) {
+          delay = Math.abs(Math.min(0, ...item.anim.map( x => Math.min(...x.ts) ) ) );
         }
-      });
-    }
-    console.log('Deepgram: Generated', lipsyncAnim.length, 'lip-sync animation frames');
+        item.anim.forEach( x => {
+          for(let i=0; i<x.ts.length; i++) {
+            x.ts[i] = this.animClock + x.ts[i] + delay;
+          }
+          this.animQueue.push(x);
+        });
+      }
+
+      // Play, delay in seconds so pre-animations can be played
+      source.start( this.audioCtx.currentTime + delay/1000);
+
     } else {
-      console.warn('Deepgram: No visemes available for lip-sync animation');
+      this.isAudioPlaying = false;
+      this.startSpeaking(true);
     }
-    
-    // Combine original animation with lip-sync animation
-    const combinedAnim = [...line.anim, ...lipsyncAnim];
-    console.log('Deepgram: Combined animation frames:', combinedAnim.length, '(original:', line.anim.length, '+ lipsync:', lipsyncAnim.length, ')');
-    
-    // Add to playlist
-    this.audioPlaylist.push({ anim: combinedAnim, audio: audioBuffer });
-        this.onSubtitles = line.onSubtitles || null;
-    this.resetLips();
-    if (line.mood) this.setMood(line.mood);
-        this.playAudio();
   }
 
   /**
-   * Synthesize speech using Azure TTS
-   * @param {Object} line Speech line object
-   */
-  async synthesizeWithAzureTTS(line) {
-    // Get the text from the line
-    const text = line.text.map(x => x.word).join(' ');
-    
-    // Azure TTS SSML
-    const voiceName = line.voice || this.avatar.ttsVoice || this.opt.ttsVoice || "en-US-AriaNeural";
-    const ssml = `
-      <speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xml:lang="en-US">
-        <voice name="${voiceName}">
-          ${text}
-        </voice>
-      </speak>
-    `;
-
-    const response = await fetch(this.opt.ttsEndpoint, {
-      method: 'POST',
-      headers: {
-        'Ocp-Apim-Subscription-Key': this.opt.ttsApikey,
-        'Content-Type': 'application/ssml+xml',
-        'X-Microsoft-OutputFormat': 'audio-16khz-128kbitrate-mono-mp3'
-      },
-      body: ssml
-    });
+  * Take the next queue item from the speech queue, convert it to text, and
+  * load the audio file.
+  * @param {boolean} [force=false] If true, forces to proceed (e.g. after break)
+  */
+  async startSpeaking( force = false ) {
+    if ( !this.armature || (this.isSpeaking && !force) ) return;
+    this.stateName = 'speaking';
+    this.isSpeaking = true;
+    if ( this.speechQueue.length ) {
+      let line = this.speechQueue.shift();
+      if ( line.emoji ) {
 
-    if (!response.ok) {
-      throw new Error(`Azure TTS error: ${response.status} ${response.statusText}`);
-    }
+        // Look at the camera
+        this.lookAtCamera(500);
 
-    // Get audio data
-    const audioArrayBuffer = await response.arrayBuffer();
-    const audioBuffer = await this.audioCtx.decodeAudioData(audioArrayBuffer);
-    
-    // Analyze audio for precise lip-sync timing
-    console.log('Analyzing audio for precise lip-sync...');
-    const audioAnalysis = await this.audioAnalyzer.analyzeAudio(audioBuffer, text);
-    
-    console.log('Azure TTS Audio Analysis:', {
-      text,
-      audioDuration: audioBuffer.duration,
-      visemeCount: audioAnalysis.visemes.length,
-      wordCount: audioAnalysis.words.length,
-      features: {
-        onsets: audioAnalysis.features.onsets.length,
-        boundaries: audioAnalysis.features.phonemeBoundaries.length
-      }
-    });
-    
-    // Generate precise lip-sync animation from audio analysis
-    const lipsyncAnim = [];
-    for (let i = 0; i < audioAnalysis.visemes.length; i++) {
-      const visemeData = audioAnalysis.visemes[i];
-      const time = visemeData.startTime * 1000; // Convert to milliseconds
-      const duration = visemeData.duration * 1000;
-      const intensity = visemeData.intensity;
-      
-      lipsyncAnim.push({
-        template: { name: 'viseme' },
-        ts: [time - Math.min(60, 2 * duration / 3), time + Math.min(25, duration / 2), time + duration + Math.min(60, duration / 2)],
-        vs: {
-          ['viseme_' + visemeData.viseme]: [null, intensity, 0]
+        // Only emoji
+        let duration = line.emoji.dt.reduce((a,b) => a+b,0);
+        this.animQueue.push( this.animFactory( line.emoji ) );
+        setTimeout( this.startSpeaking.bind(this), duration, true );
+      } else if ( line.break ) {
+        // Break
+        setTimeout( this.startSpeaking.bind(this), line.break, true );
+      } else if ( line.audio ) {
+
+        // Look at the camera
+        if ( !line.isRaw ) {
+          this.lookAtCamera(500);
+          this.speakWithHands();
+          this.resetLips();
         }
-      });
-    }
-    
-    // Combine original animation with lip-sync animation
-    const combinedAnim = [...line.anim, ...lipsyncAnim];
-    
-    // Add to playlist
-    this.audioPlaylist.push({ anim: combinedAnim, audio: audioBuffer });
-    this.onSubtitles = line.onSubtitles || null;
-    this.resetLips();
-    if (line.mood) this.setMood(line.mood);
-    this.playAudio();
-  }
 
-  /**
-   * Synthesize speech using external TTS service (Google Cloud, etc.)
-   * @param {Object} line Speech line object
-   */
-  async synthesizeWithExternalTTS(line) {
+        // Make a playlist
+        this.audioPlaylist.push({ anim: line.anim, audio: line.audio, isRaw: line.isRaw });
+        this.onSubtitles = line.onSubtitles || null;
+        if ( line.mood ) this.setMood( line.mood );
+        this.playAudio();
+
+      } else if ( line.text ) {
+
+        // Look at the camera
+        this.lookAtCamera(500);
+
+        // Spoken text
+        try {
           // Convert text to SSML
           let ssml = "<speak>";
           line.text.forEach( (x,i) => {
@@ -4346,6 +3428,7 @@ class TalkingHead {
           });
           ssml += "</speak>";
 
+
           const o = {
             method: "POST",
             headers: {
@@ -4433,70 +3516,6 @@ class TalkingHead {
 
           } else {
             this.startSpeaking(true);
-    }
-  }
-
-  /**
-   * Take the next queue item from the speech queue, convert it to text, and
-   * load the audio file.
-   * @param {boolean} [force=false] If true, forces to proceed (e.g. after break)
-   */
-  async startSpeaking( force = false ) {
-    if ( !this.armature || (this.isSpeaking && !force) ) return;
-    this.stateName = 'speaking';
-    this.isSpeaking = true;
-    if ( this.speechQueue.length ) {
-      let line = this.speechQueue.shift();
-      if ( line.emoji ) {
-
-        // Look at the camera
-        this.lookAtCamera(500);
-
-        // Only emoji
-        let duration = line.emoji.dt.reduce((a,b) => a+b,0);
-        this.animQueue.push( this.animFactory( line.emoji ) );
-        setTimeout( this.startSpeaking.bind(this), duration, true );
-      } else if ( line.break ) {
-        // Break
-        setTimeout( this.startSpeaking.bind(this), line.break, true );
-      } else if ( line.audio ) {
-
-        // Look at the camera
-        if ( !line.isRaw ) {
-          this.lookAtCamera(500);
-          this.speakWithHands();
-          this.resetLips();
-        }
-
-        // Make a playlist
-        this.audioPlaylist.push({ anim: line.anim, audio: line.audio, isRaw: line.isRaw });
-        this.onSubtitles = line.onSubtitles || null;
-        if ( line.mood ) this.setMood( line.mood );
-        this.playAudio();
-
-      } else if ( line.text ) {
-
-        // Look at the camera
-        this.lookAtCamera(500);
-
-        // Spoken text
-        try {
-          // Check which TTS service to use
-          if (!this.opt.ttsEndpoint || this.opt.ttsEndpoint === "") {
-            // Use browser's built-in speech synthesis
-            await this.synthesizeWithBrowserTTS(line);
-          } else if (this.opt.ttsService === "elevenlabs") {
-            // Use ElevenLabs TTS
-            await this.synthesizeWithElevenLabsTTS(line);
-          } else if (this.opt.ttsService === "deepgram") {
-            // Use Deepgram Aura-2 TTS
-            await this.synthesizeWithDeepgramTTS(line);
-          } else if (this.opt.ttsService === "azure") {
-            // Use Azure TTS
-            await this.synthesizeWithAzureTTS(line);
-          } else {
-            // Use external TTS service (Google Cloud, etc.)
-            await this.synthesizeWithExternalTTS(line);
           }
         } catch (error) {
           console.error("Error:", error);
@@ -4532,7 +3551,7 @@ class TalkingHead {
   * Pause speaking.
   */
   pauseSpeaking() {
-    try { this.audioSpeechSource.stop(); } catch(error) {}
+    try { this.audioSpeechSource?.stop(); } catch(error) {}
     this.audioPlaylist.length = 0;
     this.stateName = 'idle';
     this.isSpeaking = false;
@@ -4548,7 +3567,7 @@ class TalkingHead {
   * Stop speaking and clear the speech queue.
   */
   stopSpeaking() {
-    try { this.audioSpeechSource.stop(); } catch(error) {}
+    try { this.audioSpeechSource?.stop(); } catch(error) {}
     this.audioPlaylist.length = 0;
     this.speechQueue.length = 0;
     this.animQueue = this.animQueue.filter( x  => x.template.name !== 'viseme' && x.template.name !== 'subtitles' && x.template.name !== 'blendshapes' );
@@ -5306,8 +4325,12 @@ class TalkingHead {
   */
   setSlowdownRate(k) {
     this.animSlowdownRate = k;
-    this.audioSpeechSource.playbackRate.value = 1 / this.animSlowdownRate;
-    this.audioBackgroundSource.playbackRate.value = 1 / this.animSlowdownRate;
+    if ( this.audioSpeechSource ) {
+      this.audioSpeechSource.playbackRate.value = 1 / this.animSlowdownRate;
+    }
+    if ( this.audioBackgroundSource ) {
+      this.audioBackgroundSource.playbackRate.value = 1 / this.animSlowdownRate;
+    }
   }
 
   /**
@@ -5336,7 +4359,7 @@ class TalkingHead {
       this.animTimeLast = performance.now();
       this.isRunning = true;
       if ( !this.isAvatarOnly ) {
-        requestAnimationFrame( this.animate.bind(this) );
+        this._raf = requestAnimationFrame( this.animate );
       }
     }
   }
@@ -5392,7 +4415,6 @@ class TalkingHead {
   * @param {number} [ndx=0] Index of the clip
   * @param {number} [scale=0.01] Position scale factor
   */
-
   async playAnimation(url, onprogress=null, dur=10, ndx=0, scale=0.01, disablePositionLock=false) {
     if ( !this.armature ) return;
 
@@ -5446,97 +4468,26 @@ class TalkingHead {
         action.fadeIn(0.5).play();
         console.log('FBX animation started successfully:', url);
       } catch (error) {
-        console.warn('FBX animation failed to start:', error);
-        // Stop the animation and unlock position on error
-        this.stopAnimation();
-        return;
-      }
-      
-      // Check if the animation actually has valid tracks
-      if (action.getClip().tracks.length === 0) {
-        console.warn('FBX animation has no valid tracks, stopping');
-        this.stopAnimation();
-        return;
-      }
-
-    } else {
-
-      // Validate file extension
-      const fileExtension = url.split('.').pop().toLowerCase();
-      if (fileExtension !== 'fbx') {
-        console.error(`Invalid file type for FBX animation: ${url}. Expected .fbx file.`);
-        return;
-      }
-
-      // Check if file exists before attempting to load
-      let fileExists = false;
-      try {
-        const response = await fetch(url, { method: 'HEAD' });
-        fileExists = response.ok;
-        if (!fileExists) {
-          console.error(`FBX file not found at ${url}. Status: ${response.status}`);
-          console.error('Please check:');
-          console.error('1. File path is correct (note: path is case-sensitive)');
-          console.error('2. File exists in your public folder');
-          console.error('3. File is accessible (not blocked by server)');
-          return;
-        }
-      } catch (fetchError) {
-        console.warn(`Could not verify file existence for ${url}, attempting to load anyway:`, fetchError);
-      }
-
-      // Load animation with error handling
-      const loader = new FBXLoader();
-      let fbx;
-      
-      try {
-        fbx = await loader.loadAsync( url, onprogress );
-      } catch (error) {
-        console.error(`Failed to load FBX animation from ${url}:`, error);
-        console.error('Error details:', {
-          message: error.message,
-          url: url,
-          suggestion: 'Make sure the file is a valid FBX file and the path is correct'
-        });
-        
-        // Try to provide helpful error message
-        if (error.message && error.message.includes('version number')) {
-          console.error('FBX Loader Error: Cannot find version number');
-          console.error('This error usually means:');
-          console.error('1. The file is not a valid FBX file (might be GLB, corrupted, or wrong format)');
-          console.error('2. The file might be corrupted');
-          console.error('3. The file path might be incorrect');
-          console.error('4. The server returned an HTML error page instead of the FBX file');
-          console.error('5. The file might not exist at that path');
-          console.error('');
-          console.error('Solution: Please verify:');
-          console.error(`  - File exists at: ${url}`);
-          console.error('  - File is a valid FBX binary file');
-          console.error('  - File path matches your public folder structure');
-          console.error('  - File is not corrupted');
-        }
-        
-        // Try to fetch and check what we actually got
-        try {
-          const response = await fetch(url);
-          const contentType = response.headers.get('content-type');
-          const text = await response.text();
-          console.error(`Response details:`, {
-            status: response.status,
-            contentType: contentType,
-            firstBytes: text.substring(0, 100),
-            isHTML: text.trim().startsWith('<!DOCTYPE') || text.trim().startsWith('<html')
-          });
-          if (text.trim().startsWith('<!DOCTYPE') || text.trim().startsWith('<html')) {
-            console.error('The server returned an HTML page instead of an FBX file. The file path is likely incorrect.');
-          }
-        } catch (fetchError) {
-          console.error('Could not fetch file for debugging:', fetchError);
-        }
-        
+        console.warn('FBX animation failed to start:', error);
+        // Stop the animation and unlock position on error
+        this.stopAnimation();
+        return;
+      }
+      
+      // Check if the animation actually has valid tracks
+      if (action.getClip().tracks.length === 0) {
+        console.warn('FBX animation has no valid tracks, stopping');
+        this.stopAnimation();
         return;
       }
 
+    } else {
+
+      // Load animation
+      const loader = new FBXLoader();
+
+      let fbx = await loader.loadAsync( url, onprogress );
+
       if ( fbx && fbx.animations && fbx.animations[ndx] ) {
         let anim = fbx.animations[ndx];
 
@@ -5688,31 +4639,6 @@ class TalkingHead {
           return null; // No mapping found
         };
 
-        // Debug: Log FBX bone names and avatar bone names for comparison
-        const fbxBoneNames = new Set();
-        anim.tracks.forEach(track => {
-          const trackParts = track.name.split('.');
-          fbxBoneNames.add(trackParts[0]);
-        });
-        
-        console.log('=== Ready Player Me Animation Bone Analysis ===');
-        console.log('FBX bone names:', Array.from(fbxBoneNames).sort().join(', '));
-        console.log('Avatar skeleton bone names:', Array.from(availableBones).sort().join(', '));
-        
-        // Check for arm bones specifically
-        const fbxArmBones = Array.from(fbxBoneNames).filter(b => 
-          b.toLowerCase().includes('arm') || 
-          b.toLowerCase().includes('hand') || 
-          b.toLowerCase().includes('shoulder')
-        );
-        const avatarArmBones = Array.from(availableBones).filter(b => 
-          b.includes('Arm') || 
-          b.includes('Hand') || 
-          b.includes('Shoulder')
-        );
-        console.log('FBX arm/hand/shoulder bones:', fbxArmBones.sort().join(', '));
-        console.log('Avatar arm/hand/shoulder bones:', avatarArmBones.sort().join(', '));
-
         // Filter and map animation tracks
         const mappedTracks = [];
         const unmappedBones = new Set();
@@ -5731,11 +4657,6 @@ class TalkingHead {
             const newTrackName = `${mappedBoneName}.${property}`;
             const newTrack = track.clone();
             newTrack.name = newTrackName;
-            
-            // Note: Rotation corrections removed - they were causing issues with both arms
-            // If left arm still has issues, it's likely a bone mapping problem, not rotation
-            // Focus on getting bone names mapped correctly first
-            
             mappedTracks.push(newTrack);
             
             // Store mapping for logging
@@ -5744,12 +4665,6 @@ class TalkingHead {
             }
           } else {
             unmappedBones.add(fbxBoneName);
-            // Log unmapped bones (especially arm bones)
-            if (fbxBoneName.toLowerCase().includes('arm') || 
-                fbxBoneName.toLowerCase().includes('hand') || 
-                fbxBoneName.toLowerCase().includes('shoulder')) {
-              console.warn(`⚠️ Arm bone "${fbxBoneName}" could not be mapped to avatar skeleton`);
-            }
           }
         });
         
@@ -5765,24 +4680,11 @@ class TalkingHead {
             console.log(`✓ Mapped ${boneNameMap.size} bone(s):`, 
               Array.from(boneNameMap.entries()).map(([from, to]) => `${from}→${to}`).join(', '));
           }
-          
-          // Check if arm bones were mapped
-          const mappedArmBones = Array.from(boneNameMap.values()).filter(b => 
-            b.includes('Arm') || b.includes('Hand') || b.includes('Shoulder')
-          );
-          if (mappedArmBones.length > 0) {
-            console.log(`✓ Arm bones mapped: ${mappedArmBones.join(', ')}`);
-          } else {
-            console.warn('⚠️ No arm bones were mapped! This may cause arm rigging issues.');
-          }
-        } else {
-          console.error('❌ No tracks could be mapped! Animation may not work correctly.');
         }
 
         // Rename and scale Mixamo tracks, create a pose
         const props = {};
         anim.tracks.forEach( t => {
-          t.name = t.name.replaceAll('mixamorig','');
           const ids = t.name.split('.');
           if ( ids[1] === 'position' ) {
             for(let i=0; i<t.values.length; i++ ) {
@@ -5818,13 +4720,6 @@ class TalkingHead {
       } else {
         const msg = 'Animation ' + url + ' (ndx=' + ndx + ') not found';
         console.error(msg);
-        if (fbx && fbx.animations) {
-          console.error(`FBX file loaded but has ${fbx.animations.length} animation(s), requested index ${ndx}`);
-        } else if (fbx) {
-          console.error('FBX file loaded but contains no animations');
-        } else {
-          console.error('FBX file failed to load or is invalid');
-        }
       }
     }
   }
@@ -5834,21 +4729,16 @@ class TalkingHead {
   */
   stopAnimation() {
 
-    // Stop only the current FBX action, preserve mixer for morph targets
-    if (this.currentFBXAction) {
-      this.currentFBXAction.stop();
-      this.currentFBXAction = null;
-      console.log('FBX animation action stopped, mixer preserved for lip-sync');
-    }
-    
-    // Only destroy mixer if no other animations are running
-    // This allows morph target animations (lip-sync) to continue
-    if (this.mixer && this.mixer._actions.length === 0) {
+    // Stop mixer
+    if (this.mixer) {
+      this.mixer.removeEventListener('finished', this._mixerHandler);
+      this.mixer.stopAllAction();
+      this.mixer.uncacheRoot(this.armature);
       this.mixer = null;
-      console.log('Mixer destroyed as no actions remain');
+      this._mixerHandler = null;
     }
-    
-    // Unlock position when animation stops (only if it was locked)
+
+    // Unlock position if it was locked
     if (this.positionWasLocked) {
       this.unlockAvatarPosition();
       console.log('Position unlocked after FBX animation stopped');
@@ -5856,347 +4746,723 @@ class TalkingHead {
       console.log('Position was not locked, no unlock needed');
     }
 
-    // Restart gesture
+    // Restart gesture
+    if ( this.gesture ) {
+      for( let [p,v] of Object.entries(this.gesture) ) {
+        v.t = this.animClock;
+        v.d = 1000;
+        if ( this.poseTarget.props.hasOwnProperty(p) ) {
+          this.poseTarget.props[p].copy(v);
+          this.poseTarget.props[p].t = this.animClock;
+          this.poseTarget.props[p].d = 1000;
+        }
+      }
+    }
+
+    // Restart pose animation
+    let anim = this.animQueue.find( x => x.template.name === 'pose' );
+    if ( anim ) {
+      anim.ts[0] = this.animClock;
+    }
+    this.setPoseFromTemplate( null );
+
+  }
+
+
+  /**
+  * Play RPM/Mixamo pose.
+  * @param {string|Object} url Pose name | URL to FBX
+  * @param {progressfn} [onprogress=null] Callback for progress
+  * @param {number} [dur=5] Duration of the pose in seconds
+  * @param {number} [ndx=0] Index of the clip
+  * @param {number} [scale=0.01] Position scale factor
+  */
+  async playPose(url, onprogress=null, dur=5, ndx=0, scale=0.01) {
+
+    if ( !this.armature ) return;
+
+    // Check if we already have the pose template ready
+    let pose = this.poseTemplates[url];
+    if ( !pose ) {
+      const item = this.animPoses.find( x => x.url === url+'-'+ndx );
+      if ( item ) {
+        pose = item.pose;
+      }
+    }
+
+    // If we have the template, use it, otherwise try to load it
+    if ( pose ) {
+
+      this.poseName = url;
+
+      if (this.mixer) {
+        this.mixer.removeEventListener('finished', this._mixerHandler);
+        this.mixer.stopAllAction();
+        this.mixer.uncacheRoot(this.armature);
+        this.mixer = null;
+        this._mixerHandler = null;
+      }
+      let anim = this.animQueue.find( x => x.template.name === 'pose' );
+      if ( anim ) {
+        anim.ts[0] = this.animClock + (dur * 1000) + 2000;
+      }
+      this.setPoseFromTemplate( pose );
+
+    } else {
+
+      // Load animation
+      const loader = new FBXLoader();
+
+      let fbx = await loader.loadAsync( url, onprogress );
+
+      if ( fbx && fbx.animations && fbx.animations[ndx] ) {
+        let anim = fbx.animations[ndx];
+
+        // Create a pose
+        const props = {};
+        anim.tracks.forEach( t => {
+
+          // Rename and scale Mixamo tracks
+          t.name = t.name.replaceAll('mixamorig','');
+          const ids = t.name.split('.');
+          if ( ids[1] === 'position' ) {
+            props[t.name] = new THREE.Vector3( t.values[0] * scale, t.values[1] * scale, t.values[2] * scale);
+          } else if ( ids[1] === 'quaternion' ) {
+            props[t.name] = new THREE.Quaternion( t.values[0], t.values[1], t.values[2], t.values[3] );
+          } else if ( ids[1] === 'rotation' ) {
+            props[ids[0]+".quaternion"] = new THREE.Quaternion().setFromEuler(new THREE.Euler( t.values[0], t.values[1], t.values[2],'XYZ' )).normalize();
+          }
+        });
+
+        // Add to pose
+        const newPose = { props: props };
+        if ( props['Hips.position'] ) {
+          if ( props['Hips.position'].y < 0.5 ) {
+            newPose.lying = true;
+          } else {
+            newPose.standing = true;
+          }
+        }
+        this.animPoses.push({
+          url: url+'-'+ndx,
+          pose: newPose
+        });
+
+        // Play
+        this.playPose(url, onprogress, dur, ndx, scale);
+
+      } else {
+        const msg = 'Pose ' + url + ' (ndx=' + ndx + ') not found';
+        console.error(msg);
+      }
+    }
+  }
+
+  /**
+  * Stop the pose. (Functionality is the same as in stopAnimation.)
+  */
+  stopPose() {
+    this.stopAnimation();
+  }
+
+  /**
+  * Play a gesture, which is either a hand gesture, an emoji animation or their
+  * combination.
+  * @param {string} name Gesture name
+  * @param {number} [dur=3] Duration of the gesture in seconds
+  * @param {boolean} [mirror=false] Mirror gesture
+  * @param {number} [ms=1000] Transition time in milliseconds
+  */
+  playGesture(name, dur=3, mirror=false, ms=1000) {
+
+    if ( !this.armature ) return;
+
+    // Hand gesture, if any
+    let g = this.gestureTemplates[name];
+    if ( g ) {
+
+      // New gesture always overrides the existing one
+      if ( this.gestureTimeout ) {
+        clearTimeout( this.gestureTimeout );
+        this.gestureTimeout = null;
+      }
+
+      // Stop talking hands animation
+      let ndx = this.animQueue.findIndex( y => y.template.name === "talkinghands" );
+      if ( ndx !== -1 ) {
+        this.animQueue[ndx].ts = this.animQueue[ndx].ts.map( x => 0 );
+      }
+
+      // Set gesture
+      this.gesture = this.propsToThreeObjects( g );
+      if ( mirror ) {
+        this.gesture = this.mirrorPose( this.gesture );
+      }
+      if ( name === "namaste" && this.avatar.body === 'M' ) {
+        // Work-a-round for male model so that the hands meet
+        this.gesture["RightArm.quaternion"].rotateTowards( new THREE.Quaternion(0,1,0,0), -0.25);
+        this.gesture["LeftArm.quaternion"].rotateTowards( new THREE.Quaternion(0,1,0,0), -0.25);
+      }
+
+      // Apply to target
+      for( let [p,val] of Object.entries(this.gesture) ) {
+        val.t = this.animClock;
+        val.d = ms;
+        if ( this.poseTarget.props.hasOwnProperty(p) ) {
+          this.poseTarget.props[p].copy(val);
+          this.poseTarget.props[p].t = this.animClock;
+          this.poseTarget.props[p].d = ms;
+        }
+      }
+
+      // Timer
+      if ( dur && Number.isFinite(dur) ) {
+        this.gestureTimeout = setTimeout( this.stopGesture.bind(this,ms), 1000 * dur);
+      }
+    }
+
+    // Animated emoji, if any
+    let em = this.animEmojis[name];
+    if ( em ) {
+
+      // Follow link
+      if ( em && em.link ) {
+        em = this.animEmojis[em.link];
+      }
+
+      if ( em ) {
+        // Look at the camera for 500 ms
+        this.lookAtCamera(500);
+
+        // Create animation and tag as gesture
+        const anim = this.animFactory( em );
+        anim.gesture = true;
+
+        // Rescale duration
+        if ( dur && Number.isFinite(dur) ) {
+          const first = anim.ts[0];
+          const last = anim.ts[ anim.ts.length -1 ];
+          const total = last - first;
+          const excess = (dur * 1000) - total;
+
+          // If longer, increase longer parts; if shorter, scale everything
+          if ( excess > 0 ) {
+            const dt = [];
+            for( let i=1; i<anim.ts.length; i++ ) dt.push( anim.ts[i] - anim.ts[i-1] );
+            const rescale = em.template?.rescale || dt.map( x => x / total );
+            const excess = dur * 1000 - total;
+            anim.ts = anim.ts.map( (x,i,arr) => {
+              return (i===0) ? first : (arr[i-1] + dt[i-1] + rescale[i-1] * excess);
+            });
+          } else {
+            const scale = (dur * 1000) / total;
+            anim.ts = anim.ts.map( x => first + scale * (x - first) );
+          }
+        }
+
+        this.animQueue.push( anim );
+      }
+    }
+
+  }
+
+  /**
+  * Stop the gesture.
+  * @param {number} [ms=1000] Transition time in milliseconds
+  */
+  stopGesture(ms=1000) {
+
+    // Stop gesture timer
+    if ( this.gestureTimeout ) {
+      clearTimeout( this.gestureTimeout );
+      this.gestureTimeout = null;
+    }
+
+    // Stop hand gesture, if any
     if ( this.gesture ) {
-      for( let [p,v] of Object.entries(this.gesture) ) {
-        v.t = this.animClock;
-        v.d = 1000;
+      const gs = Object.entries(this.gesture);
+      this.gesture = null;
+      for( const [p,val] of gs ) {
         if ( this.poseTarget.props.hasOwnProperty(p) ) {
-          this.poseTarget.props[p].copy(v);
+          this.poseTarget.props[p].copy( this.getPoseTemplateProp(p) );
           this.poseTarget.props[p].t = this.animClock;
-          this.poseTarget.props[p].d = 1000;
+          this.poseTarget.props[p].d = ms;
         }
       }
     }
 
-    // Restart pose animation
-    let anim = this.animQueue.find( x => x.template.name === 'pose' );
-    if ( anim ) {
-      anim.ts[0] = this.animClock;
+    // Stop animated emoji gesture, if any
+    let i = this.animQueue.findIndex( y => y.gesture );
+    if ( i !== -1 ) {
+      this.animQueue.splice(i, 1);
     }
-    this.setPoseFromTemplate( null );
 
   }
 
-
   /**
-  * Play RPM/Mixamo pose.
-  * @param {string|Object} url Pose name | URL to FBX
-  * @param {progressfn} [onprogress=null] Callback for progress
-  * @param {number} [dur=5] Duration of the pose in seconds
-  * @param {number} [ndx=0] Index of the clip
-  * @param {number} [scale=0.01] Position scale factor
+  * Cyclic Coordinate Descent (CCD) Inverse Kinematic (IK) algorithm.
+  * Adapted from:
+  * https://github.com/mrdoob/three.js/blob/master/examples/jsm/animation/CCDIKSolver.js
+  * @param {Object} ik IK configuration object
+  * @param {Vector3} [target=null] Target coordinate, if null return to template
+  * @param {Boolean} [relative=false] If true, target is relative to root
+  * @param {numeric} [d=null] If set, apply in d milliseconds
   */
-  async playPose(url, onprogress=null, dur=5, ndx=0, scale=0.01) {
-
-    if ( !this.armature ) return;
+  ikSolve(ik, target=null, relative=false, d=null) {
+    const targetVec = new THREE.Vector3();
+    const effectorPos = new THREE.Vector3();
+    const effectorVec = new THREE.Vector3();
+    const linkPos = new THREE.Vector3();
+    const invLinkQ = new THREE.Quaternion();
+    const linkScale = new THREE.Vector3();
+    const axis = new THREE.Vector3();
+    const vector = new THREE.Vector3();
 
-    // Check if we already have the pose template ready
-    let pose = this.poseTemplates[url];
-    if ( !pose ) {
-      const item = this.animPoses.find( x => x.url === url+'-'+ndx );
-      if ( item ) {
-        pose = item.pose;
-      }
+    // Reset IK setup positions and rotations
+    const root = this.ikMesh.getObjectByName(ik.root);
+    root.position.setFromMatrixPosition( this.armature.getObjectByName(ik.root).matrixWorld );
+    root.quaternion.setFromRotationMatrix( this.armature.getObjectByName(ik.root).matrixWorld );
+    if ( target && relative ) {
+      target.applyQuaternion(this.armature.quaternion).add( root.position );
     }
+    const effector = this.ikMesh.getObjectByName(ik.effector);
+    const links = ik.links;
+    links.forEach( x => {
+      x.bone = this.ikMesh.getObjectByName(x.link);
+      x.bone.quaternion.copy( this.getPoseTemplateProp(x.link+'.quaternion') );
+    });
+    root.updateMatrixWorld(true);
+    const iterations = ik.iterations || 10;
 
-    // If we have the template, use it, otherwise try to load it
-    if ( pose ) {
+    // Iterate
+    if ( target ) {
+      for ( let i = 0; i < iterations; i ++ ) {
+        let rotated = false;
+        for ( let j = 0, jl = links.length; j < jl; j++ ) {
+          const bone = links[j].bone;
+          bone.matrixWorld.decompose( linkPos, invLinkQ, linkScale );
+          invLinkQ.invert();
+          effectorPos.setFromMatrixPosition( effector.matrixWorld );
+          effectorVec.subVectors( effectorPos, linkPos );
+          effectorVec.applyQuaternion( invLinkQ );
+          effectorVec.normalize();
+          targetVec.subVectors( target, linkPos );
+          targetVec.applyQuaternion( invLinkQ );
+          targetVec.normalize();
+          let angle = targetVec.dot( effectorVec );
+          if ( angle > 1.0 ) {
+            angle = 1.0;
+          } else if ( angle < - 1.0 ) {
+            angle = - 1.0;
+          }
+          angle = Math.acos( angle );
+          if ( angle < 1e-5 ) continue;
+          if ( links[j].minAngle !== undefined && angle < links[j].minAngle ) {
+            angle = links[j].minAngle;
+          }
+          if ( links[j].maxAngle !== undefined && angle > links[j].maxAngle ) {
+            angle = links[j].maxAngle;
+          }
+          axis.crossVectors( effectorVec, targetVec );
+          axis.normalize();
+          q.setFromAxisAngle( axis, angle );
+          bone.quaternion.multiply( q );
 
-      this.poseName = url;
+          // Constraints
+          bone.rotation.setFromVector3( vector.setFromEuler( bone.rotation ).clamp( new THREE.Vector3(
+            links[j].minx !== undefined ? links[j].minx : -Infinity,
+            links[j].miny !== undefined ? links[j].miny : -Infinity,
+            links[j].minz !== undefined ? links[j].minz : -Infinity
+          ), new THREE.Vector3(
+            links[j].maxx !== undefined ? links[j].maxx : Infinity,
+            links[j].maxy !== undefined ? links[j].maxy : Infinity,
+            links[j].maxz !== undefined ? links[j].maxz : Infinity
+          )) );
 
-      this.mixer = null;
-      let anim = this.animQueue.find( x => x.template.name === 'pose' );
-      if ( anim ) {
-        anim.ts[0] = this.animClock + (dur * 1000) + 2000;
+          bone.updateMatrixWorld( true );
+          rotated = true;
+        }
+        if ( !rotated ) break;
       }
-      this.setPoseFromTemplate( pose );
-
-    } else {
-
-      // Load animation
-      const loader = new FBXLoader();
-
-      let fbx = await loader.loadAsync( url, onprogress );
+    }
 
-      if ( fbx && fbx.animations && fbx.animations[ndx] ) {
-        let anim = fbx.animations[ndx];
+    // Apply
+    if ( d ) {
+      links.forEach( x => {
+        this.poseTarget.props[x.link+".quaternion"].copy( x.bone.quaternion );
+        this.poseTarget.props[x.link+".quaternion"].t = this.animClock;
+        this.poseTarget.props[x.link+".quaternion"].d = d;
+      });
+    }
+  }
 
-        // Create a pose
-        const props = {};
-        anim.tracks.forEach( t => {
+  /**
+   * Initialize FBX animation loader
+   */
+  async initializeFBXAnimationLoader() {
+    try {
+      // Dynamic import to avoid loading issues
+      const { FBXAnimationLoader } = await import('./fbxAnimationLoader.js');
+      this.fbxAnimationLoader = new FBXAnimationLoader(this.armature);
+      console.log('FBX Animation Loader initialized');
+    } catch (error) {
+      console.warn('FBX Animation Loader not available:', error);
+      this.fbxAnimationLoader = null;
+    }
+  }
 
-          // Rename and scale Mixamo tracks
-          t.name = t.name.replaceAll('mixamorig','');
-          const ids = t.name.split('.');
-          if ( ids[1] === 'position' ) {
-            props[t.name] = new THREE.Vector3( t.values[0] * scale, t.values[1] * scale, t.values[2] * scale);
-          } else if ( ids[1] === 'quaternion' ) {
-            props[t.name] = new THREE.Quaternion( t.values[0], t.values[1], t.values[2], t.values[3] );
-          } else if ( ids[1] === 'rotation' ) {
-            props[ids[0]+".quaternion"] = new THREE.Quaternion().setFromEuler(new THREE.Euler( t.values[0], t.values[1], t.values[2],'XYZ' )).normalize();
-          }
-        });
+  /**
+   * Set body movement type.
+   * @param {string} movement Movement type (idle, walking, prancing, gesturing, dancing, excited).
+   */
+  setBodyMovement(movement) {
+    this.bodyMovement = movement;
+    
+    // Only set avatar property if avatar exists
+    if (this.avatar) {
+      this.avatar.bodyMovement = movement;
+    }
+    
+    console.log('Body movement set to:', movement);
+    
+    // Respect the current showFullAvatar setting instead of forcing it to true
+    // Only unlock position when returning to idle
+    if (movement === 'idle') {
+      // Unlock position when returning to idle
+      this.unlockAvatarPosition();
+    }
+    // Note: We no longer force showFullAvatar to true for body movements
+    // The avatar will use whatever showFullAvatar value was set by the user
+    
+    // Apply body movement animation
+    this.applyBodyMovementAnimation();
+  }
 
-        // Add to pose
-        const newPose = { props: props };
-        if ( props['Hips.position'] ) {
-          if ( props['Hips.position'].y < 0.5 ) {
-            newPose.lying = true;
-          } else {
-            newPose.standing = true;
-          }
+  /**
+   * Apply body movement animation based on current movement type.
+   */
+  async applyBodyMovementAnimation() {
+    // Check if avatar is ready
+    if (!this.armature || !this.animQueue) {
+      console.log('Avatar not ready for body movement animations');
+      return;
+    }
+    
+    console.log('Avatar is running:', this.isRunning);
+    console.log('Animation queue exists:', !!this.animQueue);
+    
+    // Remove existing body movement animations
+    const beforeLength = this.animQueue.length;
+    this.animQueue = this.animQueue.filter(anim => !anim.template.name.startsWith('bodyMovement'));
+    const afterLength = this.animQueue.length;
+    console.log(`Filtered animation queue: ${beforeLength} -> ${afterLength} animations`);
+    
+    if (this.bodyMovement === 'idle') {
+      // Stop FBX animations if any
+      if (this.fbxAnimationLoader) {
+        this.fbxAnimationLoader.stopCurrentAnimation();
+      }
+      return; // No body movement for idle
+    }
+    
+    // Try to use FBX animations first
+    if (this.fbxAnimationLoader) {
+      try {
+        await this.fbxAnimationLoader.playGestureAnimation(this.bodyMovement, this.movementIntensity);
+        console.log('Applied FBX body movement animation:', this.bodyMovement);
+        return; // Successfully applied FBX animation
+      } catch (error) {
+        console.warn('FBX animation failed, falling back to code animation:', error);
+      }
+    }
+    
+    // Fallback to code-based animations
+    const movementAnim = this.createBodyMovementAnimation(this.bodyMovement);
+    console.log('Created movement animation:', movementAnim);
+    if (movementAnim) {
+      try {
+        // Use animFactory to create proper animation object
+        const animObj = this.animFactory(movementAnim, true); // true for looping
+        
+        // Validate the animation object before adding
+        if (animObj && animObj.ts && animObj.ts.length > 0) {
+          this.animQueue.push(animObj);
+          console.log('Applied code-based body movement animation:', this.bodyMovement);
+          console.log('Animation queue length:', this.animQueue.length);
+          console.log('Animation object:', animObj);
+        } else {
+          console.error('Invalid animation object created for:', this.bodyMovement);
+          console.error('Animation object:', animObj);
         }
-        this.animPoses.push({
-          url: url+'-'+ndx,
-          pose: newPose
-        });
-
-        // Play
-        this.playPose(url, onprogress, dur, ndx, scale);
-
-      } else {
-        const msg = 'Pose ' + url + ' (ndx=' + ndx + ') not found';
-        console.error(msg);
+      } catch (error) {
+        console.error('Error creating body movement animation:', error);
       }
     }
   }
 
   /**
-  * Stop the pose. (Functionality is the same as in stopAnimation.)
-  */
-  stopPose() {
-    this.stopAnimation();
+   * Lock avatar position to prevent movement during animations.
+   */
+  lockAvatarPosition() {
+    if (!this.armature) {
+      console.warn('Cannot lock position: armature not available');
+      return;
+    }
+    
+    // Store the original position if not already stored
+    if (!this.originalPosition) {
+      this.originalPosition = {
+        x: this.armature.position.x,
+        y: this.armature.position.y,
+        z: this.armature.position.z
+      };
+      console.log('Original position stored:', this.originalPosition);
+    }
+    
+    // Lock the avatar at its CURRENT position (don't move it)
+    this.lockedPosition = {
+      x: this.armature.position.x,
+      y: this.armature.position.y,
+      z: this.armature.position.z
+    };
+    
+    console.log('Avatar position locked at current position:', this.lockedPosition);
   }
 
   /**
-  * Play a gesture, which is either a hand gesture, an emoji animation or their
-  * combination.
-  * @param {string} name Gesture name
-  * @param {number} [dur=3] Duration of the gesture in seconds
-  * @param {boolean} [mirror=false] Mirror gesture
-  * @param {number} [ms=1000] Transition time in milliseconds
-  */
-  playGesture(name, dur=3, mirror=false, ms=1000) {
-
-    if ( !this.armature ) return;
-
-    // Hand gesture, if any
-    let g = this.gestureTemplates[name];
-    if ( g ) {
-
-      // New gesture always overrides the existing one
-      if ( this.gestureTimeout ) {
-        clearTimeout( this.gestureTimeout );
-        this.gestureTimeout = null;
-      }
-
-      // Stop talking hands animation
-      let ndx = this.animQueue.findIndex( y => y.template.name === "talkinghands" );
-      if ( ndx !== -1 ) {
-        this.animQueue[ndx].ts = this.animQueue[ndx].ts.map( x => 0 );
-      }
+   * Unlock avatar position and restore original position.
+   */
+  unlockAvatarPosition() {
+    if (this.armature && this.originalPosition) {
+      // Restore avatar to its original position before locking
+      this.armature.position.set(
+        this.originalPosition.x,
+        this.originalPosition.y,
+        this.originalPosition.z
+      );
+      console.log('Avatar position restored to original:', this.originalPosition);
+    } else if (this.armature) {
+      // Fallback: reset to center if no original position was stored
+      this.armature.position.set(0, 0, 0);
+      console.log('Avatar position reset to center (0,0,0)');
+    }
+    this.lockedPosition = null;
+    this.originalPosition = null; // Clear original position after unlock
+    console.log('Avatar position unlocked');
+  }
 
-      // Set gesture
-      this.gesture = this.propsToThreeObjects( g );
-      if ( mirror ) {
-        this.gesture = this.mirrorPose( this.gesture );
-      }
-      if ( name === "namaste" && this.avatar.body === 'M' ) {
-        // Work-a-round for male model so that the hands meet
-        this.gesture["RightArm.quaternion"].rotateTowards( new THREE.Quaternion(0,1,0,0), -0.25);
-        this.gesture["LeftArm.quaternion"].rotateTowards( new THREE.Quaternion(0,1,0,0), -0.25);
-      }
+  /**
+   * Ensure avatar stays at locked position.
+   */
+  maintainLockedPosition() {
+    if (this.lockedPosition && this.armature) {
+      // Enforce the locked position - keep avatar exactly where it was locked
+      // This prevents FBX animations from moving the avatar
+        this.armature.position.set(
+          this.lockedPosition.x,
+        this.lockedPosition.y,
+          this.lockedPosition.z
+        );
+    }
+  }
 
-      // Apply to target
-      for( let [p,val] of Object.entries(this.gesture) ) {
-        val.t = this.animClock;
-        val.d = ms;
-        if ( this.poseTarget.props.hasOwnProperty(p) ) {
-          this.poseTarget.props[p].copy(val);
-          this.poseTarget.props[p].t = this.animClock;
-          this.poseTarget.props[p].d = ms;
+  /**
+   * Create body movement animation.
+   * @param {string} movementType Movement type.
+   * @returns {Object} Animation object.
+   */
+  createBodyMovementAnimation(movementType) {
+    const intensity = this.movementIntensity || 0.5;
+    
+    const movementAnimations = {
+      walking: {
+        name: 'bodyMovement_walking',
+        delay: [500, 2000],
+        dt: [800, 1200],
+        vs: {
+          bodyRotateY: [-0.1 * intensity, 0.1 * intensity, 0],
+          bodyRotateZ: [-0.05 * intensity, 0.05 * intensity, 0],
+          bodyRotateX: [-0.02 * intensity, 0.02 * intensity, 0]
+        }
+      },
+      prancing: {
+        name: 'bodyMovement_prancing',
+        delay: [300, 1000],
+        dt: [400, 800],
+        vs: {
+          bodyRotateY: [-0.15 * intensity, 0.15 * intensity, 0],
+          bodyRotateZ: [-0.08 * intensity, 0.08 * intensity, 0],
+          bodyRotateX: [-0.05 * intensity, 0.05 * intensity, 0]
+        }
+      },
+      gesturing: {
+        name: 'bodyMovement_gesturing',
+        delay: [400, 1500],
+        dt: [600, 1000],
+        vs: {
+          bodyRotateY: [-0.08 * intensity, 0.08 * intensity, 0],
+          bodyRotateZ: [-0.03 * intensity, 0.03 * intensity, 0]
+        }
+      },
+      dancing: {
+        name: 'bodyMovement_dancing',
+        delay: [200, 600],
+        dt: [400, 800],
+        vs: {
+          bodyRotateY: [-0.25 * intensity, 0.25 * intensity, 0],
+          bodyRotateZ: [-0.15 * intensity, 0.15 * intensity, 0],
+          bodyRotateX: [-0.1 * intensity, 0.1 * intensity, 0]
+        }
+      },
+      dancing2: {
+        name: 'bodyMovement_dancing2',
+        delay: [150, 500],
+        dt: [300, 700],
+        vs: {
+          bodyRotateY: [-0.3 * intensity, 0.3 * intensity, 0],
+          bodyRotateZ: [-0.2 * intensity, 0.2 * intensity, 0],
+          bodyRotateX: [-0.12 * intensity, 0.12 * intensity, 0]
+        }
+      },
+      dancing3: {
+        name: 'bodyMovement_dancing3',
+        delay: [100, 400],
+        dt: [200, 600],
+        vs: {
+          bodyRotateY: [-0.35 * intensity, 0.35 * intensity, 0],
+          bodyRotateZ: [-0.25 * intensity, 0.25 * intensity, 0],
+          bodyRotateX: [-0.15 * intensity, 0.15 * intensity, 0]
+        }
+      },
+      excited: {
+        name: 'bodyMovement_excited',
+        delay: [200, 600],
+        dt: [300, 700],
+        vs: {
+          bodyRotateY: [-0.12 * intensity, 0.12 * intensity, 0],
+          bodyRotateZ: [-0.06 * intensity, 0.06 * intensity, 0],
+          bodyRotateX: [-0.04 * intensity, 0.04 * intensity, 0]
+        }
+      },
+      happy: {
+        name: 'bodyMovement_happy',
+        delay: [300, 800],
+        dt: [500, 1000],
+        vs: {
+          bodyRotateY: [-0.08 * intensity, 0.08 * intensity, 0],
+          bodyRotateZ: [-0.04 * intensity, 0.04 * intensity, 0],
+          bodyRotateX: [-0.02 * intensity, 0.02 * intensity, 0]
+        }
+      },
+      surprised: {
+        name: 'bodyMovement_surprised',
+        delay: [100, 300],
+        dt: [200, 500],
+        vs: {
+          bodyRotateY: [-0.05 * intensity, 0.05 * intensity, 0],
+          bodyRotateZ: [-0.03 * intensity, 0.03 * intensity, 0],
+          bodyRotateX: [-0.01 * intensity, 0.01 * intensity, 0]
+        }
+      },
+      thinking: {
+        name: 'bodyMovement_thinking',
+        delay: [800, 2000],
+        dt: [1000, 1500],
+        vs: {
+          bodyRotateY: [-0.06 * intensity, 0.06 * intensity, 0],
+          bodyRotateZ: [-0.03 * intensity, 0.03 * intensity, 0],
+          bodyRotateX: [-0.02 * intensity, 0.02 * intensity, 0]
+        }
+      },
+      nodding: {
+        name: 'bodyMovement_nodding',
+        delay: [400, 800],
+        dt: [300, 600],
+        vs: {
+          bodyRotateX: [-0.1 * intensity, 0.1 * intensity, 0],
+          bodyRotateY: [-0.02 * intensity, 0.02 * intensity, 0]
+        }
+      },
+      shaking: {
+        name: 'bodyMovement_shaking',
+        delay: [200, 400],
+        dt: [150, 300],
+        vs: {
+          bodyRotateY: [-0.15 * intensity, 0.15 * intensity, 0],
+          bodyRotateZ: [-0.05 * intensity, 0.05 * intensity, 0]
         }
-      }
-
-      // Timer
-      if ( dur && Number.isFinite(dur) ) {
-        this.gestureTimeout = setTimeout( this.stopGesture.bind(this,ms), 1000 * dur);
-      }
-    }
-
-    // Animated emoji, if any
-    let em = this.animEmojis[name];
-    if ( em ) {
-
-      // Follow link
-      if ( em && em.link ) {
-        em = this.animEmojis[em.link];
-      }
-
-      if ( em ) {
-        // Look at the camera for 500 ms
-        this.lookAtCamera(500);
-
-        // Create animation and tag as gesture
-        const anim = this.animFactory( em );
-        anim.gesture = true;
-
-        // Rescale duration
-        if ( dur && Number.isFinite(dur) ) {
-          const first = anim.ts[0];
-          const last = anim.ts[ anim.ts.length -1 ];
-          const total = last - first;
-          const excess = (dur * 1000) - total;
-
-          // If longer, increase longer parts; if shorter, scale everything
-          if ( excess > 0 ) {
-            const dt = [];
-            for( let i=1; i<anim.ts.length; i++ ) dt.push( anim.ts[i] - anim.ts[i-1] );
-            const rescale = em.template?.rescale || dt.map( x => x / total );
-            const excess = dur * 1000 - total;
-            anim.ts = anim.ts.map( (x,i,arr) => {
-              return (i===0) ? first : (arr[i-1] + dt[i-1] + rescale[i-1] * excess);
-            });
-          } else {
-            const scale = (dur * 1000) / total;
-            anim.ts = anim.ts.map( x => first + scale * (x - first) );
-          }
+      },
+      celebration: {
+        name: 'bodyMovement_celebration',
+        delay: [100, 300],
+        dt: [200, 500],
+        vs: {
+          bodyRotateY: [-0.2 * intensity, 0.2 * intensity, 0],
+          bodyRotateZ: [-0.1 * intensity, 0.1 * intensity, 0],
+          bodyRotateX: [-0.08 * intensity, 0.08 * intensity, 0]
         }
-
-        this.animQueue.push( anim );
-      }
-    }
-
-  }
-
-  /**
-  * Stop the gesture.
-  * @param {number} [ms=1000] Transition time in milliseconds
-  */
-  stopGesture(ms=1000) {
-
-    // Stop gesture timer
-    if ( this.gestureTimeout ) {
-      clearTimeout( this.gestureTimeout );
-      this.gestureTimeout = null;
-    }
-
-    // Stop hand gesture, if any
-    if ( this.gesture ) {
-      const gs = Object.entries(this.gesture);
-      this.gesture = null;
-      for( const [p,val] of gs ) {
-        if ( this.poseTarget.props.hasOwnProperty(p) ) {
-          this.poseTarget.props[p].copy( this.getPoseTemplateProp(p) );
-          this.poseTarget.props[p].t = this.animClock;
-          this.poseTarget.props[p].d = ms;
+      },
+      energetic: {
+        name: 'bodyMovement_energetic',
+        delay: [150, 400],
+        dt: [250, 500],
+        vs: {
+          bodyRotateY: [-0.18 * intensity, 0.18 * intensity, 0],
+          bodyRotateZ: [-0.12 * intensity, 0.12 * intensity, 0],
+          bodyRotateX: [-0.08 * intensity, 0.08 * intensity, 0]
+        }
+      },
+      swaying: {
+        name: 'bodyMovement_swaying',
+        delay: [600, 1200],
+        dt: [800, 1000],
+        vs: {
+          bodyRotateY: [-0.1 * intensity, 0.1 * intensity, 0],
+          bodyRotateZ: [-0.05 * intensity, 0.05 * intensity, 0]
+        }
+      },
+      bouncing: {
+        name: 'bodyMovement_bouncing',
+        delay: [300, 600],
+        dt: [400, 700],
+        vs: {
+          bodyRotateY: [-0.05 * intensity, 0.05 * intensity, 0]
         }
       }
+    };
+    
+    // Handle dance variations
+    if (movementType === 'dancing') {
+      const danceVariations = ['dancing', 'dancing2', 'dancing3'];
+      const randomDance = danceVariations[Math.floor(Math.random() * danceVariations.length)];
+      return movementAnimations[randomDance] || movementAnimations['dancing'];
     }
-
-    // Stop animated emoji gesture, if any
-    let i = this.animQueue.findIndex( y => y.gesture );
-    if ( i !== -1 ) {
-      this.animQueue.splice(i, 1);
-    }
-
+    
+    return movementAnimations[movementType] || null;
   }
 
   /**
-  * Cyclic Coordinate Descent (CCD) Inverse Kinematic (IK) algorithm.
-  * Adapted from:
-  * https://github.com/mrdoob/three.js/blob/master/examples/jsm/animation/CCDIKSolver.js
-  * @param {Object} ik IK configuration object
-  * @param {Vector3} [target=null] Target coordinate, if null return to template
-  * @param {Boolean} [relative=false] If true, target is relative to root
-  * @param {numeric} [d=null] If set, apply in d milliseconds
-  */
-  ikSolve(ik, target=null, relative=false, d=null) {
-    const targetVec = new THREE.Vector3();
-    const effectorPos = new THREE.Vector3();
-    const effectorVec = new THREE.Vector3();
-    const linkPos = new THREE.Vector3();
-    const invLinkQ = new THREE.Quaternion();
-    const linkScale = new THREE.Vector3();
-    const axis = new THREE.Vector3();
-    const vector = new THREE.Vector3();
-
-    // Reset IK setup positions and rotations
-    const root = this.ikMesh.getObjectByName(ik.root);
-    root.position.setFromMatrixPosition( this.armature.getObjectByName(ik.root).matrixWorld );
-    root.quaternion.setFromRotationMatrix( this.armature.getObjectByName(ik.root).matrixWorld );
-    if ( target && relative ) {
-      target.applyQuaternion(this.armature.quaternion).add( root.position );
+   * Set movement intensity.
+   * @param {number} intensity Movement intensity (0-1).
+   */
+  setMovementIntensity(intensity) {
+    this.movementIntensity = Math.max(0, Math.min(1, intensity));
+    
+    // Only set avatar property if avatar exists
+    if (this.avatar) {
+      this.avatar.movementIntensity = this.movementIntensity;
     }
-    const effector = this.ikMesh.getObjectByName(ik.effector);
-    const links = ik.links;
-    links.forEach( x => {
-      x.bone = this.ikMesh.getObjectByName(x.link);
-      x.bone.quaternion.copy( this.getPoseTemplateProp(x.link+'.quaternion') );
-    });
-    root.updateMatrixWorld(true);
-    const iterations = ik.iterations || 10;
-
-    // Iterate
-    if ( target ) {
-      for ( let i = 0; i < iterations; i ++ ) {
-        let rotated = false;
-        for ( let j = 0, jl = links.length; j < jl; j++ ) {
-          const bone = links[j].bone;
-          bone.matrixWorld.decompose( linkPos, invLinkQ, linkScale );
-          invLinkQ.invert();
-          effectorPos.setFromMatrixPosition( effector.matrixWorld );
-          effectorVec.subVectors( effectorPos, linkPos );
-          effectorVec.applyQuaternion( invLinkQ );
-          effectorVec.normalize();
-          targetVec.subVectors( target, linkPos );
-          targetVec.applyQuaternion( invLinkQ );
-          targetVec.normalize();
-          let angle = targetVec.dot( effectorVec );
-          if ( angle > 1.0 ) {
-            angle = 1.0;
-          } else if ( angle < - 1.0 ) {
-            angle = - 1.0;
-          }
-          angle = Math.acos( angle );
-          if ( angle < 1e-5 ) continue;
-          if ( links[j].minAngle !== undefined && angle < links[j].minAngle ) {
-            angle = links[j].minAngle;
-          }
-          if ( links[j].maxAngle !== undefined && angle > links[j].maxAngle ) {
-            angle = links[j].maxAngle;
-          }
-          axis.crossVectors( effectorVec, targetVec );
-          axis.normalize();
-          q.setFromAxisAngle( axis, angle );
-          bone.quaternion.multiply( q );
-
-          // Constraints
-          bone.rotation.setFromVector3( vector.setFromEuler( bone.rotation ).clamp( new THREE.Vector3(
-            links[j].minx !== undefined ? links[j].minx : -Infinity,
-            links[j].miny !== undefined ? links[j].miny : -Infinity,
-            links[j].minz !== undefined ? links[j].minz : -Infinity
-          ), new THREE.Vector3(
-            links[j].maxx !== undefined ? links[j].maxx : Infinity,
-            links[j].maxy !== undefined ? links[j].maxy : Infinity,
-            links[j].maxz !== undefined ? links[j].maxz : Infinity
-          )) );
-
-          bone.updateMatrixWorld( true );
-          rotated = true;
-        }
-        if ( !rotated ) break;
-      }
+    
+    console.log('Movement intensity set to:', this.movementIntensity);
+    
+    // Update FBX animation intensity if available
+    if (this.fbxAnimationLoader) {
+      this.fbxAnimationLoader.setIntensity(this.movementIntensity);
     }
-
-    // Apply
-    if ( d ) {
-      links.forEach( x => {
-        this.poseTarget.props[x.link+".quaternion"].copy( x.bone.quaternion );
-        this.poseTarget.props[x.link+".quaternion"].t = this.animClock;
-        this.poseTarget.props[x.link+".quaternion"].d = d;
-      });
+    
+    // Reapply body movement animation with new intensity
+    if (this.bodyMovement && this.bodyMovement !== 'idle') {
+      this.applyBodyMovementAnimation();
     }
   }
 
@@ -6205,11 +5471,36 @@ class TalkingHead {
   */
   dispose() {
     
-    // Stop animation first to prevent render calls on disposed renderer
-    this.isRunning = false;
+    // Stop animation, clear speech queue, stop stream
     this.stop();
     this.stopSpeaking();
     this.streamStop();
+    this.stopAnimation();
+
+    // Cancel animation frame to prevent potential memory leak
+    if (this._raf !== null) {
+      cancelAnimationFrame(this._raf);
+      this._raf = null;
+    }
+
+    // Stop & disconnect buffer sources
+    ['audioSpeechSource', 'audioBackgroundSource'].forEach(key => {
+      const node = this[key];
+      if (node) {
+        try { node.stop?.() } catch(error) {};
+        node.disconnect();
+        node.onended = null; // remove closure references
+      }
+    });
+
+    // Disconnect gain nodes & analyser
+    ['audioBackgroundGainNode', 'audioSpeechGainNode',
+      'audioStreamGainNode', 'audioAnalyzerNode'].forEach(key => {
+      const node = this[key];
+      if (node) {
+        node.disconnect();
+      }
+    });
 
     // Dispose Three.JS objects
     if ( this.isAvatarOnly ) {
@@ -6222,18 +5513,34 @@ class TalkingHead {
     } else {
       this.clearThree(this.scene);
       this.resizeobserver.disconnect();
-      
-      // Dispose WebGL renderer
+      this.resizeobserver = null;
+
       if ( this.renderer ) {
         this.renderer.dispose();
-        if ( this.renderer.domElement && this.renderer.domElement.parentNode ) {
-          this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);
-        }
+        const gl = this.renderer.getContext();
+        gl.getExtension('WEBGL_lose_context')?.loseContext();
+        this.renderer.domElement?.remove();
+        this.renderer.domElement = null;
         this.renderer = null;
       }
+
+      if ( this.controls ) {
+        this.controls.dispose();
+        this.controls = null;
+      }
     }
+
     this.clearThree( this.ikMesh );
     this.dynamicbones.dispose();
+    
+    // Clean up FBX animation loader
+    if (this.fbxAnimationLoader) {
+      this.fbxAnimationLoader.stopCurrentAnimation();
+      this.fbxAnimationLoader = null;
+    }
+
+    // DOM
+    this.nodeAvatar = null;
 
   }