🎬 I Stopped Making Motion Graphics Manually. Here’s How I Use AI Instead.

A developer has described a workflow that combines ChatGPT, OpenAI's Codex coding agent, and the open-source Remotion framework to turn ordinary video recordings into narration-synced motion graphics without manual keyframing in After Effects. ChatGPT converts a timestamped transcript into a storyboard, Codex generates React/Remotion animation code, and Remotion Studio previews and renders the final video.

What if you could create professional motion graphics for your videos without spending hours manually animating everything? No After Effects. No manually setting keyframes. No endlessly adjusting animation timelines. Just ChatGPT + Codex + Remotion. I’ve been experimenting with a workflow that lets me turn ordinary video recordings into animated explainer videos using AI. And here’s what makes it interesting: The animations actually follow what I’m saying. When I introduce a concept, the corresponding visual appears at exactly the right moment. When I move to the next idea, the animation transitions along with my narration. All without manually creating every animation. In this article, I’ll walk you through my entire workflow, from a simple video recording to a finished motion graphics video. And the best part? You don’t need to be an experienced programmer or motion graphics designer to get started. If you’ve ever tried creating motion graphics for YouTube videos, tutorials, or educational content, you probably know how time-consuming the process can be. Traditionally, creating motion graphics involves: Tools like Adobe After Effects are incredibly powerful, but creating polished animations requires time, experience, and patience. And when you’re producing educational videos regularly, spending hours animating a 20-second explanation isn’t always practical. That’s what got me interested in AI-powered motion graphics generation. Instead of manually animating everything, what if I could describe the visuals I wanted and let AI build them? Turns out, we can. My workflow uses three main tools: I use ChatGPT to plan my animations. It helps me transform a video transcript into a structured storyboard that defines: Essentially, ChatGPT acts as my motion graphics designer. Once the storyboard is ready, I pass it to Codex. Codex takes the instructions and generates the actual animation code using React and Remotion. It creates scenes, positions elements, adds transitions, and synchronizes everything with the narration. Remotion is an open-source framework that lets developers create videos programmatically using React. Instead of building animations through a traditional editing timeline, you define scenes and animations through code. Remotion then renders that code into a video. This makes it particularly interesting when combined with AI coding agents. The workflow looks like this: Original Video Recording | v Timestamped Transcript | v ChatGPT Storyboard | v Codex React Code | v Remotion Preview + Render | v Final Motion Graphics ChatGPT plans → Codex builds → Remotion renders. That’s the foundation of the entire workflow. Let’s start by creating a new Remotion project. First, create an empty folder and open it in VS Code. Then open your terminal and run: npx create-video@latest . This initializes a Remotion project in your current directory. During setup, I usually select the Blank template because I prefer building animations from scratch. Once the project is initialized, install the dependencies if they weren’t installed automatically. npm install Next, start the development server: npm run dev This launches Remotion Studio, where you can preview your animations, inspect individual frames, and render your final video. At this point, we have a blank project. Now we need to give AI something to work with. Bonus: Install Remotion Agent Skills I also install the Remotion agent skills for my coding agent. These provide additional instructions and best practices for working with Remotion. They help AI coding agents understand common animation patterns, composition structures, and recommended approaches. Here’s something important about my workflow: I don’t start by asking AI to generate random animations. I start with the actual video recording. For example, in one of my previous YouTube videos, I explained how AI agents work. There’s a section where I introduce the concept of an agent loop. I wanted to create an animation showing how an AI agent repeatedly: But for the animation to work, AI needs to understand two things: WHAT I’m saying and WHEN I’m saying it. That’s where timestamped transcripts come in. I generate an SRT transcript of my recording. Here’s a simplified example: php 1 00:00:00,000 -- 00:00:04,000 At the center of an AI agent is an AI model. 2 00:00:04,000 -- 00:00:08,000 The model helps decide what to do next. 3 00:00:08,000 -- 00:00:13,000 The agent takes an action and observes the result. 4 00:00:13,000 -- 00:00:18,000 This process continues until the task is complete. Now AI knows exactly when each concept is introduced. For example: This is what makes the animations synchronize with the narration. You can generate SRT transcripts using any transcription tool that supports timestamps. Organizing Your Assets I also place any required images, logos, and other visual assets inside my Remotion project’s public directory. my-motion-graphics/ │ ├── public/ │ ├── transcript/ │ │ └── transcript.srt │ │ │ ├── image-assets/ │ │ ├── ai-model.png │ │ ├── agent-icon.svg │ │ └── background.png │ │ │ └── audio/ │ └── narration.wav │ ├── src/ │ └── package.json Now we have everything we need: The original narration, a timestamped transcript, and our visual assets. This is probably the most important part of the entire process. One mistake I initially made was giving AI vague instructions like: “Create some cool motion graphics for this video.” The problem? AI might generate something visually interesting, but that doesn’t necessarily mean the animations help explain the content. Instead, I use ChatGPT to create a detailed storyboard before generating any code. I provide: For example, here’s a simplified version of the prompt: Write a prompt for codex to create a motion graphics video using Remotion. Give it a personality of an expert motion graphics designer. I want to create professional motion graphics for a YouTube explainer video using Remotion. Your task is to analyze the provided transcript and create a detailed animation storyboard. Requirements: 1. Synchronize animations with the transcript timestamps. 2. Create visuals that help explain the narration. 3. Use a clean, minimal explainer-video style. 4. Avoid unnecessary or distracting animations. 5. Include scene-by-scene animation instructions. 6. Specify transitions, element positioning, and animation timing. 7. Use existing visual assets wherever appropriate. 8. Output resolution: 4K 3840x2160 . 9. Frame rate: 30 FPS. Transcript section: PASTE TRANSCRIPT Full video transcript: PROVIDE FULL TRANSCRIPT Visual assets: public/image-assets/ Generate a detailed storyboard that can be passed directly to an AI coding agent. ChatGPT then generates a structured storyboard. This is much more useful than simply asking AI to generate animations. We now have a clear visual plan. And that plan is what we give to Codex. Now comes the fun part. I open Codex inside VS Code and provide the storyboard generated by ChatGPT. Codex can then: Because Remotion uses React, Codex can generate the animation programmatically. For example, here’s a simple Remotion animation: js import { useCurrentFrame, interpolate } from "remotion"; export const AnimatedTitle = = { const frame = useCurrentFrame ; const opacity = interpolate frame, 0, 20 , 0, 1 , { extrapolateRight: "clamp", } ; const translateY = interpolate frame, 0, 20 , 40, 0 , { extrapolateRight: "clamp", } ; return <div style={{ opacity, transform: translateY ${translateY}px , fontSize: 80, fontWeight: "bold", color: "white", }} How AI Agents Work </div ; }; This creates a simple title animation that fades in while moving upward. Now imagine combining dozens of components like this with precise timing, transitions, and visual elements. That’s essentially what Codex helps automate. And instead of manually writing all this code, I describe the animation I want. Let Codex Verify Its Own Work Another useful part of my workflow is asking Codex to verify the generated animations. I instruct it to: This doesn’t guarantee perfect results, but it helps catch common visual problems before rendering the entire video. Once Codex finishes generating the animations, I open Remotion Studio. This is where I can: If something doesn’t look right, I don’t necessarily need to modify the React code myself. I can simply tell Codex what needs to change. The transition between scene 2 and scene 3 feels too abrupt. Make the transition smoother and ensure the elements don't overlap. Also, keep the AI model icon visible throughout the entire sequence. Codex can update the animation accordingly. Once everything looks good, I render the final video using Remotion Studio or ask Codex to handle the rendering. And that’s it We now have a finished motion graphics video synchronized with the original narration. After experimenting with this workflow, a few things have become clear. The biggest improvement came from separating the planning and implementation stages. Instead of asking one AI agent to figure everything out, I use ChatGPT to design the animation and Codex to implement it. This gives me much more control over the final result. Without timestamps, animations might look good but appear at the wrong moments. Using SRT transcripts makes it easier to align visuals with the narration. However, timestamps are only a starting point. Some animations still need timing adjustments during preview. Not every sentence needs an elaborate animation. Sometimes a simple diagram, highlighted keyword, or animated arrow communicates an idea better than an overly complicated sequence. The goal should always be to make the explanation easier to understand. AI can generate impressive animations, but the first version isn’t always perfect. You may still need to adjust timing, fix layouts, or refine transitions. The advantage is that you can make many of these changes through natural-language instructions instead of manually editing keyframes. Although I primarily use this for YouTube videos, there are plenty of other applications. YouTube creators: Create animated explanations, visual storytelling sequences, and educational B-roll. Developers: Turn technical concepts, architecture diagrams, and system workflows into animations. Educators: Create engaging visual explanations for complex topics. Startup founders: Build product explainers, feature demonstrations, and promotional videos. Content marketers: Generate motion graphics for social media and marketing campaigns. And because Remotion is code-based, you can reuse animation components and visual styles across multiple videos. That makes this workflow especially interesting for creators producing content regularly. A few years ago, creating professional motion graphics required specialized animation skills and significant manual effort. Today, AI coding agents and frameworks like Remotion are making programmatic video creation much more accessible. And what excites me most isn’t just the ability to generate animations faster. It’s the possibility of creating visual explanations that are directly connected to the content itself. Instead of manually deciding when every element should appear, we can use transcripts, storyboards, and AI agents to automate much of that process. Of course, AI-generated motion graphics still require creative direction and quality checks. But the amount of manual work we can eliminate is already impressive. The future of video editing might involve a lot less dragging keyframes and a lot more describing what you want to create. And personally, I’m excited to see where this goes.