{"slug": "i-stopped-making-motion-graphics-manually-heres-how-i-use-ai-instead", "title": "🎬 I Stopped Making Motion Graphics Manually. Here’s How I Use AI Instead.", "summary": "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.", "body_md": "What if you could create professional motion graphics for your videos without spending hours manually animating everything?\n\nNo After Effects. No manually setting keyframes. No endlessly adjusting animation timelines.\n\nJust **ChatGPT + Codex + Remotion.**\n\nI’ve been experimenting with a workflow that lets me turn ordinary video recordings into animated explainer videos using AI.\n\nAnd here’s what makes it interesting:\n\nThe animations actually follow what I’m saying.\n\nWhen 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.\n\nAll without manually creating every animation.\n\nIn this article, I’ll walk you through my entire workflow, from a simple video recording to a finished motion graphics video.\n\nAnd the best part? **You don’t need to be an experienced programmer or motion graphics designer to get started.**\n\nIf you’ve ever tried creating motion graphics for YouTube videos, tutorials, or educational content, you probably know how time-consuming the process can be.\n\nTraditionally, creating motion graphics involves:\n\nTools like Adobe After Effects are incredibly powerful, but creating polished animations requires time, experience, and patience.\n\nAnd when you’re producing educational videos regularly, spending hours animating a 20-second explanation isn’t always practical.\n\nThat’s what got me interested in AI-powered motion graphics generation.\n\nInstead of manually animating everything, what if I could describe the visuals I wanted and let AI build them?\n\nTurns out, we can.\n\nMy workflow uses three main tools:\n\nI use ChatGPT to plan my animations.\n\nIt helps me transform a video transcript into a structured storyboard that defines:\n\nEssentially, ChatGPT acts as my motion graphics designer.\n\nOnce the storyboard is ready, I pass it to Codex.\n\nCodex takes the instructions and generates the actual animation code using React and Remotion.\n\nIt creates scenes, positions elements, adds transitions, and synchronizes everything with the narration.\n\nRemotion is an open-source framework that lets developers create videos programmatically using React.\n\nInstead of building animations through a traditional editing timeline, you define scenes and animations through code.\n\nRemotion then renders that code into a video.\n\nThis makes it particularly interesting when combined with AI coding agents.\n\nThe workflow looks like this:\n\n```\n         Original Video Recording\n                    |\n                    v\n         Timestamped Transcript\n                    |\n                    v\n           ChatGPT (Storyboard)\n                    |\n                    v\n           Codex (React Code)\n                    |\n                    v\n         Remotion (Preview + Render)\n                    |\n                    v\n          Final Motion Graphics\n```\n\n**ChatGPT plans → Codex builds → Remotion renders.**\n\nThat’s the foundation of the entire workflow.\n\nLet’s start by creating a new Remotion project.\n\nFirst, create an empty folder and open it in VS Code.\n\nThen open your terminal and run:\n\n```\nnpx create-video@latest .\n```\n\nThis initializes a Remotion project in your current directory.\n\nDuring setup, I usually select the Blank template because I prefer building animations from scratch.\n\nOnce the project is initialized, install the dependencies if they weren’t installed automatically.\n\n```\nnpm install\n```\n\nNext, start the development server:\n\n```\nnpm run dev\n```\n\nThis launches Remotion Studio, where you can preview your animations, inspect individual frames, and render your final video.\n\nAt this point, we have a blank project.\n\nNow we need to give AI something to work with.\n\nBonus: Install Remotion Agent Skills\n\nI also install the Remotion agent skills for my coding agent.\n\nThese provide additional instructions and best practices for working with Remotion.\n\nThey help AI coding agents understand common animation patterns, composition structures, and recommended approaches.\n\nHere’s something important about my workflow:\n\nI don’t start by asking AI to generate random animations.\n\nI start with the actual video recording.\n\nFor example, in one of my previous YouTube videos, I explained how AI agents work.\n\nThere’s a section where I introduce the concept of an agent loop.\n\nI wanted to create an animation showing how an AI agent repeatedly:\n\nBut for the animation to work, AI needs to understand two things:\n\nWHAT I’m saying and WHEN I’m saying it.\n\nThat’s where timestamped transcripts come in.\n\nI generate an SRT transcript of my recording.\n\nHere’s a simplified example:\n\n``` php\n1\n00:00:00,000 --> 00:00:04,000\nAt the center of an AI agent is an AI model.\n2\n00:00:04,000 --> 00:00:08,000\nThe model helps decide what to do next.\n3\n00:00:08,000 --> 00:00:13,000\nThe agent takes an action and observes the result.\n4\n00:00:13,000 --> 00:00:18,000\nThis process continues until the task is complete.\n```\n\nNow AI knows exactly when each concept is introduced.\n\nFor example:\n\nThis is what makes the animations synchronize with the narration.\n\nYou can generate SRT transcripts using any transcription tool that supports timestamps.\n\nOrganizing Your Assets\n\nI also place any required images, logos, and other visual assets inside my Remotion project’s public directory.\n\n```\nmy-motion-graphics/\n│\n├── public/\n│   ├── transcript/\n│   │   └── transcript.srt\n│   │\n│   ├── image-assets/\n│   │   ├── ai-model.png\n│   │   ├── agent-icon.svg\n│   │   └── background.png\n│   │\n│   └── audio/\n│       └── narration.wav\n│\n├── src/\n│\n└── package.json\n```\n\nNow we have everything we need:\n\nThe original narration, a timestamped transcript, and our visual assets.\n\nThis is probably the most important part of the entire process.\n\nOne mistake I initially made was giving AI vague instructions like:\n\n*“Create some cool motion graphics for this video.”*\n\nThe problem?\n\nAI might generate something visually interesting, but that doesn’t necessarily mean the animations help explain the content.\n\nInstead, I use ChatGPT to create a detailed storyboard before generating any code.\n\nI provide:\n\nFor example, here’s a simplified version of the prompt:\n\n```\nWrite a prompt for codex to create a motion graphics video using Remotion. Give it a personality of an expert motion graphics designer.\nI want to create professional motion graphics for\na YouTube explainer video using Remotion.\nYour task is to analyze the provided transcript\nand create a detailed animation storyboard.\nRequirements:\n1. Synchronize animations with the transcript timestamps.\n2. Create visuals that help explain the narration.\n3. Use a clean, minimal explainer-video style.\n4. Avoid unnecessary or distracting animations.\n5. Include scene-by-scene animation instructions.\n6. Specify transitions, element positioning,\n   and animation timing.\n7. Use existing visual assets wherever appropriate.\n8. Output resolution: 4K (3840x2160).\n9. Frame rate: 30 FPS.\nTranscript section:\n[PASTE TRANSCRIPT]\nFull video transcript:\n[PROVIDE FULL TRANSCRIPT]\nVisual assets:\npublic/image-assets/\nGenerate a detailed storyboard that can be\npassed directly to an AI coding agent.\n```\n\nChatGPT then generates a structured storyboard.\n\nThis is much more useful than simply asking AI to generate animations.\n\nWe now have a clear visual plan.\n\nAnd that plan is what we give to Codex.\n\nNow comes the fun part.\n\nI open Codex inside VS Code and provide the storyboard generated by ChatGPT.\n\nCodex can then:\n\nBecause Remotion uses React, Codex can generate the animation programmatically.\n\nFor example, here’s a simple Remotion animation:\n\n``` js\nimport { useCurrentFrame, interpolate } from \"remotion\";\nexport const AnimatedTitle = () => {\n  const frame = useCurrentFrame();\n  const opacity = interpolate(frame, [0, 20], [0, 1], {\n    extrapolateRight: \"clamp\",\n  });\n  const translateY = interpolate(\n    frame,\n    [0, 20],\n    [40, 0],\n    {\n      extrapolateRight: \"clamp\",\n    }\n  );\n  return (\n    <div\n      style={{\n        opacity,\n        transform: `translateY(${translateY}px)`,\n        fontSize: 80,\n        fontWeight: \"bold\",\n        color: \"white\",\n      }}\n    >\n      How AI Agents Work\n    </div>\n  );\n};\n```\n\nThis creates a simple title animation that fades in while moving upward.\n\nNow imagine combining dozens of components like this with precise timing, transitions, and visual elements.\n\nThat’s essentially what Codex helps automate.\n\nAnd instead of manually writing all this code, I describe the animation I want.\n\nLet Codex Verify Its Own Work\n\nAnother useful part of my workflow is asking Codex to verify the generated animations.\n\nI instruct it to:\n\nThis doesn’t guarantee perfect results, but it helps catch common visual problems before rendering the entire video.\n\nOnce Codex finishes generating the animations, I open Remotion Studio.\n\nThis is where I can:\n\nIf something doesn’t look right, I don’t necessarily need to modify the React code myself.\n\nI can simply tell Codex what needs to change.\n\nThe transition between scene 2 and scene 3\n\nfeels too abrupt.\n\nMake the transition smoother and ensure\n\nthe elements don't overlap.\n\nAlso, keep the AI model icon visible\n\nthroughout the entire sequence.\n\nCodex can update the animation accordingly.\n\nOnce everything looks good, I render the final video using Remotion Studio or ask Codex to handle the rendering.\n\nAnd that’s it!\n\nWe now have a finished motion graphics video synchronized with the original narration.\n\nAfter experimenting with this workflow, a few things have become clear.\n\nThe biggest improvement came from separating the planning and implementation stages.\n\nInstead of asking one AI agent to figure everything out, I use ChatGPT to design the animation and Codex to implement it.\n\nThis gives me much more control over the final result.\n\nWithout timestamps, animations might look good but appear at the wrong moments.\n\nUsing SRT transcripts makes it easier to align visuals with the narration.\n\nHowever, timestamps are only a starting point. Some animations still need timing adjustments during preview.\n\nNot every sentence needs an elaborate animation.\n\nSometimes a simple diagram, highlighted keyword, or animated arrow communicates an idea better than an overly complicated sequence.\n\nThe goal should always be to make the explanation easier to understand.\n\nAI can generate impressive animations, but the first version isn’t always perfect.\n\nYou may still need to adjust timing, fix layouts, or refine transitions.\n\nThe advantage is that you can make many of these changes through natural-language instructions instead of manually editing keyframes.\n\nAlthough I primarily use this for YouTube videos, there are plenty of other applications.\n\nYouTube creators: Create animated explanations, visual storytelling sequences, and educational B-roll.\n\nDevelopers: Turn technical concepts, architecture diagrams, and system workflows into animations.\n\nEducators: Create engaging visual explanations for complex topics.\n\nStartup founders: Build product explainers, feature demonstrations, and promotional videos.\n\nContent marketers: Generate motion graphics for social media and marketing campaigns.\n\nAnd because Remotion is code-based, you can reuse animation components and visual styles across multiple videos.\n\nThat makes this workflow especially interesting for creators producing content regularly.\n\nA few years ago, creating professional motion graphics required specialized animation skills and significant manual effort.\n\nToday, AI coding agents and frameworks like Remotion are making programmatic video creation much more accessible.\n\nAnd what excites me most isn’t just the ability to generate animations faster.\n\nIt’s the possibility of creating visual explanations that are directly connected to the content itself.\n\nInstead of manually deciding when every element should appear, we can use transcripts, storyboards, and AI agents to automate much of that process.\n\nOf course, AI-generated motion graphics still require creative direction and quality checks.\n\nBut the amount of manual work we can eliminate is already impressive.\n\nThe future of video editing might involve a lot less dragging keyframes and a lot more describing what you want to create.\n\nAnd personally, I’m excited to see where this goes.", "url": "https://wpnews.pro/news/i-stopped-making-motion-graphics-manually-heres-how-i-use-ai-instead", "canonical_source": "https://dev.to/vivek_shetye/i-stopped-making-motion-graphics-manually-heres-how-i-use-ai-instead-1c2d", "published_at": "2026-10-27 15:05:51+00:00", "updated_at": "2026-10-27 15:12:42.072605+00:00", "lang": "en", "topics": ["ai-tools", "ai-agents", "generative-ai", "developer-tools"], "entities": ["ChatGPT", "Codex", "Remotion", "OpenAI", "After Effects", "React"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/i-stopped-making-motion-graphics-manually-heres-how-i-use-ai-instead", "markdown": "https://wpnews.pro/news/i-stopped-making-motion-graphics-manually-heres-how-i-use-ai-instead.md", "text": "https://wpnews.pro/news/i-stopped-making-motion-graphics-manually-heres-how-i-use-ai-instead.txt", "jsonld": "https://wpnews.pro/news/i-stopped-making-motion-graphics-manually-heres-how-i-use-ai-instead.jsonld"}}