@sage-rsc/talking-head-react 1.4.8 → 1.5.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs as Pe, jsx as ye } from "react/jsx-runtime";
-import { forwardRef as Me, useRef as W, useState as pe, useEffect as ce, useCallback as O, useImperativeHandle as Fe, useLayoutEffect as Xe } from "react";
+import { forwardRef as Me, useRef as W, useState as pe, useEffect as ce, useCallback as O, useImperativeHandle as Fe, useLayoutEffect as Ze } from "react";
 import * as y from "three";
 import { OrbitControls as je } from "three/addons/controls/OrbitControls.js";
 import { GLTFLoader as Ye } from "three/addons/loaders/GLTFLoader.js";
@@ -2629,7 +2629,7 @@ const ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   fr: rt,
   fi: ut,
   lt: ct
-}, $ = new y.Quaternion(), Z = new y.Euler(), ve = new y.Vector3(), Re = new y.Vector3(), We = new y.Box3();
+}, $ = new y.Quaternion(), X = new y.Euler(), ve = new y.Vector3(), Re = new y.Vector3(), We = new y.Box3();
 new y.Matrix4();
 new y.Matrix4();
 new y.Vector3();
@@ -4418,16 +4418,16 @@ class Be {
     if (!this.armature) return;
     const t = this.armature.getObjectByName("LeftShoulder"), e = this.armature.getObjectByName("RightShoulder");
     if (!t || !e) return;
-    const n = new y.Euler(), i = new y.Quaternion(), s = 0.6, o = 0.7;
+    const n = new y.Euler(), i = new y.Quaternion(), o = this.mixer && this.currentFBXAction && this.currentFBXAction.isRunning() ? 0.5 : 0.6, l = 0.7;
     if (t.quaternion) {
       n.setFromQuaternion(t.quaternion, "XYZ");
-      const l = n.x;
-      n.x > o ? n.x = s : n.x > s && (n.x = s + (n.x - s) * 0.2), Math.abs(n.x - l) > 0.01 && (i.setFromEuler(n, "XYZ"), t.quaternion.copy(i), t.updateMatrixWorld(!0));
+      const h = n.x;
+      n.x > l ? n.x = l + (n.x - l) * (1 - o) : n.x > 0.5 && (n.x = n.x * (1 - o * 0.5)), Math.abs(n.x - h) > 0.01 && (i.setFromEuler(n, "XYZ"), t.quaternion.copy(i), t.updateMatrixWorld(!0));
     }
     if (e.quaternion) {
       n.setFromQuaternion(e.quaternion, "XYZ");
-      const l = n.x;
-      n.x > o ? n.x = s : n.x > s && (n.x = s + (n.x - s) * 0.2), Math.abs(n.x - l) > 0.01 && (i.setFromEuler(n, "XYZ"), e.quaternion.copy(i), e.updateMatrixWorld(!0));
+      const h = n.x;
+      n.x > l ? n.x = l + (n.x - l) * (1 - o) : n.x > 0.5 && (n.x = n.x * (1 - o * 0.5)), Math.abs(n.x - h) > 0.01 && (i.setFromEuler(n, "XYZ"), e.quaternion.copy(i), e.updateMatrixWorld(!0));
     }
   }
   /**
@@ -4436,9 +4436,9 @@ class Be {
   updatePoseDelta() {
     for (const [t, e] of Object.entries(this.poseDelta.props)) {
       if (e.x === 0 && e.y === 0 && e.z === 0) continue;
-      Z.set(e.x, e.y, e.z);
+      X.set(e.x, e.y, e.z);
       const n = this.poseAvatar.props[t];
-      n.isQuaternion ? ($.setFromEuler(Z), n.multiply($)) : n.isVector3 && n.add(Z);
+      n.isQuaternion ? ($.setFromEuler(X), n.multiply($)) : n.isVector3 && n.add(X);
     }
   }
   /**
@@ -5210,7 +5210,7 @@ class Be {
           }, i.x ? new y.Vector3(i.x, i.y, i.z) : null, !0, i.d);
           break;
       }
-    if ((h || r) && (Z.setFromQuaternion(this.poseAvatar.props["Head.quaternion"]), Z.x = Math.max(-0.9, Math.min(0.9, 2 * Z.x - 0.5)), Z.y = Math.max(-0.9, Math.min(0.9, -2.5 * Z.y)), h ? (Object.assign(this.mtAvatar.eyesLookDown, { system: Z.x < 0 ? -Z.x : 0, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyesLookUp, { system: Z.x < 0 ? 0 : Z.x, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyeLookInLeft, { system: Z.y < 0 ? -Z.y : 0, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyeLookOutLeft, { system: Z.y < 0 ? 0 : Z.y, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyeLookInRight, { system: Z.y < 0 ? 0 : Z.y, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyeLookOutRight, { system: Z.y < 0 ? -Z.y : 0, needsUpdate: !0 }), r && (n = -this.mtAvatar.bodyRotateY.value, i = this.gaussianRandom(-0.2, 0.2), this.animQueue.push(this.animFactory({
+    if ((h || r) && (X.setFromQuaternion(this.poseAvatar.props["Head.quaternion"]), X.x = Math.max(-0.9, Math.min(0.9, 2 * X.x - 0.5)), X.y = Math.max(-0.9, Math.min(0.9, -2.5 * X.y)), h ? (Object.assign(this.mtAvatar.eyesLookDown, { system: X.x < 0 ? -X.x : 0, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyesLookUp, { system: X.x < 0 ? 0 : X.x, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyeLookInLeft, { system: X.y < 0 ? -X.y : 0, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyeLookOutLeft, { system: X.y < 0 ? 0 : X.y, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyeLookInRight, { system: X.y < 0 ? 0 : X.y, needsUpdate: !0 }), Object.assign(this.mtAvatar.eyeLookOutRight, { system: X.y < 0 ? -X.y : 0, needsUpdate: !0 }), r && (n = -this.mtAvatar.bodyRotateY.value, i = this.gaussianRandom(-0.2, 0.2), this.animQueue.push(this.animFactory({
       name: "headmove",
       dt: [[1e3, 2e3], [1e3, 2e3, 1, 2], [1e3, 2e3], [1e3, 2e3, 1, 2]],
       vs: {
@@ -6199,10 +6199,10 @@ class Be {
     }
     this.objectLeftEye.updateMatrixWorld(!0), this.objectRightEye.updateMatrixWorld(!0), ve.setFromMatrixPosition(this.objectLeftEye.matrixWorld), Re.setFromMatrixPosition(this.objectRightEye.matrixWorld), ve.add(Re).divideScalar(2), $.copy(this.armature.quaternion), $.multiply(this.poseTarget.props["Hips.quaternion"]), $.multiply(this.poseTarget.props["Spine.quaternion"]), $.multiply(this.poseTarget.props["Spine1.quaternion"]), $.multiply(this.poseTarget.props["Spine2.quaternion"]), $.multiply(this.poseTarget.props["Neck.quaternion"]), $.multiply(this.poseTarget.props["Head.quaternion"]);
     const n = new y.Vector3().subVectors(e, ve).normalize(), i = Math.atan2(n.x, n.z), s = Math.asin(-n.y);
-    Z.set(s, i, 0, "YXZ");
-    const l = new y.Quaternion().setFromEuler(Z), h = new y.Quaternion().copy(l).multiply($.clone().invert());
-    Z.setFromQuaternion(h, "YXZ");
-    let r = Z.x / (40 / 24) + 0.2, u = Z.y / (9 / 4), a = Math.min(0.6, Math.max(-0.3, r)), d = Math.min(0.8, Math.max(-0.8, u)), c = (Math.random() - 0.5) / 4, g = (Math.random() - 0.5) / 4;
+    X.set(s, i, 0, "YXZ");
+    const l = new y.Quaternion().setFromEuler(X), h = new y.Quaternion().copy(l).multiply($.clone().invert());
+    X.setFromQuaternion(h, "YXZ");
+    let r = X.x / (40 / 24) + 0.2, u = X.y / (9 / 4), a = Math.min(0.6, Math.max(-0.3, r)), d = Math.min(0.8, Math.max(-0.8, u)), c = (Math.random() - 0.5) / 4, g = (Math.random() - 0.5) / 4;
     if (t) {
       let x = this.animQueue.findIndex((k) => k.template.name === "lookat");
       x !== -1 && this.animQueue.splice(x, 1);
@@ -6237,8 +6237,8 @@ class Be {
     const s = new y.Vector3().setFromMatrixPosition(this.objectLeftEye.matrixWorld), o = new y.Vector3().setFromMatrixPosition(this.objectRightEye.matrixWorld), l = new y.Vector3().addVectors(s, o).divideScalar(2);
     l.project(this.camera);
     let h = (l.x + 1) / 2 * i.width + i.left, r = -(l.y - 1) / 2 * i.height + i.top;
-    t === null && (t = h), e === null && (e = r), $.copy(this.armature.quaternion), $.multiply(this.poseTarget.props["Hips.quaternion"]), $.multiply(this.poseTarget.props["Spine.quaternion"]), $.multiply(this.poseTarget.props["Spine1.quaternion"]), $.multiply(this.poseTarget.props["Spine2.quaternion"]), $.multiply(this.poseTarget.props["Neck.quaternion"]), $.multiply(this.poseTarget.props["Head.quaternion"]), Z.setFromQuaternion($);
-    let u = Z.x / (40 / 24), a = Z.y / (9 / 4), d = Math.min(0.4, Math.max(-0.4, this.camera.rotation.x)), c = Math.min(0.4, Math.max(-0.4, this.camera.rotation.y)), g = Math.max(window.innerWidth - h, h), x = Math.max(window.innerHeight - r, r), f = this.convertRange(e, [r - x, r + x], [-0.3, 0.6]) - u + d, k = this.convertRange(t, [h - g, h + g], [-0.8, 0.8]) - a + c;
+    t === null && (t = h), e === null && (e = r), $.copy(this.armature.quaternion), $.multiply(this.poseTarget.props["Hips.quaternion"]), $.multiply(this.poseTarget.props["Spine.quaternion"]), $.multiply(this.poseTarget.props["Spine1.quaternion"]), $.multiply(this.poseTarget.props["Spine2.quaternion"]), $.multiply(this.poseTarget.props["Neck.quaternion"]), $.multiply(this.poseTarget.props["Head.quaternion"]), X.setFromQuaternion($);
+    let u = X.x / (40 / 24), a = X.y / (9 / 4), d = Math.min(0.4, Math.max(-0.4, this.camera.rotation.x)), c = Math.min(0.4, Math.max(-0.4, this.camera.rotation.y)), g = Math.max(window.innerWidth - h, h), x = Math.max(window.innerHeight - r, r), f = this.convertRange(e, [r - x, r + x], [-0.3, 0.6]) - u + d, k = this.convertRange(t, [h - g, h + g], [-0.8, 0.8]) - a + c;
     f = Math.min(0.6, Math.max(-0.3, f)), k = Math.min(0.8, Math.max(-0.8, k));
     let D = (Math.random() - 0.5) / 4, p = (Math.random() - 0.5) / 4;
     if (n) {
@@ -6581,8 +6581,8 @@ class Be {
         if (d.tracks.forEach((L) => {
           const z = L.name.replaceAll("mixamorig", "").split("."), Y = z[0], S = z[1], E = x(Y);
           if (E && S) {
-            const j = `${E}.${S}`, X = L.clone();
-            X.name = j, p.push(X), Y !== E && g.set(Y, E);
+            const j = `${E}.${S}`, Z = L.clone();
+            Z.name = j, p.push(Z), Y !== E && g.set(Y, E);
           } else
             B.add(Y), (Y.toLowerCase().includes("arm") || Y.toLowerCase().includes("hand") || Y.toLowerCase().includes("shoulder")) && console.warn(`⚠️ Arm bone "${Y}" could not be mapped to avatar skeleton`);
         }), B.size > 0 && console.warn(`⚠️ ${B.size} bone(s) could not be mapped:`, Array.from(B).sort().join(", ")), p.length > 0) {
@@ -6853,7 +6853,7 @@ const Ve = Me(({
   style: x = {},
   animations: f = {}
 }, k) => {
-  const D = W(null), p = W(null), B = W(r), T = W(null), R = W(null), L = W(!1), I = W({ remainingText: null, originalText: null, options: null }), z = W([]), Y = W(0), [S, E] = pe(!0), [j, X] = pe(null), [oe, le] = pe(!1), [ge, de] = pe(!1);
+  const D = W(null), p = W(null), B = W(r), T = W(null), R = W(null), L = W(!1), I = W({ remainingText: null, originalText: null, options: null }), z = W([]), Y = W(0), [S, E] = pe(!0), [j, Z] = pe(null), [oe, le] = pe(!1), [ge, de] = pe(!1);
   ce(() => {
     L.current = ge;
   }, [ge]), ce(() => {
@@ -6902,7 +6902,7 @@ const Ve = Me(({
   }, F = O(async () => {
     if (!(!D.current || p.current))
       try {
-        if (E(!0), X(null), p.current = new Be(D.current, v), p.current.controls && (p.current.controls.enableRotate = !1, p.current.controls.enableZoom = !1, p.current.controls.enablePan = !1, p.current.controls.enableDamping = !1), f && Object.keys(f).length > 0 && (p.current.customAnimations = f), await p.current.showAvatar(b, (K) => {
+        if (E(!0), Z(null), p.current = new Be(D.current, v), p.current.controls && (p.current.controls.enableRotate = !1, p.current.controls.enableZoom = !1, p.current.controls.enablePan = !1, p.current.controls.enableDamping = !1), f && Object.keys(f).length > 0 && (p.current.customAnimations = f), await p.current.showAvatar(b, (K) => {
           if (K.lengthComputable) {
             const ne = Math.min(100, Math.round(K.loaded / K.total * 100));
             d(ne);
@@ -6926,7 +6926,7 @@ const Ve = Me(({
           document.removeEventListener("visibilitychange", U);
         };
       } catch (w) {
-        console.error("Error initializing TalkingHead:", w), X(w.message || "Failed to initialize avatar"), E(!1), c(w);
+        console.error("Error initializing TalkingHead:", w), Z(w.message || "Failed to initialize avatar"), E(!1), c(w);
       }
   }, [V, t, e, n, i, s, o, r, l, h, u]);
   ce(() => (F(), () => {
@@ -6987,8 +6987,8 @@ const Ve = Me(({
                 ie = !0, H && (clearInterval(H), H = null, R.current = null);
                 try {
                   U.onSpeechEnd();
-                } catch (Ze) {
-                  console.error("Error in onSpeechEnd callback:", Ze);
+                } catch (Xe) {
+                  console.error("Error in onSpeechEnd callback:", Xe);
                 }
               }
             }, 100);
@@ -6998,7 +6998,7 @@ const Ve = Me(({
           await P(), p.current && p.current.lipsync && (p.current.setSlowdownRate && p.current.setSlowdownRate(1.05), p.current.speakText(w, me));
         }, 100);
       } catch (K) {
-        console.error("Error speaking text:", K), X(K.message || "Failed to speak text");
+        console.error("Error speaking text:", K), Z(K.message || "Failed to speak text");
       }
   }, [oe, P, b.lipsyncLang]), te = O(() => {
     p.current && (p.current.stopSpeaking(), p.current.setSlowdownRate && p.current.setSlowdownRate(1), T.current = null, de(!1));
@@ -7255,20 +7255,20 @@ const pt = Me(({
       try {
         if (a(!0), c(null), r.current = new Be(h.current, B), await r.current.showAvatar(p, (j) => {
           if (j.lengthComputable) {
-            const X = Math.min(100, Math.round(j.loaded / j.total * 100));
-            t(X);
+            const Z = Math.min(100, Math.round(j.loaded / j.total * 100));
+            t(Z);
           }
         }), r.current.morphs && r.current.morphs.length > 0) {
           const j = r.current.morphs[0].morphTargetDictionary;
           console.log("Available morph targets:", Object.keys(j));
-          const X = Object.keys(j).filter((oe) => oe.startsWith("viseme_"));
-          console.log("Viseme morph targets found:", X), X.length === 0 && (console.warn("No viseme morph targets found! Lip-sync will not work properly."), console.log("Expected viseme targets: viseme_aa, viseme_E, viseme_I, viseme_O, viseme_U, viseme_PP, viseme_SS, viseme_TH, viseme_DD, viseme_FF, viseme_kk, viseme_nn, viseme_RR, viseme_CH, viseme_sil"));
+          const Z = Object.keys(j).filter((oe) => oe.startsWith("viseme_"));
+          console.log("Viseme morph targets found:", Z), Z.length === 0 && (console.warn("No viseme morph targets found! Lip-sync will not work properly."), console.log("Expected viseme targets: viseme_aa, viseme_E, viseme_I, viseme_O, viseme_U, viseme_PP, viseme_SS, viseme_TH, viseme_DD, viseme_FF, viseme_kk, viseme_nn, viseme_RR, viseme_CH, viseme_sil"));
         }
         if (await new Promise((j) => {
-          const X = () => {
-            r.current.lipsync && Object.keys(r.current.lipsync).length > 0 ? (console.log("Lip-sync modules loaded:", Object.keys(r.current.lipsync)), j()) : (console.log("Waiting for lip-sync modules to load..."), setTimeout(X, 100));
+          const Z = () => {
+            r.current.lipsync && Object.keys(r.current.lipsync).length > 0 ? (console.log("Lip-sync modules loaded:", Object.keys(r.current.lipsync)), j()) : (console.log("Waiting for lip-sync modules to load..."), setTimeout(Z, 100));
           };
-          X();
+          Z();
         }), r.current && r.current.setShowFullAvatar)
           try {
             r.current.setShowFullAvatar(!0), console.log("Avatar initialized in full body mode");
@@ -7311,14 +7311,14 @@ const pt = Me(({
       if (r.current.setShowFullAvatar)
         try {
           r.current.setShowFullAvatar(!0);
-        } catch (X) {
-          console.warn("Error setting full body mode:", X);
+        } catch (Z) {
+          console.warn("Error setting full body mode:", Z);
         }
       if (S.includes("."))
         try {
           r.current.playAnimation(S, null, 10, 0, 0.01, E), console.log("Playing animation:", S);
-        } catch (X) {
-          console.log(`Failed to play ${S}:`, X);
+        } catch (Z) {
+          console.log(`Failed to play ${S}:`, Z);
           try {
             r.current.setBodyMovement("idle"), console.log("Fallback to idle animation");
           } catch (oe) {
@@ -7326,9 +7326,9 @@ const pt = Me(({
           }
         }
       else {
-        const X = [".fbx", ".glb", ".gltf"];
+        const Z = [".fbx", ".glb", ".gltf"];
         let oe = !1;
-        for (const le of X)
+        for (const le of Z)
           try {
             r.current.playAnimation(S + le, null, 10, 0, 0.01, E), console.log("Playing animation:", S + le), oe = !0;
             break;
@@ -7497,7 +7497,7 @@ const yt = Me(({
   // e.g., "idle" - will randomly select from this group when idle
   autoSpeak: T = !1
 }, R) => {
-  const L = W(null), I = W(null), z = W(u), Y = W(null), S = W(null), E = W(!1), j = W({ remainingText: null, originalText: null, options: null }), X = W([]), [oe, le] = pe(!0), [ge, de] = pe(null), [ee, be] = pe(!1), [Q, b] = pe(!1), [v, F] = pe(D), P = W(null);
+  const L = W(null), I = W(null), z = W(u), Y = W(null), S = W(null), E = W(!1), j = W({ remainingText: null, originalText: null, options: null }), Z = W([]), [oe, le] = pe(!0), [ge, de] = pe(null), [ee, be] = pe(!1), [Q, b] = pe(!1), [v, F] = pe(D), P = W(null);
   ce(() => {
     E.current = Q;
   }, [Q]), ce(() => {
@@ -7637,9 +7637,9 @@ const yt = Me(({
     }
     await Le();
     const G = H.animationGroup || p;
-    G && !H.skipAnimation ? (console.log(`🎬 Attempting to play animation from group: "${G}"`), console.log(`📊 Current avatarBody: "${e}", loadedAnimations:`, v), w(G)) : console.log(`⏭️ Skipping animation (group: ${G}, skipAnimation: ${H.skipAnimation})`), j.current = { remainingText: null, originalText: null, options: null }, X.current = [], Y.current = { text: A, options: H }, S.current && (clearInterval(S.current), S.current = null), b(!1), E.current = !1;
+    G && !H.skipAnimation ? (console.log(`🎬 Attempting to play animation from group: "${G}"`), console.log(`📊 Current avatarBody: "${e}", loadedAnimations:`, v), w(G)) : console.log(`⏭️ Skipping animation (group: ${G}, skipAnimation: ${H.skipAnimation})`), j.current = { remainingText: null, originalText: null, options: null }, Z.current = [], Y.current = { text: A, options: H }, S.current && (clearInterval(S.current), S.current = null), b(!1), E.current = !1;
     const J = A.split(/[.!?]+/).filter((se) => se.trim().length > 0);
-    X.current = J;
+    Z.current = J;
     const ie = {
       lipsyncLang: H.lipsyncLang || "en",
       onSpeechEnd: () => {
@@ -8021,7 +8021,7 @@ const ft = Me(({
       }), u.current && (u.current.setMood("happy"), u.current.setBodyMovement("idle"));
     } else
       k.current && k.current();
-  }, []), X = O(() => {
+  }, []), Z = O(() => {
     const b = R();
     let v = null;
     if (b?.avatar_script && b?.body) {
@@ -8242,11 +8242,11 @@ const ft = Me(({
       c.current && c.current();
     }, 10);
   }, [h, R]);
-  Xe(() => {
-    c.current = X, g.current = j, x.current = z, f.current = E, k.current = Y, D.current = S, p.current = oe;
+  Ze(() => {
+    c.current = Z, g.current = j, x.current = z, f.current = E, k.current = Y, D.current = S, p.current = oe;
   }), Fe(r, () => ({
     // Curriculum control methods
-    startTeaching: X,
+    startTeaching: Z,
     startQuestions: S,
     handleAnswerSelect: oe,
     handleCodeTestResult: le,
@@ -8310,7 +8310,7 @@ const ft = Me(({
     handleResize: () => u.current?.handleResize(),
     // Avatar readiness check (always returns current value)
     isAvatarReady: () => u.current?.isReady || !1
-  }), [X, S, oe, le, E, j, z, Y, ee, L, R]);
+  }), [Z, S, oe, le, E, j, z, Y, ee, L, R]);
   const Q = T.current || {
     avatarUrl: "/avatars/brunette.glb",
     avatarBody: "F",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.4.8",
+  "version": "1.5.0",
   "description": "A reusable React component for 3D talking avatars with lip-sync and text-to-speech",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/lib/talkinghead.mjs

@@ -1667,28 +1667,32 @@ class TalkingHead {
     const tempEuler = new THREE.Euler();
     const tempQuaternion = new THREE.Quaternion();
     
-    // Research-based relaxed shoulder rotation values
-    // Natural relaxed shoulders: X rotation ~0.5-0.7 radians (much lower for natural look)
-    // High/stiff shoulders: X rotation ~1.5-1.8 radians
-    // We aggressively clamp to a very relaxed position
-    const targetX = 0.6; // Target X rotation for relaxed, natural shoulders (radians) - lowered significantly
-    const maxX = 0.7; // Maximum allowed X rotation - lowered significantly
+    // Check if FBX animation is playing
+    const isFBXPlaying = this.mixer && this.currentFBXAction && this.currentFBXAction.isRunning();
+    
+    // Instead of forcing to a fixed value, reduce X rotation proportionally
+    // This maintains the relative relationship between shoulders and arms
+    // Natural relaxed shoulders: X rotation typically 0.3-0.6 radians
+    // High shoulders: X rotation > 0.8 radians
+    // We reduce high rotations by 40-50% to bring them down while maintaining arm relationships
+    const reductionFactor = isFBXPlaying ? 0.5 : 0.6; // Reduce by 50% during FBX, 40% otherwise
+    const maxAllowedX = 0.7; // Maximum allowed X rotation
     
     // Adjust left shoulder bone directly
     if (leftShoulderBone.quaternion) {
       tempEuler.setFromQuaternion(leftShoulderBone.quaternion, 'XYZ');
       const originalX = tempEuler.x;
       
-      // Aggressively clamp X rotation to relaxed position
-      if (tempEuler.x > maxX) {
-        // Force to target relaxed position
-        tempEuler.x = targetX;
-      } else if (tempEuler.x > targetX) {
-        // Smoothly reduce if slightly above target
-        tempEuler.x = targetX + (tempEuler.x - targetX) * 0.2; // More aggressive reduction
+      // Reduce X rotation proportionally if it's too high
+      if (tempEuler.x > maxAllowedX) {
+        // Reduce by percentage to maintain arm-shoulder relationship
+        tempEuler.x = maxAllowedX + (tempEuler.x - maxAllowedX) * (1 - reductionFactor);
+      } else if (tempEuler.x > 0.5) {
+        // Slight reduction for moderately high shoulders
+        tempEuler.x = tempEuler.x * (1 - reductionFactor * 0.5);
       }
       
-      // Only update if we actually changed something
+      // Only update if we changed something significantly
       if (Math.abs(tempEuler.x - originalX) > 0.01) {
         tempQuaternion.setFromEuler(tempEuler, 'XYZ');
         leftShoulderBone.quaternion.copy(tempQuaternion);
@@ -1701,16 +1705,16 @@ class TalkingHead {
       tempEuler.setFromQuaternion(rightShoulderBone.quaternion, 'XYZ');
       const originalX = tempEuler.x;
       
-      // Aggressively clamp X rotation to relaxed position
-      if (tempEuler.x > maxX) {
-        // Force to target relaxed position
-        tempEuler.x = targetX;
-      } else if (tempEuler.x > targetX) {
-        // Smoothly reduce if slightly above target
-        tempEuler.x = targetX + (tempEuler.x - targetX) * 0.2; // More aggressive reduction
+      // Reduce X rotation proportionally if it's too high
+      if (tempEuler.x > maxAllowedX) {
+        // Reduce by percentage to maintain arm-shoulder relationship
+        tempEuler.x = maxAllowedX + (tempEuler.x - maxAllowedX) * (1 - reductionFactor);
+      } else if (tempEuler.x > 0.5) {
+        // Slight reduction for moderately high shoulders
+        tempEuler.x = tempEuler.x * (1 - reductionFactor * 0.5);
       }
       
-      // Only update if we actually changed something
+      // Only update if we changed something significantly
       if (Math.abs(tempEuler.x - originalX) > 0.01) {
         tempQuaternion.setFromEuler(tempEuler, 'XYZ');
         rightShoulderBone.quaternion.copy(tempQuaternion);