Video Editing with Claude x Remotion

Create animated lower-thirds and title cards overlaid on real video footage.

Introduction

30 Second Summary

Every YouTube video, sports broadcast, and corporate presentation uses animated lower-thirds and title cards that slide in and fade out. Most people build these by dragging keyframes in After Effects, one project at a time.

In this project, you will build a reusable motion graphics overlay system using Remotion. You'll define animations as config values, layer graphics over real footage, and export a production-ready MP4.

What You'll Build

A complete motion graphics overlay system powered by Remotion, with animated lower-thirds, title cards, a centralized theme config, and AI-assisted composition creation through Claude Code.

By the end of this project, you'll have:

  • A working animated lower-third and title card with slide-in, scale, and fade effects driven by frame-based interpolation.
  • A reusable design system controlled by a single config file for colors, fonts, and animation timing.
  • A rendered MP4 video with your motion graphics overlaid on real footage, exported entirely from code.
  • Secret Mission: Animate a split-screen transition where your video slides down at the 5-second mark to reveal a diagram in the top third.

Are there any prerequisites?

No prior experience with React or video editing is needed. This guide includes full setup for all required tools. Note that Claude Code requires a paid Claude subscription (Pro, Max, Team, or Enterprise).

Install Node.js and Claude Code

Before you can build motion graphics with code, you need the right tools on your machine.

In this step, you'll install Node.js (the runtime that powers Remotion) and Claude Code (an AI coding agent you'll use later to generate new video compositions from natural language prompts).

In this step, get ready to:
  • Install Node.js and verify it's working.
  • Install Claude Code and sign in with your account.
  • Confirm Claude Code responds to commands.
Install Node.js

Node.js is the JavaScript runtime that Remotion uses under the hood to build and render your video compositions.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Terminal and press Enter to open it.
  • Check if Node.js is already installed by running this command:
node --version

✔️ I see a version number

If you see a version number starting with v20 or higher (like v20.18.0), you're good to go.

ⓧ Command not found

Node.js isn't installed yet. Let's fix that.

  • Open nodejs.org in your browser.
  • Click the Get Node.js button.
  • Select your operating system and download the package.
  • Open the downloaded file and follow the installer prompts. Accept the default settings at each step.
  • Once the installer finishes, close and reopen Terminal.
  • Verify the installation by running:
node --version

Still seeing command not found?

Make sure you closed and reopened Terminal after the installation completed. The new Terminal session picks up the updated PATH.

Help me troubleshoot my Node.js installation

Install Claude Code

Claude Code is an AI coding agent that runs directly in your terminal. Later in this project, it will read Remotion's Agent Skills files and generate new video compositions from your natural language prompts.

What subscription do I need?

Claude Code requires a paid Claude subscription. You'll need a Claude Pro, Max, Team, or Enterprise account to sign in.

  • Check if Claude Code is already installed by running this command:
claude --version

✔️ I see a version number

If you see a version number printed (like 1.0.0 or higher), Claude Code is already installed and ready. Skip ahead to the next substep to sign in.

ⓧ Command not found

Claude Code isn't installed yet. Let's fix that.

  • Install Claude Code by running this in your terminal. The command depends on your OS:

🍎 macOS / Linux

curl -fsSL https://claude.ai/install.sh | bash

🪟 Windows (PowerShell)

irm https://claude.ai/install.ps1 | iex

Run this in PowerShell, not Command Prompt. Press the Windows key, type PowerShell, and press Enter.

What does this command do?

This downloads and runs the official Claude Code installer script. It installs Claude Code natively on your machine. Once installed, it automatically updates in the background so you always have the latest version.

  • Once the installer finishes, close and reopen Terminal.
  • Verify the installation by running:
claude --version

You should now see a version number printed in your terminal.

Still seeing command not found?

Close and reopen Terminal so your shell picks up the new PATH entry. Then try claude --version again.

Confirm you're on a supported OS:

  • macOS 13.0 (Ventura) or later.
  • Windows 10 / 11 (64-bit) with PowerShell 5.1+.
  • Ubuntu 20.04+ / Debian 11+ / Fedora 38+.

Help me fix my Claude Code installation

