narrator-avatar 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -8
- package/dist/narrator-avatar.js +6320 -5824
- package/dist/narrator-avatar.umd.cjs +149 -150
- package/package.json +3 -3
- package/dist/narrator-avatar.js.map +0 -1
- package/dist/narrator-avatar.umd.cjs.map +0 -1
package/README.md
CHANGED
|
@@ -10,8 +10,9 @@ React component for 3D talking avatars with lip-sync, Deepgram or Google TTS, co
|
|
|
10
10
|
- **3D avatars** – Ready Player Me–compatible GLB models (full-body)
|
|
11
11
|
- **Lip-sync** – Word-level sync with Deepgram or Google TTS (English bundled; other languages need extra setup)
|
|
12
12
|
- **TTS** – Deepgram (streaming) or Google Cloud Text-to-Speech
|
|
13
|
-
- **Gestures** – Content-aware hand gestures
|
|
13
|
+
- **Gestures** – Content-aware hand gestures: handup, index, ok, thumbup, side, shrug
|
|
14
14
|
- **Playback** – Speak, Pause, Resume, Stop (phrase-level in accurate mode)
|
|
15
|
+
- **Avatar Studio controls** – Visual presets, skin gloss/pores/warmth, eye contact, and mood
|
|
15
16
|
- **Accessibility** – Subtitle callback for closed captions
|
|
16
17
|
|
|
17
18
|
## Table of contents
|
|
@@ -30,7 +31,7 @@ React component for 3D talking avatars with lip-sync, Deepgram or Google TTS, co
|
|
|
30
31
|
npm install narrator-avatar
|
|
31
32
|
```
|
|
32
33
|
|
|
33
|
-
Peer dependencies (React 18+) are installed automatically. The package bundles TalkingHead, Three.js
|
|
34
|
+
Peer dependencies (React 18+) are installed automatically. The package bundles TalkingHead, Three.js, and English lip-sync—**no import maps or Vite config required.**
|
|
34
35
|
|
|
35
36
|
## Usage
|
|
36
37
|
|
|
@@ -52,10 +53,13 @@ function MyPage() {
|
|
|
52
53
|
ttsApiKey={import.meta.env.VITE_DEEPGRAM_API_KEY}
|
|
53
54
|
accurateLipSync={true}
|
|
54
55
|
speechRate={0.9}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
visualPreset="beauty"
|
|
57
|
+
skinGloss={1.5}
|
|
58
|
+
skinPores={2}
|
|
59
|
+
onReady={() => {}}
|
|
60
|
+
onSpeechStart={() => {}}
|
|
61
|
+
onSpeechEnd={() => {}}
|
|
62
|
+
onSubtitle={() => {}}
|
|
59
63
|
/>
|
|
60
64
|
<button onClick={() => avatarRef.current?.speakText('Hello! How are you?')}>
|
|
61
65
|
Speak
|
|
@@ -63,6 +67,9 @@ function MyPage() {
|
|
|
63
67
|
<button onClick={() => avatarRef.current?.pauseSpeaking()}>Pause</button>
|
|
64
68
|
<button onClick={() => avatarRef.current?.resumeSpeaking()}>Resume</button>
|
|
65
69
|
<button onClick={() => avatarRef.current?.stopSpeaking()}>Stop</button>
|
|
70
|
+
<button onClick={() => avatarRef.current?.makeEyeContact(2000)}>
|
|
71
|
+
Eye contact
|
|
72
|
+
</button>
|
|
66
73
|
</div>
|
|
67
74
|
);
|
|
68
75
|
}
|
|
@@ -74,7 +81,7 @@ function MyPage() {
|
|
|
74
81
|
|------|-------------|
|
|
75
82
|
| `avatarUrl` | URL to GLB model (e.g. `/avatars/brunette.glb`) |
|
|
76
83
|
| `avatarBody` | `'M'` or `'F'` for posture |
|
|
77
|
-
| `cameraView` | Camera framing (default `'mid'`) |
|
|
84
|
+
| `cameraView` | Camera framing: `'full'`, `'mid'`, `'upper'`, `'head'` (default `'mid'`) |
|
|
78
85
|
| `cameraRotateEnable` | Allow mouse drag to rotate view (default `false`). Set `true` to enable. |
|
|
79
86
|
| `cameraZoomEnable` | Allow mouse wheel to zoom (default `false`). Set `true` to enable. |
|
|
80
87
|
| `cameraPanEnable` | Allow mouse to pan (default `false`) |
|
|
@@ -83,7 +90,15 @@ function MyPage() {
|
|
|
83
90
|
| `ttsApiKey` | API key (or set `VITE_DEEPGRAM_API_KEY` / `VITE_GOOGLE_TTS_API_KEY`) |
|
|
84
91
|
| `lipsyncModules` | Array of language codes (default `['en']`) |
|
|
85
92
|
| `lipsyncLang` | Lip-sync language (default `'en'`) |
|
|
86
|
-
| `
|
|
93
|
+
| `visualPreset` | Lighting preset: `'cinematic'`, `'beauty'`, `'studio'`, `'sunset'`, `'broadcast'` |
|
|
94
|
+
| `skinGloss` | Skin sheen/sweat intensity from `0` to `2` |
|
|
95
|
+
| `skinPores` | Procedural pore/normal intensity from `0` to `2` |
|
|
96
|
+
| `skinWarmth` | Warm skin tone blend from `0` to `2` |
|
|
97
|
+
| `eyeContactIntensity` | Eye openness/contact strength from `0` to `2` |
|
|
98
|
+
| `dracoEnabled`, `dracoDecoderPath` | Enable Draco-compressed avatar loading |
|
|
99
|
+
| `modelDynamicBones` | TalkingHead dynamic-bone config for rigged hair/body parts |
|
|
100
|
+
| `update` | Per-frame callback `(dt, talkingHead)` |
|
|
101
|
+
| `accurateLipSync` | `true` = REST per phrase, best lip-sync + pause/resume. Default `true` for stable tutor playback |
|
|
87
102
|
| `speechRate` | e.g. `0.9` for 10% slower (pitch-preserving) |
|
|
88
103
|
| `speechGestures` | Content-aware hand gestures (default `true`) |
|
|
89
104
|
| `onReady`, `onError`, `onSpeechStart`, `onSpeechEnd`, `onSubtitle` | Callbacks |
|
|
@@ -96,6 +111,16 @@ function MyPage() {
|
|
|
96
111
|
| `pauseSpeaking()` | Pause (phrase-level when `accurateLipSync` is true) |
|
|
97
112
|
| `resumeSpeaking()` | Resume from next phrase |
|
|
98
113
|
| `stopSpeaking()` | Stop and clear |
|
|
114
|
+
| `makeEyeContact(durationMs?)` | Ask the avatar to hold stronger eye contact |
|
|
115
|
+
| `setMood(mood)` | Change TalkingHead mood |
|
|
116
|
+
| `setLighting(options)` | Pass lighting options to TalkingHead |
|
|
117
|
+
| `setView(view, options?)` | Change camera view |
|
|
118
|
+
| `playGesture(name, dur?, mirror?, ms?)` | Play a built-in gesture |
|
|
119
|
+
| `playAnimation(url, onprogress?, dur?, ndx?, scale?)` | Play a Mixamo/RPM FBX animation |
|
|
120
|
+
| `playPose(url, onprogress?, dur?, ndx?, scale?)` | Play a Mixamo/RPM FBX pose |
|
|
121
|
+
| `stopAnimation()`, `stopPose()` | Stop active animation or pose |
|
|
122
|
+
| `setMixerGain(speech, background?, fadeSecs?)` | Adjust speech/background audio gain |
|
|
123
|
+
| `playBackgroundAudio(url)`, `stopBackgroundAudio()` | Control background audio |
|
|
99
124
|
| `isReady` | Whether the avatar has finished loading |
|
|
100
125
|
| `isSpeaking` | Whether the avatar is currently speaking |
|
|
101
126
|
|