# Your first motion graphic with Claude Code and Remotion, step by step

When to use it: You have never used Remotion and want a 10 second animated title out of Claude Code today.

Works with: [Remotion Agent Skills (official)](https://agentcut.dev/tools/remotion-agent-skills-official/), [Motion Graphics Skill Pack](https://agentcut.dev/tools/motion-graphics-skills-charlie947/), [claude-motion-design](https://agentcut.dev/tools/claude-motion-design-howseen/)

Save as: first-remotion-video.md

Download: https://agentcut.dev/prompts/md/starter-remotion-first-video.md

~~~~markdown
# First motion graphic with Claude Code + Remotion

## Step 1. Set up (once, in a terminal)
You need Node.js and Claude Code installed. Then:

    npx create-video --yes --blank my-video
    cd my-video
    npx remotion skills add
    npm run dev

Leave that terminal open. Remotion Studio opens in your browser.
Optional: Remotion also ships an official Claude Code plugin, see remotion.dev/docs/ai/claude-code-plugin

## Step 2. Start Claude Code in a second terminal

    cd my-video
    claude

## Step 3. Paste this first prompt

Make a 10 second, 1920x1080, 30 fps composition called TitleCard.
Beats:
1. Frames 0 to 20: a thin line draws from left to right in the center.
2. Frames 15 to 40: the title "YOUR TITLE HERE" rises 30 px into place and fades in, with a spring, no bounce.
3. Frames 40 to 70: a subtitle "Your subtitle" fades in under it.
4. Frames 70 to 270: hold, with a very slow 2% scale up on everything.
5. Frames 270 to 300: everything fades out together.
Use a warm off white background, near black text and one accent color.
Make the title, subtitle, colors and durations props with defaults so I can edit them in Studio.
Before writing code, list the beats back to me with frame numbers.

## Step 4. Iterate in small steps
Good follow ups, one at a time:
- "The title feels slow. Make the rise take 14 frames instead."
- "Add a 9:16 version called TitleCardVertical that reuses the same component."
- "Swap the font for a free Google font that feels editorial, and load it properly."

## Step 5. Render

    npx remotion render TitleCard out/title.mp4

Then drop the MP4 into Premiere, Resolve, Final Cut or CapCut like any other clip.
~~~~

Sources and credit:

* [Remotion, Prompting videos with coding agents](https://www.remotion.dev/docs/ai/coding-agents): Setup commands in step 1
* [Remotion, Claude Code plugin](https://www.remotion.dev/docs/ai/claude-code-plugin): Plugin install alternative

---
AgentCut: https://agentcut.dev/ · All tools as JSON: https://agentcut.dev/tools.json · Overview for agents: https://agentcut.dev/llms.txt