Sign in and test Claude Code

Now that Claude Code is installed, you need to sign in once so it can authenticate with your account.

  • In your terminal, start the login flow by running:
claude
  • Claude Code shows a safety check asking if you trust this folder. Select Yes, I trust this folder and press Enter.
  • Follow the prompts in Terminal to sign in with your Claude Pro, Max, Team, or Enterprise account. This opens your browser for authentication.
  • Once signed in, you'll return to the Claude Code prompt in Terminal.
  • Verify everything is working by typing:
/help

You should see a list of available commands printed in your terminal.

  • Press Escape to return to the text input.
  • Exit Claude Code for now by typing /exit or pressing Ctrl+D twice.

Why exit now?

You'll restart Claude Code inside your Remotion project folder in the next step. Claude Code is most powerful when it can read your project files and the Agent Skills installed alongside them.

Your development tools are ready. Next up, you'll scaffold your Remotion project and see Remotion Studio for the first time.

Set Up Your Remotion Project

Node.js and Claude Code are installed and ready. Now you'll create the actual Remotion project where all your motion graphics code will live.

Remotion includes a scaffold tool that generates a project with everything pre-configured. It also ships with a browser-based studio for previewing your animations in real time, frame by frame.

In this step, get ready to:
  • Scaffold a new Remotion project with TailwindCSS and Agent Skills.
  • Install project dependencies and launch Remotion Studio.
  • Start Claude Code in your project directory.
Scaffold your Remotion project
  • Move to your Desktop by running this command:
cd ~/Desktop
  • Scaffold a new Remotion project by running this command:
npx create-video@latest
  • You'll first see a message asking to install the create-video package. Enter y and press Enter to proceed.
  • The scaffold wizard then asks several project setup questions:

Ignore the tar deprecation warning

You might see a warning about tar@6.2.1 being deprecated. This is a known npm warning and does not affect your project. The scaffold continues normally after it.

  • For Template, use the arrow keys to highlight Blank and press Enter.
  • For Project name, enter motion-graphics.
  • For TailwindCSS, enter yes.
  • For Agent Skills, enter yes.
  • For Agent selection, use the arrow keys to highlight All detected agents and press Enter.
  • For Installation scope, use the arrow keys to highlight Project and press Enter.
  • For Installation method, use the arrow keys to highlight Symlink (Recommended) and press Enter.
  • For Proceed with installation, enter yes.

You should see a Done! message confirming the project was copied to motion-graphics. The scaffold is complete.

Project vs Global installation scope

Project installs the skill files into a .claude/skills/ folder inside your project directory. They get committed with your code, so anyone who clones the project gets them too.

Global installs them to a central location on your machine. Every project on your computer can access them, but they won't travel with the project if you share it.

We choose Project because the Remotion skills are specific to this video project.

💡 What does this command do?

npx create-video@latest downloads and runs Remotion's project scaffolding tool. It generates a complete project folder with source files, a remotion.config.ts configuration, a package.json listing all required dependencies, and a starter composition you can preview immediately.

The TailwindCSS option adds utility classes for styling your motion graphics. The Agent Skills option installs markdown files that teach AI coding tools (like Claude Code) how to write Remotion code correctly.

💡 What is Remotion?

Remotion is a framework that lets you create videos using React components and code instead of a visual timeline editor. Every frame of your video is a function of the current frame number, which makes animations precise and repeatable.

💡 What are Agent Skills?

Agent Skills are markdown files maintained by the Remotion team that teach AI coding agents best practices. They cover animations, compositions, audio/video, captions, transitions, and more.

When you say yes to Skills, the CLI pulls them from a GitHub repository (remotion-dev/skills) and installs them to a .claude/skills/ folder inside your project. It then scans your machine for AI coding agents and asks which ones should receive the files.

Claude Code reads these skills automatically when it starts in your project directory. Every composition it generates follows Remotion's recommended patterns without you needing to specify them.

🙋‍♀️ Scaffold command not working?

Make sure you are not already inside an existing Git repository. The scaffold command fails if it detects a parent .git folder.

If you see a permission error, try running the command with sudo or check that Node.js is properly installed with node --version.

