How I Built an AI That Turns Plain English Into 3Blue1Brown-Style Math Animations
Why I built AI Animator, how it works under the hood, and what I learned building a self-correcting AI pipeline.https://youtu.be/9kBe0xwtrbIIf you’ve ever watched a 3Blue1Brown video, you know the feeling: a complex idea — eigenvectors, Fourier transforms, neural networks — suddenly clicks because…
Annons
Annons
Why I built AI Animator, how it works under the hood, and what I learned building a self-correcting AI pipeline.https://youtu.be/9kBe0xwtrbIIf you’ve ever watched a 3Blue1Brown video, you know the feeling: a complex idea — eigenvectors, Fourier transforms, neural networks — suddenly clicks because you saw it move. That clarity doesn’t come for free.Grant Sanderson built Manim, a Python animation engine, specifically to make those visuals possible — and it’s brilliant, but it’s also a real programming tool.You have to write scene classes, position objects with coordinates, choreograph timing, and debug cryptic rendering errors before you get anything watchable.That gap — between “I have an idea for a visual explanation” and “I have working animation code” — is exactly what I set out to close with AI Animator.The premise is simple: type a sentence like “show a square morphing into a circle while a gold gradient sweeps across it” and get back a rendered, exportable animation — no Python, no Manim syntax, no fighting with LaTeX errors at 1 a.m.Here’s how it came together.https://youtu.be/9kBe0xwtrbIThe Problem With “Just Ask an LLM to Write Manim Code”The naive version of this idea is easy to imagine: send a prompt to an LLM, ask it to write Manim code, run the code, done. I started there, and it broke almost immediately.Manim code fails often — deprecated methods, shape dimension mismatches, LaTeX compilation errors, subtle API changes between versions. A single bad line anywhere in a scene and the whole render dies with a stack trace that means nothing to a non-programmer.If AI Animator was going to be usable by someone who isn’t a Manim expert, “the AI wrote broken code” couldn’t be an acceptable end state. It had to be the system’s job to notice and fix that, not the user’s.That single constraint is what shaped almost every architectural decision that followed.What AI Animator Actually DoesAt its core, AI Animator is a conversational studio for generating and iterating on animations:Type a prompt describing the scene you want.The system generates real Manim Python code behind the scenes.The code is safety-checked and executed in a sandbox.You get back a rendered MP4 and the underlying Python, side by side.You can keep iterating conversationally — “make the square gold,” “slow down the morph,” “add the derivative equation” — and each version is kept in a timeline you can scrub back through.It’s less “prompt an image generator” and more “pair-program an animation with an AI that never gets tired of your revisions.”The ArchitectureI designed AI Animator as three distinct layers, each with a single clear responsibility:1. Next.js frontend — the studio. A split-view workspace: a conversational panel on one side (the “AI Director”), and an interactive video player plus Python code inspector on the other. Renders stream in over WebSockets so you watch progress in real time rather than staring at a spinner. A version history ribbon lets you jump between scene iterations, and a model switcher lets you pick which LLM is doing the generating.2. FastAPI backend — the brain. This is where conversations and scene versions are managed, where the provider-agnostic LLM layer lives, and — most importantly — where the self-correction loop runs. It’s built on SQLAlchemy with a schema designed to be multi-tenant ready from day one, not bolted on later.3. The render engine — the hands. Generated code doesn’t just run blind. It first passes through an AST-based static safety linter, then executes in a sandboxed runner (Docker or local), with full stdout/stderr capture and multi-resolution MP4 export at the end.Next.js Frontend → FastAPI Backend → LLM Provider Layer ↓ ↓ Sandboxed Render Engine ← Self-Correction LoopThe Part I’m Actually Proud Of: Self-CorrectionThe heart of the system is a feedback loop that mimics what a human developer does when Manim throws an error at them: read the traceback, understand what broke, fix it, try again.When generated code triggers a runtime error — a deprecated method, a LaTeX compilation failure, a shape dimension mismatch — the system doesn’t just fail and hand the user a wall of Python errors. It:Captures the clean stack trace.Feeds that trace back into the LLM with a targeted “here’s what broke, fix it” prompt.Re-runs the corrected code.Repeats, up to three automatic attempts, before surfacing anything to the user.This is what turns AI Animator from a demo into something usable by people who’ve never seen a line of Python. The AI isn’t just a code generator — it’s a debugger that argues with itself until the scene actually renders.Safety First: You Can’t Just exec() Whatever an LLM WritesExecuting AI-generated code is inherently risky, and I didn’t want to hand-wave that away. Before anything runs, generated code passes through an AST (Abstract Syntax Tree) static linter that:Blocks dangerous imports — os, sys, subprocess, socket, urllib.Blocks dangerous calls — eval, exec, open, __import__.Verifies the code actually follows the expected shape: a proper class GenScene(Scene): with a construct(self) method.Only code that passes this check ever reaches the sandbox. It’s a small layer, but it’s the difference between “AI writes and runs arbitrary code” and “AI writes code inside a fence it can’t climb out of.”Provider-Agnostic by DesignI didn’t want AI Animator locked to a single model. Different LLMs have different strengths, different costs, and different failure modes when writing code — and pricing and quality both shift constantly. So the whole generation layer sits behind a provider abstraction that currently supports:Google Gemini 2.0 FlashAnthropic Claude 3.7 SonnetOpenAI GPT-4oA zero-cost offline mock engine for development and testingSwitching providers is a config change (or a click in the UI’s key modal), not a rewrite. That mattered to me both practically — API pricing and rate limits shift — and as a design principle: the product shouldn’t be hostage to one vendor’s model roadmap.Conversational Iteration, Not One-Shot GenerationNobody gets an animation right on the first prompt — including 3Blue1Brown, I’d guess. So iteration had to feel like a conversation, not a restart. Every time you ask for a change, the previous scene’s code is automatically fed back to the LLM as context, so “make the square gold” actually means take the existing scene and change the square’s color, not generate something new that happens to have a gold square in it. Every version is kept, so you can scrub back through a scene’s history the same way you’d step through commits.What’s NextAI Animator is live and working end-to-end — prompt in, rendered animation out, with self-correction and multi-LLM support already functional. From here, the roadmap is about depth: richer scene primitives, longer multi-scene compositions, and tightening the self-correction loop so fewer retries are needed per render.If you want to see it or poke at the code, it’s open on GitHub: Abhishekksoni/ai-animator, with a live demo at ai-animator-zeta.vercel.app.If you’ve ever wanted to explain an idea the way 3Blue1Brown does, without learning Manim from scratch first, that’s exactly the gap this project is trying to close.If you build something with it, break it, or have ideas for where it should go next, I’d love to hear about it.This story is published under the Generative AI publication. Connect with us on LinkedIn and follow Zeniteq to stay in the loop with the latest AI stories. Let’s shape the future of AI together!How I Built an AI That Turns Plain English Into 3Blue1Brown-Style Math Animations was originally published in Generative AI on Medium, where people are continuing the conversation by highlighting and responding to this story.