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

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` 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.

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.

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:

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.

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)

# 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:

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:

// 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` 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`. 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

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)

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` 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`!