Your creative director for Remotion video animations. A Claude skill that guides you from vague animation wishes to concrete, implementable specifications.
Transform vague animation wishes into concrete, choosable options.
When you want to animate your Remotion video but find yourself saying things like:
- ":sparkles: Make it look nice"
- ":sparkles: Something smooth"
- ":sparkles: I want it to pop"
...this skill guides you from uncertainty to a precise animation specification.
Building programmatic video with Remotion is powerful, but deciding on animation is hard:
- What's possible? — You don't know what animations Remotion can do
- What fits? — You don't know which animation matches your content
- How to describe? — You can't articulate what you want in precise terms
Remotion Director acts as your creative director:
- Analyze — You share your scene/component
- Propose — We show you 2-4 concrete animation directions
- Choose — You react ("yes that" or "more like X")
- Specify — We deliver a precise animation specification
- Implement — Hand off to remotion-best-practices for the code
For every element, we propose options across these quality levels:
| Tier | Description | Best For |
|---|---|---|
| Standard | Clean, smooth, professional | Business videos, tutorials, data |
| Enhanced | Polished, engaging, memorable | Marketing, demos, products |
| Cinematic | Dramatic, eye-catching, "wow" | Launches, viral content, intros |
Instead of technical jargon, we describe what you'll see:
| What We Say | What It Means |
|---|---|
| "Fades up like it's floating" | Opacity 0→1 + translateY 30px→0 |
| "Pops in excited to be here" | Spring scale with overshoot |
| "Unveiled like a curtain" | Clip-path wipe reveal |
| "Breathes softly" | Continuous gentle pulse |
<div>
<img src="product.png" />
<h1>SuperWidget Pro</h1>
<p>The best widget ever</p>
<button>Buy Now</button>
</div>"Make it animated nicely"
Option A: Clean & Professional (Standard)
Product fades in while gently scaling, text follows smoothly. Like a well-designed store shelf—organized, trustworthy.
Option B: Polished Impact (Enhanced) ⭐ Recommended
Product slides in with soft shadow, button pops with bounce. Like unboxing something exciting—builds toward action.
Option C: Cinematic Reveal (Cinematic)
Product spins and scales dramatically, title words appear one-by-one. Like a movie trailer—maximum impact.
B hits the sweet spot for most product videos. Want to go with that?
- ✅ Ready to implement? Say "ready" and we'll hand off to
remotion-best-practices - 🔧 Want adjustments? Tell us what to tweak
- 💡 Curious about alternatives? Ask about specific patterns
# In your project root
mkdir -p .agent/skills
cp -r remotion-director .agent/skills/# In your home directory
mkdir -p ~/.claude/skills
cp -r remotion-director ~/.claude/skills/Import the .skill file directly into Claude.
Once installed, simply tell Claude about your animation needs:
- "I want to animate this hero section"
- "Make my chart look impressive"
- "What animations work for a testimonial?"
- "I need something smooth for the intro"
The skill will automatically trigger and guide you through the process.
You: "Animate my product page"
↓
Director: Analyzes your layout
↓
Director: Proposes A/B/C with visual descriptions
↓
You: "B feels right, but slower"
↓
Director: Refines timing
↓
You: "Perfect!"
↓
Director: Generates specification
↓
Director: Hands off to remotion-best-practices for code
- SKILL.md — Complete skill guidance for Claude
- references/animation-menu.md — Animation pattern catalog
- references/scene-patterns.md — Common video structures
- Remotion — The React video framework
- remotion-best-practices — Implementation guidance and code patterns
This skill is complementary to remotion-best-practices:
- This skill (
remotion-director) — Deciding WHAT to animate - That skill (
remotion-best-practices) — Implementing HOW to animate
Without this skill, Claude typically either:
- Gives code immediately — But you didn't know if that animation was the best choice
- Asks what you want — But you didn't know the options
With this skill, Claude shows you concrete options with visual descriptions, helps you choose, and only then implements.
Contributions welcome! Areas to expand:
- New animation patterns
- Additional scene templates
- More visual descriptions
- Industry-specific recommendations
Please read our Contributing Guide (TODO).
MIT — See LICENSE for details.
Built with ❤️ for the Remotion community