How to Create Motion Graphics & Animation With Claude Code (Full Workflow)
I've been creating motion graphics professionally for over ten years. After Effects and Premiere have been my world — I've downloaded countless templates from Envato, spent days building branded graphics packages for clients, and hired animators to help on bigger projects. I was even a post producer at a company that made motion graphics for Super Bowl commercials. I've seen project budgets run into the tens of thousands of dollars, so I know what professional motion graphics actually cost.
Then I replaced my entire motion graphics workflow with Claude Code — and I built the whole pipeline in a single afternoon.
This isn't a shortcut or a workaround. It's a production-grade pipeline that outputs ProRes Alpha files, transparent lower thirds, animated callouts, and full-screen graphics. The exact deliverables I used to pay an animator to produce. Everything I'm about to show you can be done for under $100, and it's what I now use on every video I make — including the one this post is based on.
Here's the complete workflow: the tools, the prompts, and how the output holds up against traditional After Effects.
Why I Wanted to Replace After Effects
After ten years in this craft, I didn't go looking for a replacement because I disliked After Effects. I went looking because the traditional motion graphics pipeline has three bottlenecks that never go away, no matter how skilled you get.
The first is time. Working with an animator means briefing, waiting, reviewing, and sending notes — then waiting again for the next round. Even doing it myself, a branded graphics package could eat up days. The revision cycle alone could stretch a project across a week, with each round of feedback adding another delay.
The second is money. Between After Effects subscriptions, template marketplaces like Envato, and freelance animators charging anywhere from $75 to $200 an hour, the costs stack up fast. A full branded motion graphics package for a campaign could run $10,000 to $50,000. For solo creators and small agencies, that math simply doesn't work for regular content.
The third is the one nobody talks about: rendering and execution time. Even when you know After Effects inside and out, keyframing every graphic, fine-tuning easing, and waiting on renders takes hours. The skill removes the guesswork, but it doesn't remove the labor.
What I wanted wasn't a way to skip the craft. I wanted a way to keep the creative direction — the part that actually requires taste and experience — while removing the manual execution that slows everything down. That's exactly what this Claude Code workflow does.
The 3-Tool Stack
The entire pipeline runs on three tools. No After Effects subscription, no template libraries, no animator on retainer.
Claude Desktop App handles the design and proofing phase. Unlike the browser version, the desktop app lets you preview every graphic live in a side window while you give notes directly in the chat — like having a designer collaborating with you in real time.
Claude Code is the command-line tool that handles the actual rendering. It's separate from the desktop app. I run it inside VS Code because I can see all my project files in the sidebar, but you can run it straight from your terminal too.
Hyper Frames is an open-source rendering engine that takes the HTML animations Claude builds and outputs them as real video files — MP4 for full-screen graphics, ProRes Alpha for transparent overlays. It installs as a Claude skill, and it's completely free.
Tools in this workflow:
Claude Desktop App (free) — claude.ai
Claude Code (CLI) — claude.ai/code
Hyper Frames (open source, free) — linked in the video description
Total cost: under $100.
That's the whole stack. Now let's walk through how it actually works.
The Step-by-Step Workflow
Step 1 — Export Your Transcript
Everything starts with your finished transcript. If you've already recorded your video or voiceover, export the transcript from Premiere: open the Graphics and Captions workspace, go to the text tab, transcribe, and export as a .txt file.
If you write your script before filming — which is how I do all my tutorial videos — you can skip that step entirely and paste the script straight into Claude. Plain text is all you need. Timestamps help, but they aren't required. This transcript becomes the shared working document for everything that follows.
Step 2 — Brief Claude Like a Motion Designer (Not a Chatbot)
This is the step that separates good output from generic output. Open the Claude Desktop app and upload two things: your transcript and your brand deck. If you don't have a formal brand deck, just describe your brand in the prompt — your fonts, your colors, your visual feel. You can also add reference images or website links.
Then brief Claude the way you'd brief a motion graphics designer working remotely on your team. The framing matters enormously. When Claude is operating from a professional context, it returns a precise breakdown of every moment in your video that deserves a graphic — and you can go back and forth, adding your own thoughts on where you want animation. Your years of experience become the moat here: you know what deserves a graphic and what doesn't. Claude executes; you direct.
Step 3 — Proof in HTML Before Rendering a Single Frame
This is the single most important step in the entire workflow, and it's what eliminates the revision cycles that used to eat up days with animators.
Before anything renders, ask Claude to build out every graphic as a single HTML preview file. Open it in your browser and you'll see every static design at production dimensions — essentially a digital storyboard. From here you give design notes exactly like you would in Slack or Frame.io: bigger fonts, different colors, more padding, revised on-screen copy. Be specific rather than vague. The preview updates live after each round, so you're approving the look before a single frame gets rendered.
Step 4 — Animate and Approve in the Browser
Once your static designs are approved, ask Claude to animate each graphic. The motion previews appear in the same side browser window, and you can hit replay to watch each animation as many times as you need.
If you don't have a motion design background, you can let Claude handle the animation decisions. If you do, this is where experience pays off — you can give precise notes on easing, timing, and holds. Claude numbers each animation file, so referencing a specific shot is as simple as saying "animation 04 needs a smoother exit."
Step 5 — Generate the Hyper Frames Render Package
When the motion is approved, you're done with the desktop app. Ask Claude to generate the Hyper Frames render output, and be explicit about formats. I know exactly what my Premiere timeline needs: MP4 for full-screen graphics, and ProRes Alpha for anything that needs transparency, like lower thirds and callouts.
The crucial detail: tell Claude Code to add Hyper Frames metadata to the HTML files. It may offer other options like Playwright, but stick with Hyper Frames for the cleanest output. Claude outputs individual HTML files plus the render instructions and terminal commands. Download the package as a ZIP and unzip it into a folder.
Step 6 — Render With Claude Code
Open Claude Code in your terminal or VS Code and navigate to your render folder. Next, install the Hyper Frames skill: think of a Claude skill as a standard operating procedure that tells Claude how to perform a multi-step process. Grab the install command from the Hyper Frames site, paste it into Claude Code, and let it install and read the documentation.
Then run the render prompt. Behind the scenes, Hyper Frames uses Puppeteer to open each HTML file, capture every frame, and assemble it into a video. It may ask to install ffmpeg or other plugins — say yes, and just ask for the bare minimum needed. Two tips: close other programs so the render has all your available RAM, and when prompted, render the first file before the rest so you can approve it before committing to the full batch.
Step 7 — Drop Files Into Premiere
Once rendering finishes, check your output folder and drag everything into Premiere or your editor of choice. Place your lower thirds, overlays, and callouts above your footage; drop your full-screen animations where they belong. The alpha channel is transparent automatically — no masking, no matting, no green screen workflow. The graphics drop in clean.
What the Output Actually Looks Like
Here's the part that genuinely surprised me. The output is indistinguishable from what I'd render out of After Effects — same codec, same alpha channel, same color space. If you handed these files to an editor without explaining how they were made, they would not be able to tell the difference.
The transparency is the real win. Because the ProRes Alpha files come out with a clean alpha channel, there's no masking, no matting, and no green-screen cleanup. Your lower thirds and callouts sit on top of your footage exactly as intended, the first time. For anyone who's spent hours fixing edge artifacts on a keyed graphic, this alone changes the workflow.
And there's a compounding benefit. Once you've trained Claude on your brand's animation style, fonts, and colors, that knowledge carries forward. Open your next project in the same folder and Claude already knows what your motion graphics should look like — it learns the way an in-house animator would, and gets sharper with every project.
Why Experience Still Matters
I want to be honest about something, because there's real anxiety in the motion design community right now. This workflow doesn't make experience worthless — it makes experience the differentiator.
You can't fully automate something you don't understand. The ten years I spent mastering After Effects are exactly what let me catch Claude's mistakes and give precise notes. I can tell when an ease is wrong, when a hold is too short, when something enters too fast, or when an animation just doesn't feel smooth. I can describe those problems precisely because I know what I'm looking for.
If you don't have that background yet, you're not locked out — you can simply ask Claude to animate like a senior motion graphics designer creating work for a professional video, and you'll get strong results. But the people who combine real motion design judgment with this workflow are the ones who'll produce work that stands above everyone else. The new skill isn't knowing how to keyframe. It's knowing how to describe what you want.
Who This Is For
This workflow is built for people producing video content regularly, not once a year. It's a fit if you're:
A solo video producer or editor who needs agency-quality motion graphics without an animator's budget
A small agency building repeatable, branded motion graphics pipelines for clients
A brand or marketing team that wants consistent on-brand graphics without standing up a full post-production department
If you produce weekly or daily content, this changes the economics of your entire operation. If you only need a single graphic once a year, traditional tools are probably fine.
The Bottom Line
Motion graphics has always been one of the most expensive, time-intensive parts of video production. This workflow doesn't eliminate the craft — it removes the manual execution and rendering bottlenecks while keeping human creative direction at the center. Faster, cheaper, more consistent, and with no keyframe headaches, no animator availability issues, and no revision delays.
This is the exact pipeline I use on every video now. If you want to see it in action, watch the full walkthrough below.
🎬 Watch the full YouTube walkthrough: https://youtu.be/z3N74aXQNQI?si=fk7gEBMRnSTLUNKN
🔔 Subscribe for more AI video workflows:http://youtube.com/@MitchelDumlao?sub_confirmation=1 — and follow along on Instagram (@mitcheldumlao), LinkedIn (/mitcheldumlao), and TikTok (@mitcheldoomz) for more.
📅 Want this running for your brand or agency without building it yourself? That's what we do at The Creative Haven. Book a strategy call.