Help me troubleshoot the Remotion scaffold command.

Install dependencies
  • Move into your project folder by running this command:
cd motion-graphics
  • Install all project dependencies by running:
npm install

What does npm install do?

The scaffold command generated a package.json file listing every library Remotion needs to run. However, it didn't download them yet.

npm install reads that file and downloads all the listed packages into a node_modules folder inside your project. Without this step, Remotion Studio can't start.

Once it finishes, you'll see messages about packages being added, along with notes about funding and vulnerabilities. npm fund lists packages whose authors accept donations, and npm audit flags known security issues in development dependencies. You do not need to run either command.

Install failing or hanging?

Check your internet connection. npm install downloads packages from the npm registry and needs a stable connection.

If you see peer dependency warnings, you can safely ignore them. They do not prevent the project from working.

Help me fix npm install errors in my Remotion project.

Start Remotion Studio

Remotion Studio is a browser-based interface where you preview your compositions, scrub through timelines, and see changes instantly as you edit code.

  • Start the development server by running:
npm run dev

Allow Terminal to open your browser

On macOS, you may see a dialog asking if Terminal can control your browser (Safari, Chrome, etc.). Click Allow to let Remotion Studio open automatically. If you accidentally click Don't Allow, you can still open http://localhost:3000 manually.

  • Open your web browser.
  • Navigate to http://localhost:3000 (the URL shown in your Terminal output).

You should see the Remotion Studio interface with a blank composition listed in the left sidebar.

What is Remotion Studio?

Remotion Studio is your preview environment. It hot-reloads every time you save a file, so you can see animation changes instantly without re-rendering the full video.

The timeline at the bottom lets you scrub through frames manually. The sidebar on the left lists every composition registered in your project.

💡 Keep this Terminal tab running

The npm run dev process keeps the Studio server alive. If you close this Terminal tab, Studio stops. In later steps, you will open new Terminal tabs for other commands while keeping this one running.

🙋‍♀️ Don't see Studio in your browser?

Make sure the Terminal is still showing the dev server output (not an error). If port 3000 is taken, Remotion picks a different port. Check the Terminal output for the actual URL.

If you accidentally closed the Terminal, open a new one, navigate to ~/Desktop/motion-graphics, and run npm run dev again.

Help me get Remotion Studio running in my browser.

Start Claude Code in your project

You'll use Claude Code alongside Remotion Studio for the rest of this project. Claude Code reads your project files and Remotion's Agent Skills to generate animations from your prompts.

Your first Terminal tab is occupied running Remotion Studio. You'll need a second tab for Claude Code.

  • Open a new Terminal tab by pressing Cmd+T (macOS) or Ctrl+Shift+T (Windows).
  • Navigate to your project folder by running this command:
cd ~/Desktop/motion-graphics
  • Start Claude Code by running:
claude

Claude Code launches and automatically reads the Agent Skills files from .claude/skills/ in your project. These skills teach Claude Code Remotion best practices for animations, compositions, and rendering.

Claude Code not starting?

Make sure you installed Claude Code in Step 1 and completed the login flow. Run claude --version to confirm it's installed. If you see "command not found", re-run the install command from Step 1.

Help me troubleshoot Claude Code not starting in my Remotion project.

Your project is scaffolded, Studio is live, and Claude Code is ready to generate code. Next up, you'll prompt Claude Code to build your first animated lower-third component.

Build Your First Animated Lower Third

Prompt Your First Animated Lower Third

Your Remotion project is scaffolded, Studio is running, and Claude Code is ready to generate code.

A lower third is the name-and-title graphic you see at the bottom of news broadcasts, YouTube videos, and conference talks. Instead of writing one from scratch, you'll prompt Claude Code to build it for you.

In this step, get ready to:
  • Prompt Claude Code to generate an animated lower-third component with your name.
  • Preview the AI-generated animation in Remotion Studio.
  • Iterate on the design with follow-up prompts.
Prompt your lower third

Claude Code can see your entire project, including the Agent Skills that teach it Remotion best practices. You just need to describe what you want in plain English.

  • In your Claude Code terminal, type the following prompt and press Enter:
