Lesson 4: Mapping Spoken Syllables to AJ's 4 Mouth Visemes (`smile-open`, `talking`, `surprised-o`, `grin`)

1. The 15-Second Hook
Welcome to Lesson 4 of faster-whisper on Local GPU: Word-Level Captions & Mascot Lip-Sync on CodingCat.dev. Today we break down Mapping Spoken Syllables to AJ's 4 Mouth Visemes (`smile-open`, `talking`, `surprised-o`, `grin`) and see how it powers our deterministic 3D AJ and code-rendered video pipeline.
2. Architecture Mental Model (Visual Diagram)
Look at the architecture diagram: on the left, vibe-prompted animations suffer from timer drift and unreviewed layout bugs. On the right, 4 Visemes and Lip-Sync enforce a deterministic frame contract.
3. Show Me the Code (tools/video-studio/synthesize-voiceover.py)
from faster_whisper import WhisperModel
whisper = WhisperModel("base.en", device="cuda", compute_type="float16")
segments, info = whisper.transcribe(wav_path, word_timestamps=True)
for seg in segments:
for w in (seg.words or []):
print(f"{w.start:.3f}s -> {w.end:.3f}s: {w.word}")In tools/video-studio/synthesize-voiceover.py, we wire up the production implementation so both our browser runtime and headless renderer stay 100 percent synchronized.
4. Production Trade-Off Matrix
| Dimension | Deterministic 2026 Pattern | Legacy Anti-Pattern | Why It Matters in Production |
|---|---|---|---|
| Determinism | Pure function of time t via window.seek(t) | Non-deterministic timers & Math.random() | Any frame renders identically on demand. |
| Visual Polish | Contact-sheet critique loop + W3C tokens | First unreviewed render ships as final | Eliminates overlapping text and dead beats. |
| 3D & Mascot Rig | Unified 57-path 2D SVG + Three.js 3D GLB AJ | Static flat raster images | Interactive orbital 3D + 120 BPM lip-sync. |
| Production Cost | $0 open-source local RTX 5090 pipeline | $1,200+ agency fee or per-minute SaaS cliff | Scales across 95+ lessons with zero marginal cost. |
When we compare this deterministic 2026 pattern against legacy workflows in our trade-off matrix, we get exact frame reproducibility, automated critique gates, and zero licensing cost.
5. Verdict & AJ Pro-Tip
AJ Pro-Tip: Always verify frame 300 twice during your contact-sheet critique pass to confirm your 4 Visemes setup has zero non-deterministic state leaks.
Adopt 4 Visemes inside your studio folder today so every future launch film and 3D mascot animation builds on a reusable harness. Hit Subscribe and let's continue!
how this course connects together.
Follow AJ from first principles to production-ready architecture.
related deep dives.
View All→
HyperFrames: Turning HTML & Canvas into 60fps Video for AI Agents
Learn how HeyGen's open-source HyperFrames compiler turns self-contained HTML, CSS, and Canvas compositions into deterministic 1080p60 videos built by AI agents.

The 14 Open-Source Repos Powering Code-Driven Video in 2026: How We Built 3D AJ the Cat
Why viral 'one-prompt' AI videos are actually 9,500-character production harnesses backed by deterministic frame functions, closed-form springs, and contact-sheet critique loops. Here is the full architectural breakdown of all 14 open-source repos and how we used them to build our interactive 3D AJ the Cat mascot and Course Factory.