The argument in one line.
You can produce broadcast-quality motion graphics with zero design tools and zero hand-written code by letting Claude Code write all Remotion components from plain-English animation prompts — the only skills required are storytelling and scene planning.
Read if. Skip if.
READ IF YOU ARE…
- You make explainer or educational videos and want a motion-graphic upgrade without hiring a designer or learning After Effects.
- You are comfortable using Claude Code but have not yet applied it to video production.
- You want to understand how Remotion works conceptually before paying a motion-design contractor.
- You already produce talking-head or voiceover content and want to add animated data-viz scenes — charts, maps, cutout characters.
SKIP IF…
- You need broadcast-quality delivery immediately — the asset-prep step (keying and compositing source images) requires external tools not fully covered here.
- You want a fully no-code experience end-to-end; Remotion runs on Node.js and live errors appear that you have to debug, as shown in the video.
The full version, fast.
The creator built a 47-second Vox-style political explainer with animated cutout characters, live-drawing data charts, and a locked paper-textured background — entirely from Claude Code prompts with no design software or manual code. The method works in six steps: write a voiceover-first script that maps each VO line to a visual asset and prompt; lock one shared background, font stack, and accent palette; set up Claude Code with Magnific and Higgsfield MCP connectors; scaffold a prop-driven Remotion project where each scene lives in its own folder; animate in plain English and fine-tune via Remotion Studio prop controls; then stitch, sync voiceover from ElevenLabs, add music, and render to 1080p MP4.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 01:17
01 · Cold open — the finished explainer
The completed 47-second Vox-style motion graphic plays in full, then the host reveals the method and promises a step-by-step walkthrough.
01:17 – 02:19
02 · Step 1 — Storyboard and Script
Voiceover-first approach: each VO line becomes a row in a table mapping the narration to foreground asset, midground asset, and AI-generation prompts for both.
02:19 – 03:46
03 · Steps 2-4 — Visual system, Claude Code setup, project architecture
Lock one background, one font stack, one accent palette. Set up Claude Code session, connect Magnific and Higgsfield MCP servers. Define folder structure: each scene in its own folder with shared background asset.
03:46 – 07:12
04 · Step 5 — Set up Remotion and animate
Scaffold the Remotion project via a single Claude Code prompt. Explain the three-layer scene model. Apply halftone treatment to character cutouts. Animate in plain English. Fine-tune via Remotion Studio prop controls.
07:12 – 11:01
05 · Assemble master sequence — review all 7 scenes
Claude Code stitches all scenes into a single Remotion composition using Sequence tags. Host reviews all scenes including debt/inflation chart and oil tanker with green-screen ocean video from Magnific.
11:01 – 13:11
06 · Step 9 — Voiceover, music, final render
ElevenLabs text-to-speech (Kate, Cinematic British RP Narrator). Single Claude Code prompt syncs each scene to its VO narration window. Higgsfield generates background music. Final render: 1080p MP4. Stats: 47.3s, 7 scenes, 10 VO beats, 1,419 frames, 100% in-code.
Lines worth screenshotting.
- Writing the voiceover script first — before any visuals — is what makes AI-assisted motion graphics viable; each VO line becomes an explicit brief for one scene.
- A single locked background across every scene is the visual trick that makes a 7-scene video look like one continuous Vox-style film instead of a slideshow.
- You never need to type spring() or interpolate() yourself — Claude Code infers the correct Remotion animation functions from plain-English descriptions like 'spring up first, then stagger'.
- Prop controls in Remotion Studio let you tweak scale, position, and timing in real time and save those values back into the code without touching the editor.
- The three-layer scene architecture (locked background, midground cutout characters, foreground structures) is the repeatable unit — build it once, clone it for every scene.
- Jerky audio during Remotion Studio scrubbing is a preview limitation, not an export bug; the rendered MP4 is always clean.
- One oversized background asset was the only performance bottleneck in the whole pipeline — cropping it to the visible area eliminated preview lag and sped up renders.
- MCP connectors (Magnific for images, Higgsfield for music) let Claude Code pull production assets without leaving the session, collapsing a multi-tool workflow into one prompt window.
- The final output — 47.3 seconds, 1080p, 7 scenes, 10 VO beats — was rendered directly from Remotion with a single Claude Code prompt and zero NLE work.
- ElevenLabs voiceover sync is done via a single Claude Code prompt: 'embed the voiceover and sequence each scene to start and end on its own narration line'.
Five decisions that make AI video production work
WHAT TO LEARN
The workflow only works if you make five structural decisions up front — skip any one of them and the AI has no stable foundation to build on.
- Write the voiceover script before generating a single image — every VO line becomes an unambiguous brief for one scene, and timing falls out naturally from the narration length.
- Lock a visual system (one background, one font, one accent palette) before touching code — this single decision is what makes a 7-scene video feel like one continuous film rather than a slideshow.
- Build a three-layer scene template and repeat it for every scene: locked background, midground cutout characters with marker-stroke outlines, foreground structures or data assets.
- Describe animations in plain English and let the AI select the correct functions — the mental model you need is 'spring up, stagger, draw in', not spring() vs interpolate().
- Fine-tune in Remotion Studio's prop controls, not in code — changing scale, position, and timing live in the UI and saving the values back to the schema is faster than editing component props manually.
- Assemble the master sequence and sync voiceover in a single Claude Code prompt after all scenes are finalized — late binding to audio avoids re-timing individual scenes.
Terms worth knowing.
- Remotion
- A library that lets you build videos as React components and render them to MP4 via Node.js. Scenes are code, not timelines.
- spring()
- A Remotion animation function that produces a physics-based pop-up entrance — objects accelerate in and settle with a natural overshoot, mimicking a spring.
- interpolate()
- A Remotion utility that maps a frame number to any output range, used for smooth moves, fades, and draws across a set number of frames.
- Prop controls
- A Remotion Studio UI panel that exposes component props as live sliders and inputs, letting you tweak position, scale, and timing without editing code directly.
- Magnific
- An AI image generation and upscaling service. Used here via MCP connector to generate and retrieve transparent-background character cutouts and green-screen video assets.
- Higgsfield
- An AI video and music generation service, used here via MCP to generate a documentary-tone music track matching the scene mood.
- Halftone treatment
- A graphic effect that converts a photo to a pattern of dots at varying sizes, mimicking the look of old newspaper or magazine print. Applied to character cutouts to give them a Vox-style papery texture.
- Marker stroke outline
- A thick, slightly irregular red stroke drawn behind each character cutout in the midground to create a hand-drawn illustration feel and a subtle 3D illusion.
Things they pointed at.
02:40toolGPT-2.0 image generation
12:40toolAdobe Premiere Pro
Lines you could clip.
00:50
“You don't need an expensive motion designer or know how to use After Effects. In fact, you don't even need to know how to code.”
00:46
“Empires don't end with a war. They end with a bill they can no longer pay.”
04:58
“The reason why we have a locked background is because it gives that whole Vox style animation where the background is static, but then things are moving in. So it looks like it's one continuous shot instead of having a lot of different cuts.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
analogy
00:00I made this entire Vox style explainer video using only Claude code and Remotion. The US and Iran are signing a peace deal,
00:08but the downfall of the American empire has already begun, and it started when a far weaker nation held the Strait Of Hormuz hostage.
00:19Oil prices skyrocketed to $116 a barrel, pushing American inflation to a three year high, and it hit a nation already owing nearly $39,000,000,000,000, a debt now bigger than its entire economy, where the interest alone costs more than its entire military.
00:41And the world is quietly leaving the dollar behind. Empires don't end with a war.
00:49They end with a bill they can no longer pay. In this video, I'll show you the exact step by step on how to recreate the scene, and you don't need an expensive motion designer or know how to use After Effects. In fact, you don't even need to know how to code.
01:03So let's get right into it. So in order to create this forty seven second VoxTile explainer, what we need to do is we need to follow a few steps. Now the number one is obviously your storyboard and script.
01:15And, essentially, you need your script that acts as the timeline. So my script over here was obviously the The US and Iran peace deal, which I made a video out of.
01:25What happens here is that each beat maps to a visual. So this is my entire script over here in a table. So you can see the voice over lines, The US and Iran are signing peace deal, uh, held the Strait Of Hormuz hostage, oil prices skyrocketed.
01:40So the entire thing is just based off of the voice over first. And then after that, you can see I've got all of the the foreground assets. There's a mid ground asset.
01:49I've got the prompt as well, uh, for both the mid ground and the foreground because, essentially, what I'll be using here is I'll be using an image generator, most probably GPT two point o because that's one of the best image generators that's out there. And moving on from there, once you have your voice over, the next thing you need to do is you need to lock a visual system.
02:10So in my example over here, I'm using one common background across all of the scenes. I'm using the same fonts, the same accent palette, but what changes is the the mid ground and the foreground where you have these different cutouts that appear.
02:25So the first thing we have to do is I'm going to open up ClodCode. Now over here, I'm setting up a new session. Before I start setting up Remotion, what I need to do is I need to make sure I have a few connectors.
02:35So over here, I've got my Higgs field and Magnific MCP servers connected. And in order to do that, what you need to do is you need to go to settings. You can go to capabilities sorry, connectors, and then you can go to customize.
02:47And over here, you'll find all of your MCP connectors. Now if you want to add a new connector, what you can essentially do is you can add a custom connector, and then you can get the MCP server address for Magnific posted in here.
02:59And, essentially, what this allows Cloud Code to do is instead of you going to Magnific and getting all of these images, you can just prompt it directly through ClodCode, and it'll be able to, like, get all of those images for you.
03:12So for example, this is my Magnific MCP server that's set up over here, and you can see that's the server address right there. Okay. So once you've set up your MCP servers, what you need to do is you need to have a proper architecture, a proper folder structure for your project.
03:28So, essentially, each scene lives in its own folder. Each scene has multiple props that that come up, and, obviously, they have a shared background. So I'll show you what that looks like in terms of a folder structure.
03:39So this is what the scenes look like. So if you look at scene one, these are the cutouts that I got from Magnific, and this is obviously the White House, and this is the shared background over here.
03:50And then you will see the shared background is in every scene. So, essentially, this is the oil tanker scene, and you've got a shared background here as well. So it's there in all of them.
03:58And then the only thing that changes is that in each scene, you've got a different cutout. Right? And I'll show you how that plays in once we start building these scenes.
04:08So the next thing I'm going to do now is I'm going to set up the Remotion project. So I'll just copy this prompt, and I'll go here, and I'll just set that up.
04:19Oh, before I do that, I need to actually select a folder. So what I'm gonna do is I'm gonna select the scenes folder over here. Select folder, and then just run that prompt again.
04:33So while the Remotion project is being set up, I'll show you how this worked. Now the reason why we have a locked background is because it gives that whole Vox style animation where the the background is static, but then things are, like, moving in. So it looks like it's one continuous shot instead of, like, having a lot of different cuts in the middle.
04:52And, essentially, the way how it works is each scene is made up of three layers. So you have the background over here, and then you have the mid ground, uh, which I choose, you know, as a black and white halftone pattern of characters popping up, and then the foreground structures essentially.
05:07Right? So they can be sub structures. They can be some sort of scenery, shapes, whatever it may be.
05:12That's just how I do it, and I've I've seen a few Vox animations where they use this style. There are many different styles, and this is just the one that I've I've gone for. So the next thing you want to do is you want to get cutouts of your scenes.
05:25For example, over here of Donald Trump and Khamenei. You don't have to actually go and do this yourself.
05:31So, essentially, what you can do is you can get a transparent image of Donald Trump or whoever the the character might be. And, essentially, what you can do is you can tell Claude Code to make the image of Donald Trump in the folders black and white and give it a halftone pattern to finish. You can see over here as well, like, do the same for the image of Khamenei.
05:51And this is what you get out of it. Right? So it gives that magazine sort of feel, that papery feel, a texture that you would get.
06:00Uh, so it doesn't look all digital. I mean, I'm a huge fan of the way how Vox does their animations, and this is just, like, one way to sort of simulate that.
06:09If you go to the scene file over here, and this is what it actually looks like. Okay.
06:15So the way how we're going to do this is we're going to be animating with intent, and what I mean by that is is we're gonna be using just two functions. Again, you don't have to know these function calls. You don't have to to necessarily know how to code.
06:28But just for you to understand, there's a spring function, and then there's a interplay. So, essentially, spring is what does the whole pop up effects and all that. And what happens over here is you don't even have to say to use a spring function over here.
06:40So you can essentially say plain English, animate scene one where the White House springs up first, followed by Donald Trump and Kamini right after. Stagger them so they don't all move at once. Give me an offset red marker stroke behind each cutout for the mid ground characters.
06:56And this gives you that signature sort of red sort of stroke just to give it that a little bit of a a three d illusion, and it just, honestly, just looks nice. So I will copy this prompt here. So it looks like Claude code is still running, setting up the Remotion dependencies.
07:12Okay. So now what it's done is it set up the first scene with our characters in the mid ground and White House in the foreground. So I'm just going to let it complete, and then what we will do is we will get it to start a Remotion server for us or Remotion Studio, and then we'll go inside Remotion Studio, and we need to make a few fine adjustments.
07:35Alright. So it's given me some commands to start the Remotion Studio, but what I can do is I can just ask it in plain English to stop the studio for me. Stop the Remotion Studio for me, please.
07:48Alright. So this is what the first scene looks like, and you can see it's not actually the best because we need to go make some changes here.
07:58So that's exactly what we're going to do. So one thing if you notice over here, we've got this error. So I'm I'm just gonna go and sort out this error so I'll go back to my Claude code fix this error please.
08:17Alright. So let's fix that error first. Now the next thing we want to do is we want to start adjusting our characters.
08:23And this is where it's really important if you don't see these prop controls over here, so make sure you go back to your Claude code and ask it to give you a prop control for all the elements on the screen. So this is the prop control for Kamenet. What I'm gonna do is I'm gonna start tweaking some of these scale controls.
08:42So for example, I can put the scale to 1.4 and you'll see Donald Trump just becomes a bit bigger over there. So I can change the x y positions and what you need to do guys is also you need to save these numbers as well.
08:54So if I do the scale as 1.4, so you'll see that it's changed the scale but make sure you save it so it stays like that. And then I can change the x y positions here.
09:04But before we do this, we might have to actually change the size and scale of the White House. So I'll set this to a scale of 1.5. K.
09:14Maybe I'll make it slightly bigger, 1.6. Save that.
09:18And then I'm going to set this y axis maybe all the way down here. So let's see what that looks like.
09:27So the White House comes first, and then Donald Trump and Kavanaugh. So the White House is fine. Now I just need to fix both of these characters here.
09:35Maybe make the White House slightly bigger, 1.8.
09:43So I think that scene is done, and that's what that looks like. So just to run it again, so you have the White House pop up first, and then you have the two characters pop up right behind. So now that we've made those changes, so what you get is a bunch of different scenes.
09:59Now let me show you what those scenes look like. So you'll see this is like a debt transition scene. So this is an oil tanker scene.
10:06Now for this one, what I did was this there's an actual, like, green screen ocean video that you can download off of Magnific, and, essentially, it's just an animated or or, like, an actual video of an ocean with the background just removed, and this is what that looks like.
10:28And you can see there's a number that comes up right after just to show that oil prices have shot up. So each scene, guys, would be, like, in a different file, essentially. Right?
10:37So this is the scene for the debt inflation, for example. And you'll see a bar chart or sorry, a line chart just pops up along with a US map, then we have a transition scene over here as well.
10:53So once you have all of these scenes, what you need to do is you need to put them together. After you've done all of your fine adjustments, the next thing you want to do is you want to make you want to assemble a master sequence. So now you can get Claude Coat to stitch all of these scenes together in one video in order, each one playing for as long as it's part of the voiceover so they run back to back as a single film.
11:15The next thing you wanna do right after this is you want to do your voiceovers. Now you can obviously use Claude code to do your voiceovers, but then I go separately to 11 labs and I generate my voice over just because I've got like the saved voices on there. So let me show you how that works.
11:32So you can go into 11 labs, and you can go to text to speech, and I use Kate, cinematic British RP narrator, and then you can generate the speech.
11:40The US and Iran are signing a peace deal. Okay. So once you have this, you can download it and put it into the same folder, and you can come back to your Claude code, and you can ask Claude code to sync your entire clip to this voice over.
11:54So this is the prompt for that. So I'm gonna say embed the voice over into the composition and sequence the scenes to it. Each scene should start and end on its own narration.
12:03And once you've done that, once you've done the voiceovers, the next step is just some music. You need a bit of polish, and you might even need some Foley, some background sounds as well.
12:14Sometimes what happens is when you're scrubbing through Remotion Studio, what might happen is the audio might sound jerky. Don't worry about this.
12:23This is this is just like a Remotion thing, but then once you render it, it's it's going to sound clean. So once you've done all of that, you can literally ask Claude Code to render the whole thing as a ten eighty p m p four video with the music and voice over mixed in. If you'd much rather do the music and voice over later in Adobe Premiere Pro, you can do that too.
12:44You can just get the composition by itself and then do the music and voice over separately. So there you have it. A fully animated motion design in just a few minutes.
12:53If you're interested in these kind of videos, then do subscribe. I have a whole lot more Claude code and motion graphics videos planned, so you won't want to miss that. But until then, have a good one.
The Hook
The bait, then the rug-pull.
The video opens on the finished product — a 47-second geopolitical explainer that looks like something off the Vox YouTube channel. Animated character cutouts spring in over a locked paper-textured background, data charts draw themselves, and a cinematic British narrator carries the voiceover. Then the host cuts to himself and says he built the whole thing with Claude Code and a React video library called Remotion. No After Effects. No Premiere. Not a single frame touched by hand.
Named ideas worth stealing.
04:58model
One Background, Three Layers
- Background (locked paper texture)
- Midground (halftoned character cutouts with red marker stroke)
- Foreground (structures, charts, maps)
Every scene in a Vox-style Remotion video uses the same background image and inherits the same font/color system. Only the midground and foreground assets change. This is what makes multi-scene videos look like one continuous shot.
Steal forAny data explainer or political commentary video — eliminates per-scene design decisions
01:17model
Voiceover-First Script Table
- Voiceover line
- Background asset
- Midground asset + AI prompt
- Foreground asset + AI prompt
- Transition type
Write the VO script first, then build a table where each narration line maps directly to the visual assets and AI-generation prompts needed for that scene. This script becomes both the production brief and the timing source.
Steal forAny explainer or educational video where you want AI to generate visuals
06:30concept
Plain-English Animation Prompting
You do not need to know spring() or interpolate(). Describe the animation in plain English and Claude Code selects the correct Remotion functions. Example: 'animate scene one where the White House springs up first, followed by the characters, staggered'.
Steal forAny Remotion or code-based animation project — removes the need to learn animation API syntax
How they asked for the click.
VERBAL ASK
12:40subscribe
“If you're interested in these kind of videos, then do subscribe. I have a whole lot more Claude code and motion graphics videos planned, so you won't want to miss that.”
Soft close with channel promise. No link shown, no pinned comment referenced. Low-friction ask.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