Create an animated lower-third component called LowerThird. It should display the name [[YOUR_NAME="your name"]] with the title [[YOUR_TITLE="your job title or role"]] below it. The graphic should slide in from the left with a colored accent bar, fade in smoothly, and use the Inter font. Use a black background. Register it as a Composition in Root.tsx at 1920x1080, 30fps, 120 frames.

What happens when you press Enter?

Claude Code reads your project files and the Remotion Agent Skills, then generates the component code. It creates the file, writes the animation logic, and registers the composition in Root.tsx. All of this happens automatically.

Claude Code asks for permission before creating or editing files. You can allow each one manually, or press Shift+Tab (macOS) or Alt+M (Windows) to switch to acceptEdits mode. This lets Claude Code edit files without asking each time.

Be careful with this. In acceptEdits mode, Claude Code writes and overwrites files the moment it decides to. Keep an eye on what it generates.

💡 What is Root.tsx?

Root.tsx is Remotion's registry file. Every composition you want to preview or render must be listed here as a <Composition> entry with its dimensions, frame rate, and duration.

Think of it as a table of contents for your video project. If a component isn't registered in Root.tsx, Remotion Studio won't know it exists.

  • Wait for Claude Code to finish writing the files. You'll see it create the component and update the Root file in your terminal output.

Claude Code producing errors?

If Claude Code generates code that doesn't compile, try a follow-up prompt like "fix the error in LowerThird.tsx". It can read error messages from your terminal and correct itself.

If the animation doesn't look right, describe what you want changed: "Make the slide-in faster" or "Change the accent bar to blue".

Help me fix the lower-third composition Claude Code generated

Preview in Remotion Studio

Because Remotion Studio is still running in your other Terminal tab, new compositions appear instantly after Claude Code saves the files.

  • Switch to your browser where Remotion Studio is open at http://localhost:3000.
  • Click the left panel icon in the top-right corner of the Studio (the leftmost of the two square icons next to Help).
  • This pops out a left-hand sidebar. Click LowerThird.
  • Press the play button or spacebar to watch the animation.

You should see your name and title slide in with a colored accent bar. The animation was generated entirely from your prompt.

Don't see LowerThird in the sidebar?

If you only see MyComp, the compositions list is collapsed. Click the left panel icon in the top-right corner of the Studio (the leftmost of the two square icons next to Help) to expand it.

Check that Remotion Studio is still running in your first Terminal tab. If it stopped, run npm run dev again in that tab.

If Studio is running but LowerThird still isn't listed, Claude Code may not have registered it in Root.tsx. Go back to Claude Code and prompt: "Register LowerThird in Root.tsx as a Composition at 1920x1080, 30fps, 120 frames."

Help me get my LowerThird to appear in Remotion Studio

Iterate on the design

The first generation is a starting point. You can refine the animation with follow-up prompts until it looks exactly how you want it.

  • Switch back to your Claude Code terminal and try a follow-up prompt:
Change the accent bar to [[ACCENT_COLOR="your favorite color"]] and add an animated underline beneath my name
  • Check Remotion Studio again. The animation updates instantly thanks to hot-reload.
  • Try another iteration if you'd like. Describe any change in plain English and Claude Code rewrites the code.

Experiment with your prompts

Try prompts like "Change the accent bar color to purple" or "Make the text larger" or "Add a background blur behind the lower third". Each iteration takes seconds instead of manual coding.

Your first animated component is live, generated entirely from a prompt. Next up, you'll prompt a complete design system with a theme config and a title card.

Create a Customizable Design System

Prompt a Design System with a Title Card

Your LowerThird is animating in Remotion Studio. Now it's time to turn your project into a proper design system with consistent colors and timing.

A design system means one config file controls the look of every component. You'll prompt Claude Code to create a theme file and a second component (a TitleCard) that both read from the same source of truth.

In this step, get ready to:
  • Prompt Claude Code to create a centralized theme config file.
  • Prompt a TitleCard component that uses the theme.
  • Test instant customization by prompting a theme overhaul.
Prompt your theme config

