@sage-rsc/talking-head-react 1.0.41 → 1.0.43

package/dist/index.js

@@ -2734,9 +2734,9 @@ class Se {
       cameraPanEnable: !1,
       cameraZoomEnable: !1,
       lightAmbientColor: 16777215,
-      lightAmbientIntensity: 2,
+      lightAmbientIntensity: 0.9,
       lightDirectColor: 8947882,
-      lightDirectIntensity: 30,
+      lightDirectIntensity: 14,
       lightDirectPhi: 1,
       lightDirectTheta: 2,
       lightSpotIntensity: 0,
@@ -5251,10 +5251,10 @@ class Se {
     let u = "", l = "", c = 0, d = [], g = [];
     const y = Array.from(this.segmenter.segment(t), (x) => x.segment);
     for (let x = 0; x < y.length; x++) {
-      const v = x === y.length - 1, H = y[x].match(r);
+      const v = x === y.length - 1, C = y[x].match(r);
       let p = y[x].match(s);
       const E = y[x].match(h), z = y[x].match(o);
-      if (p && !v && !E && y[x + 1].match(s) && (p = !1), i && (u += y[x]), H && (!n || n.every((I) => x < I[0] || x > I[1])) && (l += y[x]), (z || p || v) && (l.length && (l = this.lipsyncPreProcessText(l, a), l.length && d.push({
+      if (p && !v && !E && y[x + 1].match(s) && (p = !1), i && (u += y[x]), C && (!n || n.every((I) => x < I[0] || x > I[1])) && (l += y[x]), (z || p || v) && (l.length && (l = this.lipsyncPreProcessText(l, a), l.length && d.push({
         mark: c,
         word: l
       })), u.length && (g.push({
@@ -5385,10 +5385,10 @@ class Se {
             let y = 0.6 + this.convertRange(g, [0, u], [0, 0.4]);
             if (u = Math.min(u, c.visemes.length * 200), d > 0)
               for (let x = 0; x < c.visemes.length; x++) {
-                const v = a + c.times[x] / d * u, H = c.durations[x] / d * u;
+                const v = a + c.times[x] / d * u, C = c.durations[x] / d * u;
                 o.push({
                   template: { name: "viseme" },
-                  ts: [v - Math.min(60, 2 * H / 3), v + Math.min(25, H / 2), v + H + Math.min(60, H / 2)],
+                  ts: [v - Math.min(60, 2 * C / 3), v + Math.min(25, C / 2), v + C + Math.min(60, C / 2)],
                   vs: {
                     ["viseme_" + c.visemes[x]]: [null, c.visemes[x] === "PP" || c.visemes[x] === "FF" ? 0.9 : y, 0]
                   }
@@ -5496,8 +5496,8 @@ class Se {
           });
         }
       }
-      const H = [...t.anim, ...v];
-      this.audioPlaylist.push({ anim: H, audio: d }), this.onSubtitles = t.onSubtitles || null, this.resetLips(), t.mood && this.setMood(t.mood), this.playAudio(), s.onend = () => {
+      const C = [...t.anim, ...v];
+      this.audioPlaylist.push({ anim: C, audio: d }), this.onSubtitles = t.onSubtitles || null, this.resetLips(), t.mood && this.setMood(t.mood), this.playAudio(), s.onend = () => {
         e();
       }, s.onerror = (p) => {
         console.error("Speech synthesis error:", p.error), i(p.error);
@@ -6189,7 +6189,7 @@ class Se {
     t === null && (t = h), e === null && (e = a), N.copy(this.armature.quaternion), N.multiply(this.poseTarget.props["Hips.quaternion"]), N.multiply(this.poseTarget.props["Spine.quaternion"]), N.multiply(this.poseTarget.props["Spine1.quaternion"]), N.multiply(this.poseTarget.props["Spine2.quaternion"]), N.multiply(this.poseTarget.props["Neck.quaternion"]), N.multiply(this.poseTarget.props["Head.quaternion"]), T.setFromQuaternion(N);
     let u = T.x / (40 / 24), l = T.y / (9 / 4), c = Math.min(0.4, Math.max(-0.4, this.camera.rotation.x)), d = Math.min(0.4, Math.max(-0.4, this.camera.rotation.y)), g = Math.max(window.innerWidth - h, h), y = Math.max(window.innerHeight - a, a), x = this.convertRange(e, [a - y, a + y], [-0.3, 0.6]) - u + c, v = this.convertRange(t, [h - g, h + g], [-0.8, 0.8]) - l + d;
     x = Math.min(0.6, Math.max(-0.3, x)), v = Math.min(0.8, Math.max(-0.8, v));
-    let H = (Math.random() - 0.5) / 4, p = (Math.random() - 0.5) / 4;
+    let C = (Math.random() - 0.5) / 4, p = (Math.random() - 0.5) / 4;
     if (i) {
       let E = this.animQueue.findIndex((I) => I.template.name === "lookat");
       E !== -1 && this.animQueue.splice(E, 1);
@@ -6197,9 +6197,9 @@ class Se {
         name: "lookat",
         dt: [750, i],
         vs: {
-          bodyRotateX: [x + H],
+          bodyRotateX: [x + C],
           bodyRotateY: [v + p],
-          eyesRotateX: [-3 * H + 0.1],
+          eyesRotateX: [-3 * C + 0.1],
           eyesRotateY: [-5 * p],
           browInnerUp: [[0, 0.7]],
           mouthLeft: [[0, 0.7]],
@@ -6577,7 +6577,7 @@ class Se {
     const x = t.iterations || 10;
     if (e)
       for (let v = 0; v < x; v++) {
-        let H = !1;
+        let C = !1;
         for (let p = 0, E = y.length; p < E; p++) {
           const z = y[p].bone;
           z.matrixWorld.decompose(h, a, u), a.invert(), o.setFromMatrixPosition(g.matrixWorld), r.subVectors(o, h), r.applyQuaternion(a), r.normalize(), s.subVectors(e, h), s.applyQuaternion(a), s.normalize();
@@ -6590,9 +6590,9 @@ class Se {
             y[p].maxx !== void 0 ? y[p].maxx : 1 / 0,
             y[p].maxy !== void 0 ? y[p].maxy : 1 / 0,
             y[p].maxz !== void 0 ? y[p].maxz : 1 / 0
-          ))), z.updateMatrixWorld(!0), H = !0);
+          ))), z.updateMatrixWorld(!0), C = !0);
         }
-        if (!H) break;
+        if (!C) break;
       }
     n && y.forEach((v) => {
       this.poseTarget.props[v.link + ".quaternion"].copy(v.bone.quaternion), this.poseTarget.props[v.link + ".quaternion"].t = this.animClock, this.poseTarget.props[v.link + ".quaternion"].d = n;
@@ -6685,7 +6685,7 @@ const ke = ye(({
   style: y = {},
   animations: x = {}
 }, v) => {
-  const H = X(null), p = X(null), [E, z] = re(!0), [I, D] = re(null), [P, J] = re(!1), Y = xe(), S = n || Y.service;
+  const C = X(null), p = X(null), [E, z] = re(!0), [I, D] = re(null), [P, J] = re(!1), Y = xe(), S = n || Y.service;
   let F;
   S === "browser" ? F = {
     service: "browser",
@@ -6726,9 +6726,9 @@ const ke = ye(({
     lipsyncModules: ["en"],
     cameraView: u
   }, Q = M(async () => {
-    if (!(!H.current || p.current))
+    if (!(!C.current || p.current))
       try {
-        if (z(!0), D(null), p.current = new Se(H.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), x && Object.keys(x).length > 0 && (p.current.customAnimations = x), await p.current.showAvatar(W, (U) => {
+        if (z(!0), D(null), p.current = new Se(C.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), x && Object.keys(x).length > 0 && (p.current.customAnimations = x), await p.current.showAvatar(W, (U) => {
           if (U.lengthComputable) {
             const O = Math.min(100, Math.round(U.loaded / U.total * 100));
             c(O);
@@ -6745,11 +6745,11 @@ const ke = ye(({
             console.warn("Error setting full body mode on initialization:", U);
           }
         p.current && p.current.controls && (p.current.controls.enableRotate = !1, p.current.controls.enableZoom = !1, p.current.controls.enablePan = !1, p.current.controls.enableDamping = !1, p.current.controls.update()), z(!1), J(!0), l(p.current);
-        const C = () => {
+        const H = () => {
           document.visibilityState === "visible" ? p.current?.start() : p.current?.stop();
         };
-        return document.addEventListener("visibilitychange", C), () => {
-          document.removeEventListener("visibilitychange", C);
+        return document.addEventListener("visibilitychange", H), () => {
+          document.removeEventListener("visibilitychange", H);
         };
       } catch (L) {
         console.error("Error initializing TalkingHead:", L), D(L.message || "Failed to initialize avatar"), z(!1), d(L);
@@ -6758,17 +6758,17 @@ const ke = ye(({
   he(() => (Q(), () => {
     p.current && (p.current.stop(), p.current.dispose(), p.current = null);
   }), [Q]), he(() => {
-    if (!H.current || !p.current) return;
+    if (!C.current || !p.current) return;
     const L = new ResizeObserver((U) => {
       for (const O of U)
         p.current && p.current.onResize && p.current.onResize();
     });
-    L.observe(H.current);
-    const C = () => {
+    L.observe(C.current);
+    const H = () => {
       p.current && p.current.onResize && p.current.onResize();
     };
-    return window.addEventListener("resize", C), () => {
-      L.disconnect(), window.removeEventListener("resize", C);
+    return window.addEventListener("resize", H), () => {
+      L.disconnect(), window.removeEventListener("resize", H);
     };
   }, [P]);
   const q = M(async () => {
@@ -6778,22 +6778,22 @@ const ke = ye(({
       } catch (L) {
         console.warn("Failed to resume audio context:", L);
       }
-  }, []), le = M(async (L, C = {}) => {
+  }, []), le = M(async (L, H = {}) => {
     if (p.current && P)
       try {
         await q();
         const U = {
-          ...C,
-          lipsyncLang: C.lipsyncLang || W.lipsyncLang || "en"
+          ...H,
+          lipsyncLang: H.lipsyncLang || W.lipsyncLang || "en"
         };
-        if (C.onSpeechEnd && p.current) {
+        if (H.onSpeechEnd && p.current) {
           const O = p.current, ne = O.onAudioEnd;
           let $ = null, pe = 0;
           const ze = 600, Ce = () => {
             if (pe++, pe > ze) {
               $ && (clearInterval($), $ = null);
               try {
-                C.onSpeechEnd();
+                H.onSpeechEnd();
               } catch (ge) {
                 console.error("Error in onSpeechEnd callback:", ge);
               }
@@ -6801,19 +6801,19 @@ const ke = ye(({
             }
             O && (!O.isSpeaking || O.isSpeaking === !1) && (!O.audioPlaylist || O.audioPlaylist.length === 0) && (!O.isAudioPlaying || O.isAudioPlaying === !1) && ($ && (clearInterval($), $ = null), setTimeout(() => {
               try {
-                C.onSpeechEnd();
+                H.onSpeechEnd();
               } catch (ge) {
                 console.error("Error in onSpeechEnd callback:", ge);
               }
-            }, 100));
+            }, 10));
           };
           setTimeout(() => {
-            $ = setInterval(Ce, 100);
-          }, 500);
+            $ = setInterval(Ce, 50);
+          }, 100);
         }
         p.current.lipsync && Object.keys(p.current.lipsync).length > 0 ? (p.current.setSlowdownRate && p.current.setSlowdownRate(1.05), p.current.speakText(L, U)) : setTimeout(async () => {
           await q(), p.current && p.current.lipsync && (p.current.setSlowdownRate && p.current.setSlowdownRate(1.05), p.current.speakText(L, U));
-        }, 500);
+        }, 100);
       } catch (U) {
         console.error("Error speaking text:", U), D(U.message || "Failed to speak text");
       }
@@ -6823,7 +6823,7 @@ const ke = ye(({
     p.current && p.current.setMood(L);
   }, []), b = M((L) => {
     p.current && p.current.setSlowdownRate && p.current.setSlowdownRate(L);
-  }, []), R = M((L, C = !1) => {
+  }, []), R = M((L, H = !1) => {
     if (p.current && p.current.playAnimation) {
       if (x && x[L] && (L = x[L]), p.current.setShowFullAvatar)
         try {
@@ -6833,7 +6833,7 @@ const ke = ye(({
         }
       if (L.includes("."))
         try {
-          p.current.playAnimation(L, null, 10, 0, 0.01, C);
+          p.current.playAnimation(L, null, 10, 0, 0.01, H);
         } catch (O) {
           console.warn(`Failed to play ${L}:`, O);
           try {
@@ -6847,7 +6847,7 @@ const ke = ye(({
         let ne = !1;
         for (const $ of O)
           try {
-            p.current.playAnimation(L + $, null, 10, 0, 0.01, C), ne = !0;
+            p.current.playAnimation(L + $, null, 10, 0, 0.01, H), ne = !0;
             break;
           } catch {
           }
@@ -6878,8 +6878,8 @@ const ke = ye(({
       if (p.current && p.current.setShowFullAvatar && p.current.setBodyMovement)
         try {
           p.current.setShowFullAvatar(!0), p.current.setBodyMovement(L);
-        } catch (C) {
-          console.warn("Error setting body movement:", C);
+        } catch (H) {
+          console.warn("Error setting body movement:", H);
         }
     },
     setMovementIntensity: (L) => p.current?.setMovementIntensity(L),
@@ -6895,8 +6895,8 @@ const ke = ye(({
       if (p.current && p.current.setShowFullAvatar && p.current.playReaction)
         try {
           p.current.setShowFullAvatar(!0), p.current.playReaction(L);
-        } catch (C) {
-          console.warn("Error playing reaction:", C);
+        } catch (H) {
+          console.warn("Error playing reaction:", H);
         }
     },
     playCelebration: () => {
@@ -6911,8 +6911,8 @@ const ke = ye(({
       if (p.current && p.current.setShowFullAvatar)
         try {
           p.current.setShowFullAvatar(L);
-        } catch (C) {
-          console.warn("Error setting showFullAvatar:", C);
+        } catch (H) {
+          console.warn("Error setting showFullAvatar:", H);
         }
     },
     lockAvatarPosition: () => {
@@ -6945,7 +6945,7 @@ const ke = ye(({
         /* @__PURE__ */ se(
           "div",
           {
-            ref: H,
+            ref: C,
             className: "talking-head-viewer",
             style: {
               width: "100%",
@@ -6992,7 +6992,7 @@ const $e = ye(({
   style: s = {},
   avatarConfig: o = {}
 }, r) => {
-  const h = X(null), a = X(null), [u, l] = re(!0), [c, d] = re(null), [g, y] = re(!1), x = xe(), v = o.ttsService || x.service, H = v === "browser" ? {
+  const h = X(null), a = X(null), [u, l] = re(!0), [c, d] = re(null), [g, y] = re(!1), x = xe(), v = o.ttsService || x.service, C = v === "browser" ? {
     endpoint: "",
     apiKey: null,
     defaultVoice: "Google US English"
@@ -7008,7 +7008,7 @@ const $e = ye(({
     body: "F",
     avatarMood: "neutral",
     ttsLang: v === "browser" ? "en-US" : "en",
-    ttsVoice: o.ttsVoice || H.defaultVoice,
+    ttsVoice: o.ttsVoice || C.defaultVoice,
     lipsyncLang: "en",
     // English lip-sync
     showFullAvatar: !0,
@@ -7017,8 +7017,8 @@ const $e = ye(({
     movementIntensity: 0.5,
     ...o
   }, E = {
-    ttsEndpoint: H.endpoint,
-    ttsApikey: H.apiKey,
+    ttsEndpoint: C.endpoint,
+    ttsApikey: C.apiKey,
     ttsService: v,
     lipsyncModules: ["en"],
     cameraView: "upper"
@@ -7253,7 +7253,7 @@ const et = ye(({
     onQuestionAnswer: s,
     onCurriculumComplete: o,
     onCustomAction: r
-  }), d = X(null), g = X(null), y = X(null), x = X(null), v = X(null), H = X(null), p = X(null), E = X(B?.curriculum || {
+  }), d = X(null), g = X(null), y = X(null), x = X(null), v = X(null), C = X(null), p = X(null), E = X(B?.curriculum || {
     title: "Default Curriculum",
     description: "No curriculum data provided",
     language: "en",
@@ -7325,7 +7325,7 @@ const et = ye(({
         } catch {
           u.current.playCelebration();
         }
-      const w = E.current || { modules: [] }, L = w.modules[l.current.currentModuleIndex], C = l.current.currentLessonIndex < (L?.lessons?.length || 0) - 1, U = l.current.currentModuleIndex < (w.modules?.length || 0) - 1, O = C || U, ne = z.current || { lipsyncLang: "en" };
+      const w = E.current || { modules: [] }, L = w.modules[l.current.currentModuleIndex], H = l.current.currentLessonIndex < (L?.lessons?.length || 0) - 1, U = l.current.currentModuleIndex < (w.modules?.length || 0) - 1, O = H || U, ne = z.current || { lipsyncLang: "en" };
       O ? u.current.speakText(R, {
         lipsyncLang: ne.lipsyncLang,
         onSpeechEnd: () => {
@@ -7365,7 +7365,7 @@ const et = ye(({
       questionIndex: l.current.currentQuestionIndex,
       totalQuestions: l.current.totalQuestions,
       question: R
-    }), u.current && R) {
+    }), u.current && u.current.isReady && R) {
       if (u.current.setMood("curious"), e.questionStart)
         try {
           u.current.playAnimation(e.questionStart, !0);
@@ -7374,10 +7374,13 @@ const et = ye(({
         }
       const w = z.current || { lipsyncLang: "en" };
       R.type === "code_test" ? u.current.speakText(`Let's test your coding skills! Here's your first challenge: ${R.question}`, { lipsyncLang: w.lipsyncLang }) : R.type === "multiple_choice" ? u.current.speakText(`Now let me ask you some questions. Here's the first one: ${R.question}`, { lipsyncLang: w.lipsyncLang }) : R.type === "true_false" ? u.current.speakText(`Let's start with some true or false questions. First question: ${R.question}`, { lipsyncLang: w.lipsyncLang }) : u.current.speakText(`Now let me ask you some questions. Here's the first one: ${R.question}`, { lipsyncLang: w.lipsyncLang });
-    } else if (u.current) {
+    } else if (u.current && u.current.isReady) {
       const w = z.current || { lipsyncLang: "en" };
       u.current.speakText("Now let me ask you some questions to test your understanding.", { lipsyncLang: w.lipsyncLang });
-    }
+    } else
+      setTimeout(() => {
+        C.current && C.current();
+      }, 100);
   }, [e.questionStart, I, D]), F = M(() => {
     const b = I();
     if (l.current.currentQuestionIndex < (b?.questions?.length || 0) - 1) {
@@ -7425,8 +7428,8 @@ const et = ye(({
     const b = I();
     let R = null;
     if (b?.avatar_script && b?.body) {
-      const w = b.avatar_script.trim(), L = b.body.trim(), C = w.match(/[.!?]$/) ? " " : ". ";
-      R = `${w}${C}${L}`;
+      const w = b.avatar_script.trim(), L = b.body.trim(), H = w.match(/[.!?]$/) ? " " : ". ";
+      R = `${w}${H}${L}`;
     } else
       R = b?.avatar_script || b?.body || null;
     if (u.current && u.current.isReady && R) {
@@ -7435,8 +7438,8 @@ const et = ye(({
       if (e.teaching)
         try {
           u.current.playAnimation(e.teaching, !0), w = !0;
-        } catch (C) {
-          console.warn("Failed to play teaching animation:", C);
+        } catch (H) {
+          console.warn("Failed to play teaching animation:", H);
         }
       w || u.current.setBodyMovement("gesturing");
       const L = z.current || { lipsyncLang: "en" };
@@ -7452,7 +7455,7 @@ const et = ye(({
       }), u.current.speakText(R, {
         lipsyncLang: L.lipsyncLang,
         onSpeechEnd: () => {
-          l.current.isTeaching = !1, b.questions && b.questions.length > 0 ? H.current && H.current() : y.current && y.current();
+          l.current.isTeaching = !1, b.questions && b.questions.length > 0 ? C.current && C.current() : y.current && y.current();
         }
       });
     }
@@ -7474,9 +7477,9 @@ const et = ye(({
             u.current.setBodyMovement("happy");
           }
         u.current.setBodyMovement("gesturing");
-        const L = R.type === "code_test" ? `Great job! Your code passed all the tests! ${R.explanation || ""}` : `Excellent! That's correct! ${R.explanation || ""}`, C = z.current || { lipsyncLang: "en" };
+        const L = R.type === "code_test" ? `Great job! Your code passed all the tests! ${R.explanation || ""}` : `Excellent! That's correct! ${R.explanation || ""}`, H = z.current || { lipsyncLang: "en" };
         u.current.speakText(L, {
-          lipsyncLang: C.lipsyncLang,
+          lipsyncLang: H.lipsyncLang,
           onSpeechEnd: () => {
             x.current && x.current();
           }
@@ -7489,9 +7492,9 @@ const et = ye(({
             u.current.setBodyMovement("idle");
           }
         u.current.setBodyMovement("gesturing");
-        const L = R.type === "code_test" ? `Your code didn't pass all the tests. ${R.explanation || "Try again!"}` : `Not quite right, but don't worry! ${R.explanation || ""} Let's move on to the next question.`, C = z.current || { lipsyncLang: "en" };
+        const L = R.type === "code_test" ? `Your code didn't pass all the tests. ${R.explanation || "Try again!"}` : `Not quite right, but don't worry! ${R.explanation || ""} Let's move on to the next question.`, H = z.current || { lipsyncLang: "en" };
         u.current.speakText(L, {
-          lipsyncLang: C.lipsyncLang,
+          lipsyncLang: H.lipsyncLang,
           onSpeechEnd: () => {
             x.current && x.current();
           }
@@ -7534,10 +7537,10 @@ const et = ye(({
     const R = I(), w = R?.avatar_script || R?.body;
     h && w && setTimeout(() => {
       d.current && d.current();
-    }, 50);
+    }, 10);
   }, [h, I]);
   He(() => {
-    d.current = V, g.current = W, y.current = J, x.current = F, v.current = Y, H.current = S, p.current = Q;
+    d.current = V, g.current = W, y.current = J, x.current = F, v.current = Y, C.current = S, p.current = Q;
   }), fe(a, () => ({
     // Curriculum control methods
     startTeaching: V,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "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/components/CurriculumLearning.jsx

@@ -279,7 +279,8 @@ const CurriculumLearning = forwardRef(({
       });
     }
       
-    if (avatarRef.current && firstQuestion) {
+    // Ensure avatar is ready before speaking
+    if (avatarRef.current && avatarRef.current.isReady && firstQuestion) {
       avatarRef.current.setMood("curious");
       
       // Play custom animation if available
@@ -303,9 +304,16 @@ const CurriculumLearning = forwardRef(({
       } else {
         avatarRef.current.speakText(`Now let me ask you some questions. Here's the first one: ${firstQuestion.question}`, { lipsyncLang: config.lipsyncLang });
       }
-    } else if (avatarRef.current) {
+    } else if (avatarRef.current && avatarRef.current.isReady) {
       const config = defaultAvatarConfigRef.current || { lipsyncLang: 'en' };
       avatarRef.current.speakText("Now let me ask you some questions to test your understanding.", { lipsyncLang: config.lipsyncLang });
+    } else {
+      // Avatar not ready yet, retry after a short delay
+      setTimeout(() => {
+        if (startQuestionsRef.current) {
+          startQuestionsRef.current();
+        }
+      }, 100);
     }
   }, [animations.questionStart, getCurrentLesson, getCurrentQuestion]);
 
@@ -671,7 +679,7 @@ const CurriculumLearning = forwardRef(({
         if (startTeachingRef.current) {
           startTeachingRef.current();
         }
-      }, 50);
+      }, 10);
     }
   }, [autoStart, getCurrentLesson]);
 

package/src/components/TalkingHeadAvatar.jsx

@@ -289,7 +289,7 @@ const TalkingHeadAvatar = forwardRef(({
           // This is because onAudioEnd is only for streaming mode
           let checkInterval = null;
           let checkCount = 0;
-          const maxChecks = 600; // 60 seconds max (100ms intervals)
+          const maxChecks = 600; // 60 seconds max (50ms intervals for faster detection)
           
           const checkSpeechFinished = () => {
             checkCount++;
@@ -317,21 +317,21 @@ const TalkingHeadAvatar = forwardRef(({
                 checkInterval = null;
               }
               
-              // Small delay to ensure everything is settled
+              // Small delay to ensure everything is settled - reduced for faster transitions
               setTimeout(() => {
                 try {
                   options.onSpeechEnd();
                 } catch (e) {
                   console.error('Error in onSpeechEnd callback:', e);
                 }
-              }, 100);
+              }, 10);
             }
           };
           
-          // Start checking after a short delay (to allow speech to start)
+          // Start checking after a minimal delay (to allow speech to start)
           setTimeout(() => {
-            checkInterval = setInterval(checkSpeechFinished, 100);
-          }, 500);
+            checkInterval = setInterval(checkSpeechFinished, 50);
+          }, 100);
         }
         
         if (talkingHeadRef.current.lipsync && Object.keys(talkingHeadRef.current.lipsync).length > 0) {
@@ -348,7 +348,7 @@ const TalkingHeadAvatar = forwardRef(({
               }
               talkingHeadRef.current.speakText(textToSpeak, speakOptions);
             }
-          }, 500);
+          }, 100);
         }
       } catch (err) {
         console.error('Error speaking text:', err);

package/src/lib/talkinghead.mjs

@@ -168,9 +168,9 @@ class TalkingHead {
       cameraPanEnable: false,
       cameraZoomEnable: false,
       lightAmbientColor: 0xffffff,
-      lightAmbientIntensity: 2,
+      lightAmbientIntensity: 0.9,
       lightDirectColor: 0x8888aa,
-      lightDirectIntensity: 30,
+      lightDirectIntensity: 14,
       lightDirectPhi: 1,
       lightDirectTheta: 2,
       lightSpotIntensity: 0,