# The 14 Open-Source Repos Powering Code-Driven Video in 2026: How We Built 3D AJ the Cat

Original: https://codingcat.dev/post/14-open-source-repos-code-driven-video-how-we-built-3d-aj

Every AI engineering timeline this month is flooded with launch films, kinetic typography reels, and 3D product videos captioned `"one prompt in Opus 5.5"`. If you actually believed a 20-word vibe prompt inside a standard chat window produced those 60fps showreels, you probably tried it yourself and got a centered title over a purple gradient with drifting CSS animations.

A recent viral breakdown by `@0xnicc0` and `@seeconvm` pulled back the curtain on what those viral videos are actually hiding: **foundation models cannot output an MP4 file directly**. Every viral code-rendered film is a deterministic program written by an agent with shell access, driven by a strict `window.seek(t)` frame contract, closed-form spring physics, beat-locked audio (`beats.json`), and a contact-sheet critique loop powered by **14 free open-source repositories**.

On **CodingCat.dev**, we took that exact 14-repo stack and wired it directly into our production site and local RTX 5090 video studio:

1. We built our canonical **3D Vinyl-Toy AJ the Cat GLB model** (`aj-3d-mascot.glb`) using **Three.js**, **Blender**, and **Blender MCP** (`ahujasid/mcp-for-blender`), complete with a live **2D Vector vs. 3D GLB toggle** on [\`/mascot-lab\`](/mascot-lab) and our homepage Hero.
2. We upgraded AJ's runtime (`AjAnimatedMascot.astro` and `Aj3dMascotViewer.astro`) with a shared **deterministic \`window.seek(t)\` motion engine** (`src/lib/aj-motion-engine.ts`) using **closed-form harmonic springs** and **seeded noise**.
3. We wired **120 BPM audio-reactive lip-sync** into our **Podcasts** (`/podcasts` and `/podcast/[slug]`) and automated our 1080p **Course Factory** with **faster-whisper**, **FFmpeg**, and headless **Chrome DevTools MCP**.

Let's break down the mental model behind deterministic code-driven video, see the Architecture Diagrams, rank all 14 repositories in an **Alex Patterson Architectural Tier List**, and walk through the exact TypeScript and Python code powering 3D AJ.

## 1. The Mental Model: Why window.seek(t) Beats Non-Deterministic Timers

When you ask an LLM to write a web animation without a render contract, it defaults to `requestAnimationFrame`, `setTimeout`, CSS transitions, and `Math.random()`. That works fine for a casual decorative hover effect, but it falls apart the moment a headless browser tries to capture 900 frames for a 15-second 60fps video:

- If frame 240 takes 45ms to paint instead of 16.6ms, timer-based animations drift out of sync with the audio track.
- If a headline lands 10 frames too early at second `4.0`, you cannot jump straight to frame 240 to inspect it without re-simulating frames `0` through `239`.
- If particle positions use `Math.random()`, rendering frame 300 twice produces two different image hashes, breaking loop continuity and automated visual diffs.

![Deterministic Frame Contract Architecture Diagram](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/ac8ebdeb3325e17e8aabd6836ecc47ec271059ff-1376x768.png?fit=max&auto=format)

The solution is a strict **Frame Function Contract** enforced via your agent rules (`CLAUDE.md` or `GEMINI.md`):

1. **\`window.seek(t)\` Paints Frame \`t\`**: Nothing else drives the screen. Passing `window.seek(4.0)` renders the exact visual state at `4.000` seconds deterministically.
2. **Closed-Form Springs (\`spring(t - t_i)\`)**: Instead of accumulating velocity state frame-by-frame in a physics loop, every movement is evaluated as an analytical function of elapsed time since impulse `t_i`.
3. **Seeded Hash Noise Only**: Replace `Math.random()` with a deterministic 32-bit integer hash (`seededNoise1D(seed, t)`) so frame `300` hashes identically on every run.
4. **The FFmpeg Contact-Sheet Critic**: Before the agent shows you an MP4, it uses **FFmpeg** to extract a 2-fps contact sheet and a 12-frame strip around the fastest motion, inspects its own rendered frames via **Chrome DevTools MCP**, scores them from 1 to 10, and fixes the worst 3 defects automatically.

| Architectural Piece | What Goes Wrong Without It | What Fixes It in Production |
| --- | --- | --- |
| Frame Function | Renders drift under GPU load; every edit requires replaying from t = 0. | window.seek(t) + pure analytical functions of time + zero CSS timers. |
| Closed-Form Springs | Fixed linear/cubic-bezier easing feels robotic; iterative physics breaks random frame access. | track(t) = v0 + Σ (v_i - v_(i-1)) * spring(t - t_i) with analytical damping. |
| The Agent Rig | Chat-only models never see or hear their own broken layouts or overlapping text. | Agent shell + Headless Chromium / Chrome DevTools MCP + FFmpeg. |
| Audio & Beat Clock | Voiceovers and music float on top of visuals with off-beat state transitions. | Chatterbox / F5-TTS + faster-whisper word timestamps + librosa beats.json. |
| The Contact-Sheet Critic | The first render ships with clipped text, dead beats, or loop stutters. | 6-across FFmpeg contact sheet + 360px mobile readability test + automated self-critique. |

## 2. Alex Patterson's Architectural Tier List: All 14 Code-Driven Video Repos Ranked

Instead of treating all 14 repositories from `@0xnicc0`'s list as interchangeable, here is how they rank in our production **CodingCat.dev** stack based on determinism, GPU efficiency, MCP agent ergonomics, and how heavily we rely on them to build **3D AJ** and our **Courses**:

```json:object
{
  "_key": "aj3d_tierlist_d57fa109f9",
  "_type": "tierList",
  "ajComment": "We used Three.js, Blender MCP, faster-whisper & FFmpeg to build my 3D GLB rig! 🐾🧊",
  "items": [
    {
      "_key": "aj3d_ti_0_c4bda701f2",
      "_type": "tierItem",
      "category": "Browser 3D & WebGPU",
      "details": [
        {
          "_key": "aj3d_td_0_3_60dddc91b1",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Renders aj-3d-mascot.glb in Aj3dMascotViewer.astro with custom Royal Purple & Electric Lime rim lighting and deterministic window.seek(t) bone posing."
        }
      ],
      "name": "Three.js (mrdoob/three.js)",
      "summary": "The undisputed king of browser 3D. Zero plugin install for users, native glTF 2.0 .glb support, and instant seek(t) scrubbing.",
      "tier": "S"
    },
    {
      "_key": "aj3d_ti_1_c3ea8f2789",
      "_type": "tierItem",
      "category": "Media Compositor & Critic",
      "details": [
        {
          "_key": "aj3d_td_1_3_2b2088076a",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Encodes 1080p MP4 lessons, normalizes audio to -14 LUFS, and generates 6-across contact sheets for agent visual critique."
        }
      ],
      "name": "FFmpeg (FFmpeg/FFmpeg)",
      "summary": "Non-negotiable infrastructure. Every frame pipeline, audio normalizer, and contact-sheet critic ends in FFmpeg.",
      "tier": "S"
    },
    {
      "_key": "aj3d_ti_2_ac3e5e5489",
      "_type": "tierItem",
      "category": "Word-Level Audio Alignment",
      "details": [
        {
          "_key": "aj3d_td_2_3_9bb6db9823",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Runs on our local RTX 5090 in synthesize-voiceover.py to extract sub-20ms word timestamps for caption burn-in and AJ lip-sync."
        }
      ],
      "name": "faster-whisper (SYSTRAN/faster-whisper)",
      "summary": "4x faster than stock Whisper with lower VRAM via CTranslate2. Gives agents an exact millisecond clock for every spoken word.",
      "tier": "S"
    },
    {
      "_key": "aj3d_ti_3_79dde935e4",
      "_type": "tierItem",
      "category": "Agentic 3D Scene Control",
      "details": [
        {
          "_key": "aj3d_td_3_3_e60917bafa",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Bridges Claude / Antigravity over a socket (port 9876) to execute scripts/blender-aj-3d-pipeline.py, verify AJ's 12 rig nodes, and set up 3-point lighting."
        }
      ],
      "name": "Blender MCP (ahujasid/mcp-for-blender)",
      "summary": "Turns Blender from a manual GUI into an agent-programmable 3D compiler. Essential for automated mesh inspection and rigging.",
      "tier": "S"
    },
    {
      "_key": "aj3d_ti_4_cd237ff0af",
      "_type": "tierItem",
      "category": "3D Modeling, Rigging & Baking",
      "details": [
        {
          "_key": "aj3d_td_4_3_750b1734d0",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Headless -b -P verification of AJ's armature hierarchy, PBR material roughness tokens, and .glb export."
        }
      ],
      "name": "Blender (blender/blender)",
      "summary": "The open-source 3D standard. Combined with Python bpy, it eliminates manual 3D artist bottlenecks.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_5_df5cd9265c",
      "_type": "tierItem",
      "category": "React Video Composition",
      "details": [
        {
          "_key": "aj3d_td_5_3_f870e184fc",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Declarative <Sequence> and useCurrentFrame() architecture for multi-scene React video compositions and data stories."
        }
      ],
      "name": "Remotion (remotion-dev/remotion)",
      "summary": "Best-in-class DX when your team already builds in React and Tailwind CSS. Deterministic frame rendering out of the box.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_6_1f681ee5e6",
      "_type": "tierItem",
      "category": "Agent Procedural Memory",
      "details": [
        {
          "_key": "aj3d_td_6_3_fb2f3e34c3",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Teaches coding agents how to write idiomatic Remotion compositions, spring interpolations, and audio sync without hallucinating APIs."
        }
      ],
      "name": "Remotion Skills (remotion-dev/skills)",
      "summary": "Crucial context upgrade. Without this skill, LLMs write brittle React effects instead of pure useCurrentFrame() math.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_7_01b72c0a65",
      "_type": "tierItem",
      "category": "Live DOM & Frame Inspection",
      "details": [
        {
          "_key": "aj3d_td_7_3_5ea2bd4e01",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Lets our agent inspect /mascot-lab, verify WebGL canvas sizing, check console errors, and audit rendered frames before MP4 export."
        }
      ],
      "name": "Chrome DevTools MCP (ChromeDevTools/chrome-devtools-mcp)",
      "summary": "Closes the blind-agent gap. Your agent sees the exact DOM, computed styles, and pixel output in real time.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_8_9832bfc504",
      "_type": "tierItem",
      "category": "Timeline & UI Motion",
      "details": [
        {
          "_key": "aj3d_td_8_3_dbf414d1e5",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Drives deterministic timeline scrubbing (tl.time(t)) and complex SVG morphs alongside our closed-form spring engine."
        }
      ],
      "name": "GSAP (greensock/GSAP)",
      "summary": "Battle-tested timeline control. Just remember to pause auto-ticking and drive tl.time(t) from window.seek(t) in render mode.",
      "tier": "A"
    },
    {
      "_key": "aj3d_ti_9_b82afdd23f",
      "_type": "tierItem",
      "category": "Agent-Native HTML-to-Video",
      "details": [
        {
          "_key": "aj3d_td_9_3_3527234afe",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Compiles standalone HTML/CSS/JS scenes directly into high-fps video frames with minimal framework overhead."
        }
      ],
      "name": "HyperFrames (heygen-com/hyperframes)",
      "summary": "Purpose-built for coding agents that prefer writing raw HTML/Canvas over full React bundles. Fast and lightweight.",
      "tier": "B"
    },
    {
      "_key": "aj3d_ti_10_9f1ece4f53",
      "_type": "tierItem",
      "category": "Open-Source Voice Synthesis",
      "details": [
        {
          "_key": "aj3d_td_10_3_3b8dee265e",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Zero-shot expressive TTS alternative alongside our RTX 5090 F5-TTS pipeline for generating clean lesson narration at $0 API cost."
        }
      ],
      "name": "Chatterbox (resemble-ai/chatterbox)",
      "summary": "Impressive open-source expressive voice cloning with emotion control. Great local alternative to paid ElevenLabs seats.",
      "tier": "B"
    },
    {
      "_key": "aj3d_ti_11_36fcd0b6a0",
      "_type": "tierItem",
      "category": "Node-Based Diffusion & 3D Gen",
      "details": [
        {
          "_key": "aj3d_td_11_3_94519bb38f",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Local GPU workflow graph for generating multi-view character turnaround sheets (Front, Left, Right) and base video plates for generate-then-trace."
        }
      ],
      "name": "ComfyUI (Comfy-Org/ComfyUI)",
      "summary": "Unmatched local GPU control for image-to-3D plates and texture maps, though JSON workflow graphs require disciplined versioning.",
      "tier": "B"
    },
    {
      "_key": "aj3d_ti_12_d8d0b0c4c6",
      "_type": "tierItem",
      "category": "Automated UI & Design Critic",
      "details": [
        {
          "_key": "aj3d_td_12_3_92fbe57224",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Audits typography hierarchy, spacing tokens, contrast ratios, and visual polish against banned AI slop patterns."
        }
      ],
      "name": "Impeccable (pbakaus/impeccable)",
      "summary": "Great automated design gate to stop agents from shipping generic purple-gradient SaaS clichés.",
      "tier": "B"
    },
    {
      "_key": "aj3d_ti_13_d153775d03",
      "_type": "tierItem",
      "category": "Reference Media Ingestion",
      "details": [
        {
          "_key": "aj3d_td_13_3_ad6ff13a87",
          "_type": "tierDetail",
          "label": "How We Use It on CodingCat.dev",
          "value": "Pulls reference launch videos and audio tracks so FFmpeg can slice 0.5s reference frames into docs/style_guide.md."
        }
      ],
      "name": "yt-dlp (yt-dlp/yt-dlp)",
      "summary": "Indispensable utility for reference grammar extraction, though strictly an ingestion CLI rather than a rendering engine.",
      "tier": "C"
    }
  ],
  "subtitle": "Ranked from S-Tier to C-Tier across deterministic window.seek(t) support, GPU performance, MCP agent integration, and how we use them for 3D AJ.",
  "title": "Alex's 2026 Code-Driven Video & 3D Web Tier List (All 14 Repos Ranked)"
}
```

## 3. Deep Dive: How We Built and Upgraded 3D AJ the Cat Across CodingCat.dev

Before this upgrade, AJ the Cat lived in two separate worlds on **CodingCat.dev**:

1. **Static 3D Turnaround Renders**: High-resolution Pixar-style vinyl-toy studio JPEGs (`assets/AJ-3D-Headphones-Front.jpg`, `Left.jpg`, `Right.jpg`) used in YouTube thumbnails and video bumpers.
2. **2D Articulated Vector SVG (\`AjAnimatedMascot.astro\`)**: A 57-path inline SVG rig with 14 bone pivot groups (`#aj-head-group`, `#aj-arm-right`, `#aj-tail`, etc.) driven by CSS `@keyframes` and random `setTimeout` blinks.

![Unified AJ Rig Architecture Diagram](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/42128a08eb5c163dc049e3b654bb552e6c2c3e11-1376x768.png?fit=max&auto=format)

While the 2D SVG rig had zero external JavaScript dependencies, its CSS `@keyframes` and `Math.random()` blink timers meant **it was not frame-seekable** for headless video rendering, and visitors could not orbit or inspect a real 3D mesh in the browser.

Here is the exact 4-stage architecture we implemented to unify **2D Vector AJ** and **3D GLB AJ** under a single deterministic motion engine.

### Stage 1: Programmatic 3D Vinyl-Toy GLB Generation (scripts/build-aj-3d-glb.mjs) & Blender MCP Verification

To ensure 3D AJ matches every single anatomical law in our Design System (`09-assets.md`) while keeping the binary payload compact (`756 KB`) and 100% deterministic, we built `scripts/build-aj-3d-glb.mjs` and paired it with our headless **Blender MCP** verification script (`scripts/blender-aj-3d-pipeline.py`).

Every anatomical feature of AJ is mapped to a named glTF 2.0 node so both **Blender** (`bpy.data.objects`) and **Three.js** (`gltf.scene.getObjectByName`) can target the exact same bones:

- `AjRoot` -> `AjPedestal` + `AjBodyRoot`
- `AjTorso` (Matte-black `#0B0B0E` PBR fur with roughness `0.62` + dark charcoal `#2D2D30` oval belly patch)
- `AjCollar` + `AjHexTag` (Soft Lavender `#B4A7D6` collar with hexagonal gold & Royal Purple `"AJ"` tag)
- `AjHeadGroup` -> `AjEarLeft`, `AjEarRight`, `AjWhiskersLeft`, `AjWhiskersRight`
- `AjEyeLeftPupil` & `AjEyeRightPupil` (Electric Lime Green `#C5E86C` eyes with vertical black pupils and dual white catchlights)
- `AjJawMouth` (Articulated jaw and pink tongue viseme group for 120 BPM audio-reactive lip-sync)
- `AjHeadphonesGroup` (`CodingCat.dev Podcast` charcoal headband + Royal Purple `#7C3AED` & Soft Lavender `#B4A7D6` earcups fitting directly over his cat ears)

```python
# scripts/blender-aj-3d-pipeline.py
import bpy

TOKENS = {
    "fur_black": (0.043, 0.043, 0.055, 1.0),       # #0B0B0E
    "belly_charcoal": (0.176, 0.176, 0.188, 1.0),  # #2D2D30
    "eye_lime": (0.773, 0.910, 0.424, 1.0),        # #C5E86C
    "royal_purple": (0.486, 0.227, 0.929, 1.0),    # #7C3AED
    "soft_lavender": (0.706, 0.655, 0.839, 1.0),   # #B4A7D6
}

def import_and_verify_aj_glb(glb_path: str, export_path: str):
    """Import AJ 3D GLB, verify canonical node hierarchy for seek(t), and re-export optimized GLB."""
    bpy.ops.wm.read_factory_settings(use_empty=True)
    bpy.ops.import_scene.gltf(filepath=glb_path)

    required_nodes = [
        "AjRoot", "AjBodyRoot", "AjTorso", "AjHeadGroup",
        "AjHeadphonesGroup", "AjEyeLeftPupil", "AjEyeRightPupil",
        "AjJawMouth", "AjArmLeft", "AjArmRight", "AjTail", "AjHexTag",
    ]
    present = {obj.name for obj in bpy.data.objects}
    missing = [n for n in required_nodes if n not in present]
    if missing:
        raise RuntimeError(f"Missing canonical 3D AJ rig nodes: {missing}")

    bpy.ops.export_scene.gltf(filepath=export_path, export_format="GLB", export_yup=True)
```

### Stage 2: Closed-Form Springs & Deterministic window.seek(t) (src/lib/aj-motion-engine.ts)

In `@0xnicc0` and `@seeconvm`'s guide, the secret to lifelike motion that remains 100% seekable at any arbitrary frame `t` is **stacking closed-form harmonic springs**:

```typescript
track(t) = v0 + Σ (v_i - v_(i-1)) * spring(t - t_i)
```

Because `closedFormSpring(dt, omega, zeta)` is a pure analytical equation using `Math.exp(-zeta * omega * dt)` and `Math.cos(omegaD * dt)`, evaluating frame `812` (`t = 13.533s`) requires **zero knowledge of frames \`0\` through \`811\`**.

Here is the production motion engine we shipped in `apps/site/src/lib/aj-motion-engine.ts`:

```typescript
// apps/site/src/lib/aj-motion-engine.ts
export function hashUint32(n: number): number {
	let x = (n | 0) + 0x9e3779b9;
	x = Math.imul(x ^ (x >>> 16), 0x85ebca6b);
	x = Math.imul(x ^ (x >>> 13), 0xc2b2ae35);
	return (x ^ (x >>> 16)) >>> 0;
}

export function seededUnitFloat(seed: number, step: number): number {
	return hashUint32(seed * 747796405 + step * 2891336453) / 4294967295;
}

export function closedFormSpring(
	dt: number,
	omega = 18.0,
	zeta = 0.58,
): number {
	if (dt <= 0) return 0;
	if (dt > 6) return 1;
	if (zeta < 1) {
		const omegaD = omega * Math.sqrt(1 - zeta * zeta);
		const env = Math.exp(-zeta * omega * dt);
		const cosTerm = Math.cos(omegaD * dt);
		const sinTerm = (zeta / Math.sqrt(1 - zeta * zeta)) * Math.sin(omegaD * dt);
		return 1 - env * (cosTerm + sinTerm);
	}
	const env = Math.exp(-omega * dt);
	return 1 - env * (1 + omega * dt);
}
```

Both `<AjAnimatedMascot />` (2D SVG) and `<Aj3dMascotViewer />` (3D Three.js GLB) subscribe to `window.seek(t)` (`cc:seek` custom event) and call `computeAjPoseAtTime(t, state)`. You can test this live right now on [\`/mascot-lab\`](/mascot-lab) using the **\`window.seek(t)\` frame scrubber** or by opening DevTools and running `window.seek(4.25)`.

### Stage 3: Zero-LCP-Penalty 3D Three.js Viewer (Aj3dMascotViewer.astro)

A common mistake when adding **Three.js** to a content site is mounting a heavy WebGL canvas above the fold that blocks Largest Contentful Paint (LCP).

On **CodingCat.dev**, we kept our zero-JS 57-path 2D SVG rig as the instant-paint SSR default and added an interactive **2D SVG / 3D GLB toggle** in the Homepage Hero (`AnimatedHero.astro`) and on [\`/mascot-lab\`](/mascot-lab). When you switch to `3D GLB`, `Aj3dMascotViewer.astro` loads `/models/aj-3d-mascot.glb` (`756 KB`), lights AJ with ACES Filmic tone mapping plus Royal Purple (`#7C3AED`) and Electric Lime (`#C5E86C`) spot rim lights, and binds cursor coordinates to `AjEyeLeftPupil` and `AjEyeRightPupil`.

### Stage 4: 120 BPM Audio-Reactive Lip-Sync on Podcast Pages & Video Studio

![Audio Clock & Lip-Sync Architecture Diagram](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/34b45ff52f45f5f45ea9e55c7e32413b1f048af9-1376x768.png?fit=max&auto=format)

In Section 6 of the Opus 5.5 Motion Design guide (_"Springs and Sound, or Why Cheap Motion Feels Cheap"_), sound and picture must share the exact same clock. We wired `PodcastListen.astro` and `/podcasts` to `window.setAjAudioAmplitude(amp, bpm)`:

- Whenever you play an episode in `PodcastListen.astro` (or click **Test AJ 120 BPM Beat Sync** on `/podcasts`), AJ's jaw viseme (`#aj-talking-frame` in 2D SVG and `AjJawMouth` in 3D GLB), head nod, and ear bounce lock to the audio envelope at 120 BPM.
- In our local RTX 5090 `tools/video-studio/synthesize-voiceover.py` pipeline, **faster-whisper** extracts word-level timestamps into `storyboard.json` so every rendered Course Lesson video aligns captions, diagram transitions, and AJ reactions to the millisecond.

> **AJ Pro-Tip Callout: Never Use \`Math.random()\` or Unpaused Timelines in Headless Video Renders** When capturing frames with Playwright or Headless Chrome, even a single `Math.random()` inside a blink timer or particle emitter will cause a visual stutter at your video's loop point. Always derive blinks and noise from `hashUint32(seed + Math.floor(t * 60))` and drive every animation from `window.seek(t)`.

## 4. Full Course Roadmap: 5 Flagship Stack Courses + 14 Deep-Dive Tool Courses

To help you master this entire code-driven media and 3D web stack without paying `$1,200` per launch video, we have prepped **19 new Courses** (5 Flagship Architectural Stack Courses + 14 dedicated Tool-by-Tool Courses, totaling **95 Lessons**) in the **CodingCat.dev** Course Factory (`/courses`):

### The 5 Flagship Stack Courses

1. **Flagship 1: Programmatic Video with React, Remotion & Agent Skills** (`Remotion` + `Remotion Skills`)
2. **Flagship 2: Agentic 3D Web Pipelines with Blender, Blender MCP & Three.js** (`Blender` + `Blender MCP` + `Three.js`)
3. **Flagship 3: Deterministic HTML Motion & Visual Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP** (`HyperFrames` + `GSAP` + `Impeccable` + `Chrome DevTools MCP`)
4. **Flagship 4: Local GPU Audio & Diffusion Pipelines with Chatterbox, faster-whisper & ComfyUI** (`Chatterbox` + `faster-whisper` + `ComfyUI`)
5. **Flagship 5: Automated Media Engineering & Reference Extraction with FFmpeg & yt-dlp** (`FFmpeg` + `yt-dlp`)

### The 14 Dedicated Tool-by-Tool Courses (1 Per GitHub Repo)

| Course # | Course Title & Slug (/course/[slug]) | Primary GitHub Repo | Core Production Deliverable |
| --- | --- | --- | --- |
| 01 | Remotion in Production: React Video Composition (/course/remotion-react-video-production) | remotion-dev/remotion | Multi-aspect-ratio 60fps launch video rendered from React + Tailwind CSS. |
| 02 | Remotion Skills for AI Coding Agents (/course/remotion-skills-ai-agents) | remotion-dev/skills | Custom SKILL.md harness that teaches Claude Code & Antigravity deterministic video rules. |
| 03 | Blender 5.0 for Web Developers: Headless Python & GLB (/course/blender-headless-python-web-devs) | blender/blender | Automated bpy script that builds, lights, and exports a <1MB .glb mascot. |
| 04 | Blender MCP: Driving 3D Scenes with AI Agents (/course/blender-mcp-agentic-3d-scenes) | ahujasid/mcp-for-blender | Live TCP socket MCP server letting an agent model, rig, and render 3D AJ. |
| 05 | Three.js & WebGPU in Production: Interactive 3D Mascots (/course/threejs-webgpu-3d-mascots) | mrdoob/three.js | Lazy-loaded <Aj3dMascotViewer /> with orbital camera, rim lights, and seek(t). |
| 06 | GSAP Deterministic Timelines & SVG Morphing (/course/gsap-deterministic-timelines-svg) | greensock/GSAP | Frame-locked tl.time(t) UI morphs and 57-path SVG bone animations. |
| 07 | HyperFrames: Agent-Native HTML-to-Video Rendering (/course/hyperframes-html-to-video-agents) | heygen-com/hyperframes | Zero-React standalone HTML/Canvas video compiler driven by window.seek(t). |
| 08 | faster-whisper on Local GPU: Word-Level Captions & Lip-Sync (/course/faster-whisper-word-level-captions) | SYSTRAN/faster-whisper | Sub-20ms word alignment pipeline driving dynamic captions and mascot visemes. |
| 09 | Chatterbox TTS: Zero-Shot Local Voice Cloning (/course/chatterbox-local-voice-cloning) | resemble-ai/chatterbox | Expressive local voiceover synthesizer with phonetic code identifier rules. |
| 10 | FFmpeg for AI Video Pipelines & Contact-Sheet Critics (/course/ffmpeg-ai-video-contact-sheet-critics) | FFmpeg/FFmpeg | -14 LUFS EBU R128 audio normalization, 6-across contact sheets, and H.264/AV1 mastering. |
| 11 | Chrome DevTools MCP: Self-Healing Visual Agent Loops (/course/chrome-devtools-mcp-visual-agent-loops) | ChromeDevTools/chrome-devtools-mcp | Automated DOM/WebGL inspection loop that catches overlapping text before export. |
| 12 | Impeccable: Automated Design & Motion Polish Gates (/course/impeccable-automated-design-critique) | pbakaus/impeccable | Pre-export design critic enforcing W3C design tokens and banning generic AI gradients. |
| 13 | ComfyUI for 3D Turnarounds & Generate-Then-Trace (/course/comfyui-3d-turnarounds-video-workflows) | Comfy-Org/ComfyUI | Reproducible API workflow for multi-view mascot sheets and base motion plates. |
| 14 | yt-dlp & Librosa: Reference Grammar & Beat Extraction (/course/yt-dlp-librosa-reference-beat-extraction) | yt-dlp/yt-dlp | Automated reference shotlist extractor (style_guide.md) and 120 BPM beats.json generator. |

## 5. Verdict: Purrfect or Pass?

- **Purrfect For**: Developer educators, SaaS founders, and frontend engineers who want agency-grade launch films, interactive 3D mascots (like **3D AJ**), and automated video courses rendered deterministically from Git-versioned TypeScript and Python code for `$0` in licensing fees.
- **Pass If**: You need photorealistic live-action human cinema with complex cloth physics (where diffusion video models like Veo 3.1 still belong) or you are unwilling to write a structured `brief.md` and `window.seek(t)` render contract.

Head over to [\`/mascot-lab\`](/mascot-lab) right now to toggle between **2D Vector AJ** and **3D Three.js GLB AJ**, scrub the **\`window.seek(t)\`** timeline, download `aj-3d-mascot.glb`, and explore all 19 new Courses on [\`/courses\`](/courses)!