A theme config centralizes your colors, fonts, and animation timing in one file. Every component reads from it, so changing one value updates your entire design system instantly.

  • In your Claude Code terminal, type the following prompt and press Enter:
Create a theme config file at src/theme.ts that exports a theme object with: a primary color of [[PRIMARY_COLOR="your primary color e.g. blue (#2563eb)"]], a dark background color of [[BG_COLOR="your background color e.g. #1a1a2e"]], a white text color, and an accent color. Include font choices and timing values in frames for fadeIn, slideIn, hold, and fadeOut. Then update the LowerThird component to import and use these theme values instead of any hardcoded colors or timing.
  • Wait for Claude Code to finish creating the theme file and updating LowerThird.
  • Navigate back to Remotion Studio at http://localhost:3000 and refresh the page.
  • Click LowerThird in the left sidebar and press play. It should still animate correctly, now powered by the theme config.

What is a theme config?

A theme config is a single file that controls your project's colors, fonts, and timing. Every component reads from it instead of hardcoding its own values.

Change one value in the config, and every component that references it updates automatically. This is what makes it a design system — one source of truth for your entire visual identity.

Prompt a TitleCard component

Now you'll add a second component to prove the design system works. The TitleCard uses the same theme file but with a different animation style.

  • Prompt Claude Code with:
Create a TitleCard component that displays a centered heading [[VIDEO_TITLE="your video or channel title"]] with an optional subtitle. It should scale in with a subtle overshoot bounce effect and use all colors and timing from theme.ts. Add a small accent bar below the text using theme.colors.accent. Register it in Root.tsx at 1920x1080, 30fps, 90 frames.
  • Wait for Claude Code to finish generating the component.
  • Navigate back to Remotion Studio at http://localhost:3000 and refresh the page.
  • Click TitleCard in the left sidebar and press play.

You should see your title scale in with a bounce effect, followed by the accent bar. Both components now share the same theme.

Don't see TitleCard in the sidebar?

If Studio is running but TitleCard isn't showing, prompt Claude Code: "Register TitleCard in Root.tsx as a Composition at 1920x1080, 30fps, 90 frames."

If you see a red error in your Studio Terminal, prompt Claude Code: "Fix the error in TitleCard.tsx" and it will read the error and correct itself.

Help me get my TitleCard to appear in Remotion Studio

Test customization with a single prompt

Right now, both LowerThird and TitleCard share the same theme you just configured. One prompt to Claude Code can transform the entire look of your project. Colors, background, and typography all change at once.

  • Prompt Claude Code to overhaul your theme by typing this and pressing Enter:
