Claude Remotion Tutorial: Motion Graphics With Claude Code
Tutorial
How to Make Motion Graphics With Claude Code and Remotion (Opus 5.5)
October 7, 2026
Keston CollinsVideo editor with nearly 10 years of experience, exploring the intersection of motion graphics and AI.
To make motion graphics with Claude, you give Claude Code a Remotion project and Remotion's Agent Skills, describe the video, and let Opus 5.5 write the scenes as React code. You preview in Remotion Studio and render to MP4 from the command line. The whole loop runs on your own machine. On a fresh project the first render took under a minute, and a short title animation went from an empty folder to an MP4 in about two minutes.
What you need before you start
Node.js (the test below used Node 24) and npm.
Claude Code with Opus 5.5 selected.
About 600 MB of free disk space for a Remotion project, its dependencies and the headless browser Remotion downloads on first render.
Your brand basics: hex colors, a font, the exact on-screen text, and any logo or screenshots you want in the video.
Remotion is free for individuals, non-profits and for-profit companies with up to three employees, including commercial use. Larger companies need a Company License. The details are in Is Remotion Free?
Step 1: Create a project and add the Remotion skills
Start a new project with:
npx create-video@latest
The setup offers to add Remotion's Agent Skills. If you already have a project, add them from its folder:
npx skills add remotion-dev/skills
The skills teach Claude how Remotion expects things to be done. The ones you will use most are /remotion-create for new compositions, /remotion-markup for animation, layout and fonts, /remotion-studio to open the preview, and /remotion-render to export. There are also skills for captions and map animations.
One thing you may see with recent npm versions: a warning that the esbuild install script was not allowed to run. In the test project the warning appeared and rendering still worked, so it is not a reason to stop.
Step 2: Write a brief Claude can build from
Vague prompts get default-looking videos. Give Claude the format, the length, the scene order, the exact copy and how things should move. This is the brief used in the test behind this guide, where Opus 5.5 wrote Remotion code in a fresh project (the test project did not have the skills installed; with them, Claude follows Remotion's own best practices):
/remotion-create Make an 8-second 1920x1080 launch opener at 30 fps.
Scene 1 (0-2.3s): the wordmark "AutoAE" springs in, centered, with an orange glow.
Scene 2 (2.3-8s): headline "Motion graphics, ready to post". Words stagger in
5 frames apart; "ready to post" is #ff7d10. Under it, three pill labels:
"Describe it." "Pick a template." "Download." appearing 10 frames apart.
Background #0a0310 with two slow-drifting blurred blobs, #49007e and #ff7d10.
Fade out over the last half second.
The result was a 137-line composition. The headline stagger looked like this, which is typical of what you get: each word reads the current frame, runs a spring, and moves up into place.
Run /remotion-studio, or npx remotion studio yourself. Studio opens in the browser with a timeline you can scrub. Watch the whole clip at least once at full speed. Problems that are easy to miss in code, like a scene where nothing moves for three seconds, are obvious when you play it.
Step 4: Render to MP4
Ask for /remotion-render, or run the command directly with your entry file and composition ID:
In the test, the first render took 52 seconds because Remotion bundled the project and downloaded its headless browser. Later renders of the same 8-second clip took about 15 seconds, and a 6-second vertical clip rendered in about 6.
Step 5: Check stills and fix what breaks
Before rendering the full clip again, render single frames at the moments that matter:
npx remotion still src/index.ts Reels out/frame-70.png --frame=70
This is where the most common bug shows up. In the vertical version of the test, Claude set the orange line at 130px, so "motion graphics" wrapped onto two lines on a 1080px-wide frame. One still made it obvious. The fix took one more round: that line went to fontSize: 112 with whiteSpace: "nowrap", so it stays on one line.
Other fixes worth asking for by name:
Load the brand font with @remotion/google-fonts or loadFont, then check a still to confirm it isn't a fallback.
Give each element type its own easing so scenes don't all move the same way.
Add a foreground, midground and background layer moving at different speeds for depth.
Replace drawn placeholders with real screenshots or footage using <Img> and <OffthreadVideo>.
What this workflow is good at, and where it stops
Claude and Remotion are strong at anything built from text, shapes and data: title cards, lower thirds, captions, animated charts, step-by-step explainers, and variations of the same template in different sizes or languages. Because the output is code, changing a word or a color is a one-line edit, and the result renders the same way every time.
The ceiling is what a web page can draw. Lighting, materials, particles and real 3D don't appear unless you bring them in as assets, which is why many of these videos end up looking flat. Why Claude and GPT-6 Astra Remotion videos look flat covers the reasons and the fixes, with a side-by-side test.
For the few seconds that carry the first impression, like a hook or a logo reveal, a clip that is already designed can be faster than prompting toward one. In the same Claude Code session, the AutoAE Skill lets AutoAE's Motion Graphic Agent pick a professionally designed template, fill it with your text and images, and return an MP4 you can place in the composition with <OffthreadVideo>.
FAQ
Do I need to know React to make videos with Claude?
No, but it helps to read what Claude writes. You can get a working video by prompting alone. When something looks wrong, knowing that each scene is a component and that motion comes from the current frame makes your follow-up prompts much more precise.
Can Claude add music or a voiceover?
Remotion can play audio files in a composition, so Claude can place a music track or a voiceover file you provide and time scenes to it. Generating the audio itself needs a separate tool.
Is this the same as asking Claude to make a video in the chat app?
No. In the chat app Claude can write the code but can't run it. Claude Code runs on your machine, so it can create the project, install packages and render the MP4. For the bigger picture of the ways Claude can produce video, see Can Claude Make Videos?
