📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Video as Code: My AI Animation Stack

Jake Van Clief13:12

Transcription

The animations that you're going to see in this video would have taken me probably a full week, if not a month, to make. And now I make them in under an hour. And honestly, they turn out pretty great. I've made all sorts of different types. And I know how that sounds, right? This idea that, okay, it's an AI video. AI promises this something revolutionary, gamechanging, the future of content, and then you try it and the output's mediocre, uncanny, or require so much cleanup that you wonder why you bothered. But that's exactly why. and how I want to show you this. It's not polish results, but the process and what you'll find isn't magic. It's infrastructure. It's documentation, specifications, component libraries. It's honestly software engineering applied to a creative problem.

But let me go ahead and start with what you need if you wanted to do this yourself. I use cloud code, but you can use codeex or any other sort of coding agent. Um, on top of that, I also use some sort of IDE. You can use VS Code, cursor, anti-gravity, and just throw the plug in for each of those. Finally, I use a library called Remotion, uh, which generates most of the processes, and then I throw that all into some sort of video editing software, which I personally use, Cap Cut, cuz it's super easy to use. I'm not going to walk you through the installation because there's plenty of tutorials uh, for that and it would eat up time better spent on the actual process of moving between these. Just know if you have these tools set up and running, everything I'm about to describe to you is available to you. And again, it's not tool specific. The tools actually don't matter themselves. It's the process and how you use them, how they work together. And honestly, that's what you'll see in all of my videos. I'm not just doing basic tutorials. I'm giving you a framework to how to use tools like these, these new abstractions of AI all together in a way that actually works.

Now, here's the part that surprised me when I started doing this. The hard work isn't the AI. It's not the code, it's the spec, it's the breakdown. It's the documents that describe what the video should be. And not vaguely, not make it look cool, but precisely. What's the structure? What happens in each scene? What's the timing? What's the visual elements appear? When should they appear? What do you want to emphasize? And what should stay in the background? If you ever worked with a designer or an animator, you know this is as a brief. And there's this quote from uh David Ugle. He said, "Give me the freedom of a tight brief." Which sounds like a contradiction, but it isn't. When the brief is clear, when it defines the problem precisely, the person executing it knows exactly where they're going. They can focus on solving the problem instead of just sitting there trying to figure out what the problem even is.

My spec or the spec that you're making, the markdown file is the brief. It's where your ideas become concrete enough for the system for the AI to actually execute them. And this is where most of your creative thinking should be happening. What's the thesis of this video? What's the arc? What are the scripts? What are the moments that need to land? What should feel fast and what should feel slow? A loose spec or a poor spec means that Claude or your AI agent makes more interpretive choices or hallucinates more. A tight spec means you're directing it at every beat. And really, it allows you to do a lot more focused things. You can do both, and it depends on where you want your creative energy to go. But I'll show you what one of my specs look like. And again, as I said, it's actually just a markdown file, which is a type of file that organizes text in a very specific way. It has headings for each scene, descriptions of what happens, notes on timing and emphasis. It's really nothing too fancy, but it's the document that makes everything else possible. And this isn't just for creative processes. This is for code. This is for anything you're doing with AI agents. And you'll start to notice how powerful this process is.

Once you have a spec, the building phase is where it becomes animation. And here's what actually is happening. Claude code or your agent is going to read through the spec, but it also reads your documentation if the spec is mentioning, which mentions maybe style guides. This is going to define your visual language. You're going to define minimal texts. You're going to define color pallets, animation timing. It's going to read through a component registry. Now, I created this, but it's basically just a list of reusable pieces that you've already built in previous videos or you're building with the AI before it even starts, right? Text animations, backgrounds, transitions, data visualizations. Then from there, you're actually having it build each scene one by one. And each scene is just a React component, right? This a front-end uh software. And Remotion takes those React components and actually allows you to render them frame by frame into a long video. And there's an insight from a man named Johnny Burgerer who actually created reotion. A video is just a function of images over time. If you change content every frame, you get animation. And React is already good at describing what should appear based on some state. So instead of the state being user input, the state is the current frame number. You tell React what frame 47 should look like and it renders it. Do that for every frame, you now have a video. What this means in practice is that anything that works in a web browser can be part of your animation. CSS, SVG, canvas, the entire ecosystem of JavaScript libraries can now be placed into your videos. You see, you're not learning a new tool from scratch. If you're a front-end developer, you're using tools that have already existed for a new purpose.

So, the workflow actually looks more detailed like this. I give Claude the spec, point it at the documentation, I tell it which scene to build, it writes the code, I preview it in Remotion Studio, and if something isn't right, I literally just describe in natural language what needs to change, and it adjusts. We iterate until the scene matches what I had in mind. The component library matters at this point because I'm not building every single animation from scratch. It's not like every time I'm making a video, I'm just starting from fresh. I actually have building blocks that are traditional code, a text component that handles entrance animations or enforces readable sizes, a scene container that handles safe margins and backgrounds. Effects like glitch text or counting numbers. When Claude builds a scene, it assembles these pieces according to the spec. It's not inventing everything new, but rather this kind of aspect of like, hey, I should compose a new element that already works together in other elements. This is just separations of concerns. It's the same principle that makes any complex software manageable. The spec is separate from the implementation. The components are reusable. The style guide encodes decisions so you don't have to make them every time. Now, if anyone has written software before, this should actually seem very familiar. And even if you haven't, just know that this is the principle. Break complex things into smaller pieces that can be understood and changed independently.