Switch the theme to a light mode: change the background to cream (#fdf8f0), the primary color to gold (#d4a853), the text color to dark charcoal (#2d2d2d), and the font family to Playfair Display. Update all components to use the new theme values.
  • Wait for Claude Code to finish updating the theme and components.
  • Navigate back to Remotion Studio at http://localhost:3000 and refresh the page.
  • Click LowerThird in the left sidebar and press play. The background is now a warm cream, the accent bar is gold, and the text renders in an elegant serif font.
  • Click TitleCard in the left sidebar. It also reflects the full light-mode overhaul with the same gold, cream, and serif styling.

One prompt changed the entire visual identity of both compositions. This is the power of a design system. A single source of truth means you never update components one by one.

Experiment freely

Try prompting Claude Code with other theme changes: "Change the font to Courier" or "Make the fadeIn slower at 20 frames" or "Use a gradient background." Every component that reads from theme.ts updates together.

You now have two animated components driven by a single config file, all generated from prompts. Next up, you'll layer these graphics over real video footage.

Overlay Your Design System on Real Video

Overlay Your Graphics on Real Video

Your design system now has two animated components controlled by a single config file. Changing one value in theme.ts updates every graphic instantly.

Now it's time to put those graphics to work on real footage. You'll prompt Claude Code to create a composition that layers your title card and lower-third over an actual video using Remotion's Sequence component for precise frame timing.

In this step, get ready to:
  • Prompt Claude Code to create a video overlay composition with real footage.
  • Preview the layered graphics playing on top of video in Remotion Studio.
  • Iterate on the timing and layout with follow-up prompts.
Prompt the video overlay composition

Remotion's OffthreadVideo component loads real video footage as a base layer, and Sequence components control when each overlay appears. Claude Code knows these patterns from the Agent Skills.

  • Choose your video source below, then prompt Claude Code by copying the matching prompt and pressing Enter:

Use my own video

You can use any .mp4 you already have. A clip from your Downloads folder, a screen recording, or a video you AirDrop from your phone all work.

  • Find the video file on your computer (check Downloads or your Desktop).
  • Rename it to something short with no spaces, like my-video.mp4.
  • Open Finder (macOS) or File Explorer (Windows).
  • Navigate to your Remotion project folder on your Desktop.
  • Open the public/ folder inside it.
  • Drag your renamed video file into public/.

Then use this prompt (replace my-video.mp4 with your actual filename if you named it differently):

Create a VideoOverlay composition that layers my TitleCard and LowerThird over real video. Use OffthreadVideo with a staticFile reference to my-video.mp4 from the public folder as the base layer. Match the composition dimensions to my video's aspect ratio (use 1080x1920 for portrait/TikTok, 1920x1080 for landscape, or 1080x1080 for square). Show the TitleCard for the first 3 seconds with a semi-transparent dark overlay, then show the LowerThird after it disappears. Register it in Root.tsx.

Use the sample video

Remotion hosts a free sample clip you can use without downloading anything.

Create a VideoOverlay composition that layers my TitleCard and LowerThird over real video. Use OffthreadVideo with https://remotion.media/BigBuckBunny.mp4 as the base layer. Show the TitleCard for the first 3 seconds with a semi-transparent dark overlay, then show the LowerThird after it disappears. Register it in Root.tsx.

What is OffthreadVideo?

OffthreadVideo is Remotion's recommended way to include real video. It uses FFmpeg to extract frames outside the browser, which gives you accurate frame-by-frame control during rendering.

The standard HTML <video> tag has seeking limitations that make it unreliable for precise compositions.

  • Wait for Claude Code to finish creating the VideoOverlay component and updating Root.tsx.
  • Claude Code may ask for permission to create or edit files. Allow it when prompted.

Claude Code not using OffthreadVideo?

If Claude Code uses a regular <video> tag instead of OffthreadVideo, prompt it: "Replace the video tag with OffthreadVideo from remotion for frame-accurate rendering."

Help me fix my video overlay composition

Preview your overlays on real footage
  • In Remotion Studio, click VideoOverlay in the left sidebar.
  • Press the play button or use the spacebar to watch the composition play through.

You should see your video playing as the background. The title card appears first over a dark overlay, then disappears. After a short gap, your lower-third slides in from the left.

Video dimensions look off?

If your video looks stretched or has black bars, prompt Claude Code to fix it with something simple like: "Change this to portrait orientation" or "Make this landscape 1920x1080."

💡 How does the layering work?

Remotion layers elements like a stack of transparent sheets. Components later in the JSX tree appear visually on top. Sequence controls when each layer is visible based on frame count.

🙋‍♀️ Don't see VideoOverlay in the sidebar?

Check that Remotion Studio is still running. If it stopped, run npm run dev again in that Terminal tab.

If Studio is running but VideoOverlay isn't listed, prompt Claude Code: "Register VideoOverlay in Root.tsx as a Composition at 1920x1080, 30fps, 300 frames."

Help me get my VideoOverlay to appear in Remotion Studio

Notice how the title card and lower-third already match each other's colors and fonts. That's your theme.ts file at work. Every overlay pulls from the same design system, so they look consistent without any extra styling.

Iterate on the timing

The timing might not be perfect on the first try. Use follow-up prompts to adjust when each overlay appears.

  • If you want to adjust the timing, try prompts like:
Trim the video to start at 5 seconds and end at 15 seconds. I only want that 10-second clip as the base layer.
  • Check Studio after each change. The preview updates instantly.

Your motion graphics are now layered over real video, all built through prompts. Next up, you'll animate a diagram from scratch to show how Remotion handles more than just video overlays.

Render and Export to MP4

Animate a Diagram with Claude Code

Your design system overlays are composited over real video footage, all driven by a theme config and reusable components. The system is ready to expand beyond video overlays.

Diagrams are everywhere in tech content. Architecture overviews, flowcharts, process maps. Normally they're static images, but with Remotion you can animate them so nodes appear sequentially and connections draw themselves between them. You'll prompt Claude Code to build one from scratch.

In this step, get ready to:
  • Prompt Claude Code to create an animated diagram composition.
  • Add images to each node in your diagram.
  • Overlay your diagram animation on real video.
Prompt your diagram animation

Think about what kind of diagram you'd like to animate. Here are some ideas:

  • How a pizza order works (order placed, kitchen prepares, oven bakes, delivery).
  • How a website loads (you click a link, server responds, page appears).
  • A morning routine (wake up, shower, breakfast, leave).
  • How a message gets sent (you type, phone sends, friend receives).
  • Write your own prompt describing the diagram you want. Mention that nodes should appear one at a time with arrows drawing between them. Here's an example:
[[DIAGRAM_PROMPT="Animate a diagram showing how a pizza order works: Order Placed, Kitchen Prepares, Oven Bakes, Delivery. Show each step as a node appearing one at a time left to right, with arrows drawing between them."]]

Describe the sequence clearly

For diagram animations, the order of appearance matters. Number your steps or use words like "first", "then", "finally" so Claude Code knows which elements to reveal in which order. Mention the animation style for both nodes (fade, scale, slide) and connections (draw, dash, grow).

  • Press Enter and wait for Claude Code to generate your diagram composition.
  • Allow file creation and edits when prompted.
Preview and iterate
  • Switch to Remotion Studio and click your new diagram composition in the left sidebar.
  • Play the animation and check that nodes appear in the right order with connections drawing between them.
  • Go back to Claude Code and prompt changes until you're satisfied with the timing and layout.

Iterate as many times as you want. Each prompt takes seconds to apply.

Iteration ideas

Good follow-up prompts: "Make the arrows dashed instead of solid", "Slow down the animation so each node takes longer to appear", "Add labels on the arrows", "Make the nodes bigger".

Add images to your nodes

Plain boxes with text labels work, but images make your diagram much more engaging. Prompt Claude Code to add an image or icon to each node.

  • In Claude Code, type a prompt like this and press Enter:
[[IMAGE_PROMPT="Can you add an image to each node? Find some icons from the web that match each step."]]
  • Allow file creation and edits when prompted.
  • Check Remotion Studio to see the images inside your nodes.

Don't like the images?

If Claude Code picks images you don't like, prompt it again: "Replace the image in the Order Placed node with this URL: [paste a URL]". You can find free icons on sites like flaticon.com or icons8.com.

Overlay your diagram on video

Your diagram looks great on its own. Now you'll layer it over real video footage, the same way you overlaid your title card and lower-third earlier.

  • Prompt Claude Code to composite your diagram over video:
[[OVERLAY_PROMPT="I want you to overlay the diagram onto the VideoOverlay composition but blend in the background."]]
  • Allow file creation and edits when prompted.
  • Switch to Remotion Studio and click the new composition in the left sidebar.
  • Play it through to verify the diagram animates over the video footage.

You should see the video playing in the background with your diagram nodes and arrows appearing on top of it.

Your diagram is now overlaid on real video. Next up, you'll render everything to a polished MP4 file you can share anywhere.

Prompt New Compositions with Claude Code

Render and Export to MP4

You've prompted an animated diagram and iterated on it until the nodes and connections revealed themselves perfectly. Your Remotion project now has multiple compositions, all driven by your theme config.

Everything still only exists as a live preview in Remotion Studio. To share your work or use it in a real video project, you need actual MP4 files. Remotion's render pipeline processes every frame and stitches them into a standalone video.

In this step, get ready to:
  • Render your VideoOverlay composition to a real MP4 file.
  • Open and verify the rendered video plays correctly with overlays.
Render your composition to MP4

You've already been previewing your compositions in Remotion Studio. The same interface lets you render a final video file with one click.

  • Make sure VideoOverlay is selected in the left sidebar of Remotion Studio.
  • Click the Render button in the bottom right corner of the Studio.
  • Leave the default settings (H.264 codec, out/ output folder). Click Render video.

What happens during rendering?

Remotion launches a headless browser, captures every frame of your composition, downloads the remote video, composites your overlays on top, and encodes the final result as an H.264 MP4. All 300 frames (10 seconds at 30fps) get processed.

The render takes a minute or two depending on your machine. You'll see a progress bar in the Studio showing the frame count advancing.

  • Wait for the render to complete. You should see a green success indicator and the output file path in the render panel.

Render taking forever or failing?

  • If you see a network error, the render needs to download the BigBuckBunny video. Make sure you have an internet connection.
  • If the render crashes with an out-of-memory error, close other apps to free up RAM.
  • If the Render button is greyed out, make sure VideoOverlay is selected in the sidebar and the Studio server is still running.

Why is my Remotion render failing?

Open and verify the rendered MP4
  • Open Finder (macOS) or File Explorer (Windows) and navigate to the out/ folder inside your motion-graphics project on the Desktop.
  • Double-click the rendered MP4 file to open it in your default video player.

You should see the video footage with your title card appearing first, followed by the lower-third sliding in. The overlays are baked into the video file itself.

Why programmatic video is powerful

In traditional video editing, changing resolution or frame rate means re-exporting from a timeline. With Remotion, you prompt Claude Code to change a number in your code and click Render again. Your animations automatically adapt.

Secret mission

Animate a Split-Screen Transition

Want to level up your video compositions? Instead of overlaying graphics on a static full-screen video, you'll make the video itself animate down at the 5-second mark to reveal your diagram in the top third. It's the same technique educational YouTube creators use to introduce visual explanations mid-video.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely locally, so there are no ongoing costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • Remotion project folder (motion-graphics) on your Desktop.
  • Rendered MP4 files in the out/ folder.
  • Node.js (installed globally).
  • Claude Code (installed globally).
  • Remotion Studio dev server (runs locally while active).

Keep everything running

No action needed. Choose this if you're still actively building or want to keep experimenting with your design system and Claude Code prompts.

  • Your project folder stays on your Desktop ready to open anytime.
  • Run npm run dev from the motion-graphics folder to relaunch Remotion Studio whenever you want to preview or build new compositions.
  • Node.js and Claude Code remain available for other projects too.

Pause - I'll come back to this later

Shut down running processes to free up memory. Your project files stay intact so you can pick up where you left off.

  • Stop the Remotion Studio dev server by pressing Ctrl+C in the Terminal window where it is running.
  • If Claude Code is still open, type /exit or press Ctrl+D twice to quit.
  • Your motion-graphics folder remains on your Desktop. When you come back, just open Terminal, run cd ~/Desktop/motion-graphics, and start the dev server again with npm run dev.

Delete - I don't want to use this again

Remove all project resources and start fresh. This deletes your code, rendered videos, and installed packages.

  • Stop the Remotion Studio dev server by pressing Ctrl+C in the Terminal window where it is running.
  • Delete the project folder:

macOS / Linux

rm -rf ~/Desktop/motion-graphics

Windows (PowerShell)

Remove-Item -Recurse -Force $HOME\Desktop\motion-graphics
  • Node.js and Claude Code are general-purpose tools. Keep them if you plan to use them for other projects. To uninstall Node.js, delete it from /usr/local/bin/node or use your package manager.
  • Your rendered MP4 files in the out/ folder are deleted along with the project folder. If you want to keep them, copy them to another location before deleting.

That's a Wrap!

That's a Wrap!

Nice work! You just built a complete motion graphics overlay system using Remotion, creating animated overlays entirely from code and config values instead of a timeline editor.

You've learned how to:

  • Built animated lower-thirds and title cards driven by frame-based interpolation, with smooth easing curves for professional motion.
  • Created a centralized design system where a single config file controls all colors, fonts, and animation timing across every component.
  • Overlaid your graphics on real video footage using OffthreadVideo and Sequence, then rendered a production-ready MP4 with overlays baked in.
  • Animated a split-screen transition where the video slides down at the 5-second mark to reveal a diagram in the top third, like professional educational content creators.

Ready to quiz yourself?