talking-head-studio 0.4.5 → 0.4.6

package/dist/TalkingHead.d.ts

@@ -61,6 +61,7 @@ export interface TalkingHeadProps {
     onReady?: () => void;
     onError?: (message: string) => void;
     onAvatarState?: (state: string) => void;
+    onVoiceMood?: (mood: TalkingHeadMood) => void;
     style?: StyleProp<ViewStyle>;
     /** Base URL for vendored assets. When set, replaces all cdn.jsdelivr.net references. */
     vendorBaseUrl?: string | null;

package/dist/TalkingHead.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const react_native_webview_1 = require("react-native-webview");
 const html_1 = require("./html");
-exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'neutral', cameraView = 'upper', cameraDistance = -0.5, hairColor, skinColor, eyeColor, accessories, onLoadingChange, onReady, onError, onAvatarState, style, vendorBaseUrl, }, ref) => {
+exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'neutral', cameraView = 'upper', cameraDistance = -0.5, hairColor, skinColor, eyeColor, accessories, onLoadingChange, onReady, onError, onAvatarState, onVoiceMood, style, vendorBaseUrl, }, ref) => {
     const webViewRef = (0, react_1.useRef)(null);
     const readyRef = (0, react_1.useRef)(false);
     const firstMessageSeenRef = (0, react_1.useRef)(false);
@@ -25,6 +25,8 @@ exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'n
     onErrorRef.current = onError;
     const onAvatarStateRef = (0, react_1.useRef)(onAvatarState);
     onAvatarStateRef.current = onAvatarState;
+    const onVoiceMoodRef = (0, react_1.useRef)(onVoiceMood);
+    onVoiceMoodRef.current = onVoiceMood;
     // The WebView HTML is built once from stable initial values.
     // avatarUrl + authToken changing causes a controlled key-based remount.
     // All other prop changes (mood, colors, accessories) go via postMessage.
@@ -226,6 +228,9 @@ exports.TalkingHead = (0, react_1.forwardRef)(({ avatarUrl, authToken, mood = 'n
             else if (msg.type === 'avatarState') {
                 onAvatarStateRef.current?.(msg.state);
             }
+            else if (msg.type === 'voiceMood') {
+                onVoiceMoodRef.current?.(msg.mood);
+            }
             else if (msg.type === 'log') {
                 console.log('[TalkingHead]', msg.message);
             }

package/dist/TalkingHeadVisualization.d.ts

@@ -16,6 +16,7 @@ interface TalkingHeadVisualizationProps {
         requestId: string | null;
         appliedAtMs: number;
     }) => void;
+    onVoiceMood?: (mood: TalkingHeadMood) => void;
     vendorBaseUrl?: string | null;
 }
 export interface TalkingHeadVisualizationRef {
@@ -24,6 +25,8 @@ export interface TalkingHeadVisualizationRef {
     sendViseme: (viseme: TalkingHeadViseme, weight?: number) => void;
     scheduleVisemes: (schedule: TalkingHeadVisemeSchedule) => void;
     clearVisemes: () => void;
+    /** Trigger a named motion on the avatar (e.g. 'celebrate', 'groove', 'wave') */
+    playMotion: (name: string) => void;
 }
 /**
  * TalkingHeadVisualization — optimized component for rendering the 3D avatar.

package/dist/TalkingHeadVisualization.js

@@ -44,7 +44,7 @@ function getLoadingLabel(stage) {
  * On native: uses WgpuAvatar (direct morph writes, no WebView bridge).
  * On web: uses TalkingHead WebView renderer.
  */
-exports.TalkingHeadVisualization = (0, react_1.forwardRef)(({ style, avatarUrl, authToken, cameraView = 'head', cameraDistance = 0.2, accessories, mood: initialMood = 'neutral', aspect, focalLength, visemeSchedule, onVisemeScheduleApplied, vendorBaseUrl }, ref) => {
+exports.TalkingHeadVisualization = (0, react_1.forwardRef)(({ style, avatarUrl, authToken, cameraView = 'head', cameraDistance = 0.2, accessories, mood: initialMood = 'neutral', aspect, focalLength, visemeSchedule, onVisemeScheduleApplied, onVoiceMood, vendorBaseUrl }, ref) => {
     const avatarRef = (0, react_1.useRef)(null);
     // On native, WgpuAvatar ref is wired via callback ref — store it here so
     // scheduleVisemes / sendAmplitude can route to it.
@@ -109,6 +109,7 @@ exports.TalkingHeadVisualization = (0, react_1.forwardRef)(({ style, avatarUrl,
         sendAmplitude: (a) => activeAvatar()?.sendAmplitude(a),
         sendViseme: (viseme, weight) => activeAvatar()?.sendViseme(viseme, weight),
         clearVisemes: () => activeAvatar()?.clearVisemes(),
+        playMotion: (name) => avatarRef.current?.dispatchMotion(name),
         scheduleVisemes: (schedule) => {
             const scheduleKey = `${schedule.requestId ?? 'anonymous'}:${schedule.startedAtMs ?? 0}`;
             if (lastScheduledVisemeKeyRef.current === scheduleKey)
@@ -198,7 +199,7 @@ exports.TalkingHeadVisualization = (0, react_1.forwardRef)(({ style, avatarUrl,
     if (!effectiveAvatarUrl) {
         return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [style, styles.placeholder] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [style, styles.container], pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsx)(TalkingHead_1.TalkingHead, { ref: avatarRef, avatarUrl: effectiveAvatarUrl, authToken: authToken, cameraView: cameraView, cameraDistance: cameraDistance, accessories: accessories, mood: mood, onLoadingChange: handleLoadingChange, onReady: handleReady, onError: handleError, style: react_native_1.StyleSheet.absoluteFill, vendorBaseUrl: vendorBaseUrl }), !isAvatarReady && ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "talking-head-loading", style: styles.loadingOverlay, pointerEvents: "none", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.loadingCard, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.loadingBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingBadgeText, children: "AVATAR" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingTitle, children: avatarError ? 'Avatar failed to load' : getLoadingLabel(loadingState.stage) }), avatarError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingHint, children: avatarError })) : typeof loadingState.progress === 'number' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.loadingPercent, children: [loadingState.progress, "%"] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressTrack, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [style, styles.container], pointerEvents: "box-none", children: [(0, jsx_runtime_1.jsx)(TalkingHead_1.TalkingHead, { ref: avatarRef, avatarUrl: effectiveAvatarUrl, authToken: authToken, cameraView: cameraView, cameraDistance: cameraDistance, accessories: accessories, mood: mood, onLoadingChange: handleLoadingChange, onReady: handleReady, onError: handleError, onVoiceMood: onVoiceMood, style: react_native_1.StyleSheet.absoluteFill, vendorBaseUrl: vendorBaseUrl }), !isAvatarReady && ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "talking-head-loading", style: styles.loadingOverlay, pointerEvents: "none", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.loadingCard, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.loadingBadge, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingBadgeText, children: "AVATAR" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingTitle, children: avatarError ? 'Avatar failed to load' : getLoadingLabel(loadingState.stage) }), avatarError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingHint, children: avatarError })) : typeof loadingState.progress === 'number' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.loadingPercent, children: [loadingState.progress, "%"] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressTrack, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                                             styles.progressFill,
                                             { width: `${Math.max(6, loadingState.progress)}%` },
                                         ] }) })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.loadingHint, children: "Preparing the avatar scene\u2026" }))] }) }))] }));

