The 14 Open-Source Repos Powering Code-Driven Video in 2026: How We Built 3D AJ the Cat CodingCat.dev wired a 14-repository open-source stack into its production site and a local RTX 5090 video studio to build a 3D Vinyl-Toy AJ the Cat mascot, using Three.js, Blender and Blender MCP (ahujasid/mcp-for-blender) for the aj-3d-mascot.glb model. The runtime (AjAnimatedMascot.astro and Aj3dMascotViewer.astro) runs a shared deterministic window.seek(t) motion engine in src/lib/aj-motion-engine.ts with closed-form harmonic springs and seeded noise, and the site added 120 BPM audio-reactive lip-sync to its podcasts and automated a 1080p Course Factory with faster-whisper, FFmpeg and headless Chrome DevTools MCP. The build rests on the argument, drawn from a viral breakdown by @0xnicc0 and @seeconvm, that foundation models cannot output an MP4 directly and that code-rendered video requires a strict frame contract plus an FFmpeg contact-sheet critique loop. AI & MCP Agents https://codingcat.dev/topic/ai 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 https://codingcat.dev/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. | 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 : Alex's 2026 Code-Driven Video & 3D Web Tier List All 14 Repos Ranked 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. Three.js mrdoob/three.js Browser 3D & WebGPU The undisputed king of browser 3D. Zero plugin install for users, native glTF 2.0 .glb support, and instant seek t scrubbing. FFmpeg FFmpeg/FFmpeg Media Compositor & Critic Non-negotiable infrastructure. Every frame pipeline, audio normalizer, and contact-sheet critic ends in FFmpeg. faster-whisper SYSTRAN/faster-whisper Word-Level Audio Alignment 4x faster than stock Whisper with lower VRAM via CTranslate2. Gives agents an exact millisecond clock for every spoken word. Blender MCP ahujasid/mcp-for-blender Agentic 3D Scene Control Turns Blender from a manual GUI into an agent-programmable 3D compiler. Essential for automated mesh inspection and rigging. Blender blender/blender 3D Modeling, Rigging & Baking The open-source 3D standard. Combined with Python bpy, it eliminates manual 3D artist bottlenecks. Remotion remotion-dev/remotion React Video Composition Best-in-class DX when your team already builds in React and Tailwind CSS. Deterministic frame rendering out of the box. Remotion Skills remotion-dev/skills Agent Procedural Memory Crucial context upgrade. Without this skill, LLMs write brittle React effects instead of pure useCurrentFrame math. Chrome DevTools MCP ChromeDevTools/chrome-devtools-mcp Live DOM & Frame Inspection Closes the blind-agent gap. Your agent sees the exact DOM, computed styles, and pixel output in real time. GSAP greensock/GSAP Timeline & UI Motion Battle-tested timeline control. Just remember to pause auto-ticking and drive tl.time t from window.seek t in render mode. HyperFrames heygen-com/hyperframes Agent-Native HTML-to-Video Purpose-built for coding agents that prefer writing raw HTML/Canvas over full React bundles. Fast and lightweight. Chatterbox resemble-ai/chatterbox Open-Source Voice Synthesis Impressive open-source expressive voice cloning with emotion control. Great local alternative to paid ElevenLabs seats. ComfyUI Comfy-Org/ComfyUI Node-Based Diffusion & 3D Gen Unmatched local GPU control for image-to-3D plates and texture maps, though JSON workflow graphs require disciplined versioning. Impeccable pbakaus/impeccable Automated UI & Design Critic Great automated design gate to stop agents from shipping generic purple-gradient SaaS clichés. yt-dlp yt-dlp/yt-dlp Reference Media Ingestion Indispensable utility for reference grammar extraction, though strictly an ingestion CLI rather than a rendering engine. 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 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 : 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 : Both