🎬 Use two free tools — Claude Code and Remotion — to build fully animated short-form videos (TikTok, Reels, YouTube Shorts). You type a prompt. AI does the rest. No design skills needed.
Credit: Sam · Ronin Socials
📌 At a Glance
| 🧰 Tools | Claude Code + Remotion (free, open source) |
| 📱 Output format | 1080×1920 vertical video (Reels / Shorts / TikTok) |
| 🎨 Skills needed | None — Claude handles the code |
| ⏱️ Setup time | One command, ~60 seconds |
| 🔑 Magic line | Every prompt must start with "Use the Remotion best practices skill." |
💡 What Remotion is: a free open-source tool that turns code into videos. It's what actually builds and renders the final file. You never touch it directly — Claude Code handles everything inside it.
🚀 Setup in One Command
Before your first video, install the Remotion Skills — instruction files that teach Claude exactly how Remotion works, its rules, best practices, and how to avoid common mistakes.
Open your terminal and run:
npx skills add remotion-dev/skillsThat's it. You only do this once. Now you're ready to make videos.
🛠️ \Stuck? Hit an error?\
Copy the error message and paste it back to Claude in the terminal. Claude will diagnose and fix the issue automatically.
⚠️ The One Rule
🔑 Every prompt must start with this line:
\`
Use the Remotion best practices skill.
\`
This tells Claude to follow Remotion's rules so the video renders correctly. Skip it and things break.
🎥 The Full Example Prompt
This is the exact prompt Sam used to build the reel you probably saw before getting here — a 6-scene, 25-second Apple-style motion graphic. The prompt doesn't need to be this long, but it shows you what "max detail" looks like.
📋 Click to expand full prompt
Use the Remotion best practices skill.
Create a 25-second motion graphic video (1080x1920, 30fps) in a clean
black and white Apple-style aesthetic. Pure black background (#000000), pure
white text and graphics (#FFFFFF), no color except
subtle gray (#888888) for secondary elements. No gradients. No decorative
elements. Just bold typography and clean motion — like an Apple product
launch slide.
SAFE ZONE: All text and key content must stay at least 150px from the top
and 170px from the bottom. Side margins 80px minimum. MINIMUM FONT SIZES:
Headlines 64px+, body 40px+, labels 32px minimum.
BUILD THESE 6 SCENES:
SCENE 1 — Bad Retention (5 seconds):
- Small label slides in: "YOUR RETENTION GRAPH RIGHT NOW" — Inter 400,
32px, gray #888888
- An animated SVG line chart draws itself left to right over 2 seconds
- Chart shows a steep drop-off: starts at 100% at 0:00, plummets to 15% by
the halfway point, flatlines near zero. Looks like a cliff.
- X-axis label: "Video Duration" — Y-axis label: "Viewers Remaining"
- Chart line is white, thin (2px stroke), draws via stroke-dashoffset
animation
- Below the chart, a bold label fades in: "Most people leave in the first
5 seconds." — Inter 600, 40px, white
- Whole scene enters with spring from slight scale 0.95 to 1.0
SCENE 2 — Good Retention (5 seconds):
- Same layout. Same label position but now reads: "YOUR RETENTION GRAPH
AFTER THIS" — same gray style
- New SVG line chart draws itself: starts at 100%, holds high (70%+)
through the middle, gradual gentle slope, ends around 45%. Looks healthy.
- Same axis labels
- Bold label fades in below: "Viewers stay. The algorithm pushes it." —
Inter 600, 40px, white
- Transition from Scene 1: previous chart shrinks out with spring, new one
scales in
SCENE 3 — The Mechanism (4 seconds):
- Previous content fades out cleanly
- Two lines of text appear staggered with spring, centered:
- Line 1: "One skill." — Inter 800, 80px, white
- Line 2: "One prompt." — Inter 800, 80px, white — staggers in 12 frames
after line 1
- Below both, smaller text fades in 20 frames later: "That is all it takes
to animate your videos." — Inter 400, 40px, gray #888888
SCENE 4 — Meta Moment (4 seconds):
- Full white-on-black centered text, takes full safe zone
- Single line fades in with spring from scale 0.9:
"This video was animated entirely by Claude Code."
- Inter 700, 56px, white
- Nothing else on screen. Let it breathe.
SCENE 5 — How To (4 seconds):
- 2-step list animates in, staggered by 15 frames each:
- "01 Upload the Remotion skill" — Inter 600, 44px, white. "01" in gray.
- "02 Paste your prompt" — Inter 600, 44px, white. "02" in gray.
- Below both, smaller text fades in: "That is it." — Inter 400, 36px, gray
#888888
SCENE 6 — CTA (3 seconds):
- Everything fades out
- Single centered line appears with spring:
"Comment ANIMATE below."
- Inter 800, 64px, white
- Below it, smaller: "I will send you the exact skill and prompt." —
Inter 400, 36px, gray #888888
- Subtle pulse animation on "ANIMATE" (scale 1.0 to 1.02, loops)
GLOBAL RULES:
- Font: Inter (weights 400, 600, 700, 800) throughout
- All entrances use spring({ damping: 200 })
- All exits use opacity fade over 8 frames
- Between scenes use a clean 6-frame fade to black
- No music reference needed — this is a silent motion graphic
PREVIEW: After building, open Remotion Studio so I can preview in my
browser
```</code></pre></div></details>
🎨 Why This Prompt Works
The reason a prompt this detailed works is because every layer of the video is decided up front — nothing is left for Claude to guess.
Layer
What It Controls
🎭 Aesthetic
Apple-style black/white, no gradients, no decoration
📐 Safe zone
150px top / 170px bottom / 80px sides — nothing clipped on mobile
🔤 Typography
Inter font, weights locked, minimum font sizes defined
🎬 Scene structure
6 scenes, exact duration per scene
✨ Motion rules
spring({ damping: 200 }) entrances, 8-frame fades, 6-frame scene transitions
👀 Preview
Explicit instruction to open Remotion Studio when done
🧬 Prompt Anatomy — Steal This Structure
🔧 \1. Skill activation line\
Always start with Use the Remotion best practices skill. Non-negotiable.
🎨 \2. Aesthetic + format block\
Duration, resolution, frame rate, color palette, overall visual direction. One paragraph is enough.
📐 \3. Safe zone + typography rules\
Padding from edges and minimum font sizes. Keeps text from getting clipped by the Reels/Shorts UI.
🎬 \4. Scene-by-scene breakdown\
For each scene: duration, what appears, exact copy, font weight + size + color, animation style, how it transitions.
⚙️ \5. Global rules\
Font family, entrance/exit animation, scene transition style, any global behavior that should apply everywhere.
👀 \6. Preview instruction\
After building, open Remotion Studio so I can preview in my browser.
🎯 Quick-Start Mini Prompt
Don't want to write 150 lines? Start here. Fill in the brackets and go.
📋 Click to expand mini prompt
Use the Remotion best practices skill.
Create a [15-second] motion graphic video (1080x1920, 30fps) in a clean
[Apple-style black and white] aesthetic. Safe zone: 150px top, 170px bottom,
80px sides. Minimum font sizes: headlines 64px+, body 40px+.
Build these [3] scenes:
SCENE 1 — [scene name] ([duration] seconds):
- [What appears, exact copy, font + size + color, how it animates in]
SCENE 2 — [scene name] ([duration] seconds):
- [same]
SCENE 3 — CTA ([duration] seconds):
- [Final line, call to action]
Global rules:
- Font: Inter throughout
- Entrances: spring({ damping: 200 })
- Exits: 8-frame opacity fade
- Scene transitions: 6-frame fade to black
After building, open Remotion Studio so I can preview in my browser.
```</code></pre></div></details>
🏁 Now stop consuming and go make something.