package/dist/html.js

@@ -384,6 +384,33 @@ function startAudioInterception() {
 let amplitudeDecay = 0;
 let jawMorphCache = null;
 let visemeMorphCache = null;
+
+// Voice-driven mood detection
+let voiceEnergySmoothed = 0;
+let voiceMoodCurrent = 'neutral';
+let voiceMoodFramesAbove = 0;
+let voiceMoodFramesBelow = 0;
+const VOICE_ENERGY_EXCITED_THRESH = 0.45;
+const VOICE_ENERGY_NEUTRAL_THRESH = 0.15;
+const VOICE_MOOD_FRAMES_REQUIRED = 12; // ~0.2s at 60fps
+function updateVoiceMood(rawAmplitude) {
+  voiceEnergySmoothed = voiceEnergySmoothed * 0.85 + rawAmplitude * 0.15;
+  if (voiceEnergySmoothed > VOICE_ENERGY_EXCITED_THRESH) {
+    voiceMoodFramesAbove++;
+    voiceMoodFramesBelow = 0;
+    if (voiceMoodCurrent !== 'excited' && voiceMoodFramesAbove >= VOICE_MOOD_FRAMES_REQUIRED) {
+      voiceMoodCurrent = 'excited';
+      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'voiceMood', mood: 'excited' }));
+    }
+  } else if (voiceEnergySmoothed < VOICE_ENERGY_NEUTRAL_THRESH) {
+    voiceMoodFramesBelow++;
+    voiceMoodFramesAbove = 0;
+    if (voiceMoodCurrent !== 'neutral' && voiceMoodFramesBelow >= VOICE_MOOD_FRAMES_REQUIRED * 3) {
+      voiceMoodCurrent = 'neutral';
+      window.ReactNativeWebView?.postMessage(JSON.stringify({ type: 'voiceMood', mood: 'neutral' }));
+    }
+  }
+}
 const visemeState = {};
 
 const VISEME_MORPH_ALIASES = {
@@ -1109,6 +1136,7 @@ function onIncomingMessage(event) {
             msg.value * RHUBARB_FALLBACK_AMPLITUDE_GAIN,
           );
       amplitudeDecay = Math.max(amplitudeDecay * 0.7, val);
+      updateVoiceMood(msg.value);
       for (let i = 0; i < jawMorphCache.length; i++) jawMorphCache[i].influences[jawMorphCache[i].idx] = amplitudeDecay;
     } else if (msg.type === 'viseme') {
       applyViseme(msg.viseme, msg.weight !== undefined ? msg.weight : 1.0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talking-head-studio",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Cross-platform 3D avatar component for React Native & web — lip-sync, gestures, accessories, and LLM integration. Powered by TalkingHead + Three.js.",
   "main": "dist/index.web.js",
   "browser": "dist/index.web.js",