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.
🎥 Full video walkthrough
🚀 The Problem with Traditional Motion Graphics
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:
- Designing individual visual elements.
- Positioning objects on the screen.
- Creating and adjusting keyframes.
- Managing animation timelines.
- Synchronizing visuals with narration.
- Exporting and reviewing the final video.
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.
🧠The AI Motion Graphics Stack
My workflow uses three main tools:
1. ChatGPT — The Creative Director
I use ChatGPT to plan my animations.
It helps me transform a video transcript into a structured storyboard that defines:
- What should appear on screen.
- When each animation should start and end.
- How elements should move.
- What transitions should be used.
- Which images and visual assets should appear.
Essentially, ChatGPT acts as my motion graphics designer.
2. Codex — The Developer
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.
3. Remotion — The Video Engine
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.
🛠️ Step 1: Set Up Your Remotion Project
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.
đź“ť Step 2: Generate a Timestamped Transcript
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:
- Thinks about what to do.
- Takes an action.
- Observes the result.
- Decides what to do next.
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:
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:
- At 0 seconds, display the AI model.
- At 4 seconds, animate the decision-making process.
- At 8 seconds, show the agent taking an action.
- At 13 seconds, illustrate the repeating agent loop.
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.
For example:
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.
🎨 Step 3: Use ChatGPT to Create a Detailed Storyboard
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:
- The specific transcript section I want to animate.
- The full transcript for context.
- My preferred visual style.
- The location of my visual assets.
- The output resolution and frame rate.
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.
đź’» Step 4: Let Codex Build the Motion Graphics
Now comes the fun part.
I open Codex inside VS Code and provide the storyboard generated by ChatGPT.
Codex can then:
- Create React components for individual scenes.
- Generate SVG graphics where needed.
- Add transitions and animations.
- Position elements on screen.
- Synchronize scenes with the transcript.
- Integrate existing images and assets.
- Prepare the final Remotion composition.
Because Remotion uses React, Codex can generate the animation programmatically.
For example, here’s a simple Remotion animation:
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:
- Render screenshots of important frames.
- Inspect the visual layout.
- Identify overlapping or misplaced elements.
- Fix any issues it detects.
- Verify that animations follow the storyboard.
This doesn’t guarantee perfect results, but it helps catch common visual problems before rendering the entire video.
🎥 Step 5: Preview, Refine, and Render
Once Codex finishes generating the animations, I open Remotion Studio.
This is where I can:
- Preview the complete animation.
- Scrub through individual frames.
- Verify scene transitions.
- Check synchronization with narration.
- Identify visual issues.
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.
For example:
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.
💡 What I’ve Learned from Using AI for Motion Graphics
After experimenting with this workflow, a few things have become clear.
1. Good Storyboards Matter More Than Fancy Prompts
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.
2. Timestamps Make a Huge Difference
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.
3. Simpler Animations Often Work Better
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.
4. AI Doesn’t Eliminate the Need for Review
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.
🔥 Who Can Benefit from This Workflow?
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.
🚀 Final Thoughts: AI Is Changing Video Production
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.
Top comments (2)
What do you think?
Would you use AI to create motion graphics, or do you prefer traditional animation tools?
The biggest advantage of using AI for motion graphics isn't just generating visuals faster; it's making iteration cheaper.
When you can test different concepts, timing, and styles without rebuilding everything manually, you have more room to experiment.
The real skill becomes knowing what to automate and where human creative judgment still makes the difference.