From there, once the scenes are relatively built, I just export it from Remotion or even just use OBS to record my screen, so I don't have to worry about render processes or codec errors. And this just is something I can upload straight into Cap Cut. Now, this is where the animation becomes much more of a video. I usually do a voice over. I cut and make sure that it actually syncs up. I maybe add some music. And there's some things that right now are a little bit easier to do by hand. So, I haven't really automated that process, but I'm working on it. Now, scrubbing through and nudging a transition to land exactly on a word is honestly faster in a video editor than describing it in the spec and waiting for code to regenerate. The animation is not the finished video. It's simply a starting point. Now, it is a substantial one. I still spend real time in this phase. I'm cutting so many sections that don't work when I hear them out loud. I'm re-recording lines that don't land. I'm adding photos or screenshots or footage to support the narration. The animations give me a foundation, but the finished video requires refinement. So when I say under an hour, I mean the animation, the part that would have taken a week if I was doing it frame by frame and After Effects. The finished video still takes time, but I'm spending that time on the parts I actually want to control. The pacing, the moments that need a real image instead of motion graphics.

Now, the question isn't really about whether AI can make videos or anything like that. It's more where do you want to spend your creative energy? And for me, the answer is not automating from scratch, not animating everything. Honestly, I'd rather have something real to react and to shape to rather than start with a blank timeline or focus on the actual content itself. Now, that being said, let's zoom out for a second because I think what's happening here, as I mentioned earlier in the video, is part of a much larger pattern. When Garage Band came out in 2004, Steve says he wanted to democratize music making. And there's this statistic that stuck with me. Suddenly, every teenager with a Mac could produce music that would have required a $100,000 studio. 5 years earlier, Steve Lacy made tracks for Kendrick Lamar on a cracked iPhone with GarageBand and a $20 eye ring. That phone is now in the Smithsonian. Canva did something similar for visual design. Melanie Perkins was rejected by over a hundred investors who didn't think design tools for non-designers was a real market. Now 200 million people use it monthly. The pattern is always the same. A tool emerges that gives people access to execution they couldn't do before. Not replacing professionals, but letting people who have ideas actually realize them. And there's a really messy period early on which designers called the ransom note effect. When desktop publishing first appeared, everyone used 15 different fonts on one page, but it kind of went all over. And then over time, the floor kind of rose. More people creating means more good work in absolute terms. Even if the average quality takes time to catch up. I think we're in that motion or that moment for AI and animation and video. The tools exist. The quality can be good. And people who couldn't afford a motion graphics artist or couldn't justify a week of their own time can now make something real.

And this might be kind of powerive, but I think this is the key to how all of this is going to work. It's that constraints enable creativity. There's actual research on this. An inverted U-shaped relationship between constraints and creative output. Too few constraints, you get paralysis, the blank canvas problem. Too many, you actually get stifled. But right in the middle, with the right boundaries, creativity actually increases. Dr. Zeus wrote Green Eggs and Ham because his editor bet him $50 he couldn't write a book with only 50 words. He made flowcharts on his walls to track his vocabulary. And the book sold 200 million copies, and it is his best selling work ever. Spielberg couldn't get the mechanical shark to work in Jaws, so he showed floating barrels and point off view shots instead. The shark doesn't fully appear until 80 minutes into the film. The constraint made it better somehow. The spec, the style guide, the component registry, these aren't limitations I work around. They're boundaries that make the output better. Instead, this case, Claude is now the one constrained. It knows the rules. It focuses on execution instead of wondering what I want.

So let me come back to where we started. The animations that would have taken a week are now done in an hour. That part is true and I want you to understand what actually is behind that claim. AI is not magic. I built a system. The spec is where my creative thinking lives and the predefining constraints. The documentation encodes my preferences and my lessons from past mistakes. Claude executes within those boundaries, assembling components that already work together into scenes that match what I describe. Then I take that output and I refine it. I cut it. I add footage. I shape it into something finished. The creative work didn't disappear in the same way we would imagine it actually moving. The spec, the refinement, that whole area is actually where I want to spend my attention. Now, if you have ideas and want to visualize, but you're not an animator, this is probably something you want to focus on. Not easy. There's setup and learning and narration, but it's possible in a way that was never possible before. You can finally get ideas into a visual form that used to require skills most people don't have. Years of After Effects or money to hire someone who did. Now it requires a process, right? Tools that are freely available, a way of thinking about constraints and separations of concerns. And honestly, most of those constraints are just software engineering but applied to creative work. This process can be learned and I really recommend each of you try it. Everything I've described, I have documented. The tools are there. If you want any of these specs or these scripts or these designs, just comment and and ask for them. I'll happy to email them to you. But if you have ideas that have been stuck in your head because you couldn't figure out how to make them visible, maybe now you can. Other than that, I hope this helps out everyone. As always, stay curious.