Remotion Skill (official)
The official Remotion skills for Claude Code, letting Claude build programmatic animated videos and motion graphics from a prompt.
Before & after
Same prompt, same agent — the only difference is the skill.
I can help you create an animated explainer video for your product. To make sure it's tailored to your needs, I'd need some information. What's your product, and who's your target audience? How long should the video be—30 seconds, 1 minute, 2 minutes? Also, what's the main message you want to convey? Do you have a script already, or would you like me to write one? And what's your brand's visual style—minimalist, playful, corporate? Once I know those details, I could describe a storyboard and suggest animation ideas.
ANIMATED EXPLAINER VIDEO PROJECT SPEC • Title: How ProductName Saves Time • Duration: 60 seconds • Format: MP4 (1920x1080, 24fps) • Output: explainer.mp4 (ready to share) ===== SCENE BREAKDOWN ===== SCENE 1: PROBLEM (0–15 sec) Visual: Spinning clock, user stressed face (CSS animation) Voiceover: Marketing teams spend 40 hours a week on manual tasks. SCENE 2: SOLUTION INTRO (15–30 sec) Visual: Clock morphs into ProductName logo (SVG path animation) Voiceover: ProductName automates the repetitive work. Animation: Logo scales up 200%, rotates 360 degrees SCENE 3: FEATURES (30–50 sec) Visual: Three columns slide in from left Column 1 icon: checkmark Text: Auto-generate campaigns Column 2 icon: lightning bolt Text: 2-minute setup Column 3 icon: trending up Text: 3x faster results Voiceover: Generate campaigns in minutes. Adjust in seconds. Deploy instantly. Animation: Columns fade in staggered (delay: 0s, 0.2s, 0.4s) SCENE 4: CTA (50–60 sec) Visual: Large button "Try Free" (blue gradient) Voiceover: Start your free trial at ProductName.com Animation: Button pulse effect (scale 1.0 to 1.05 to 1.0, repeat) ===== TECHNICAL BUILD ===== Framework: Remotion (React-based video composition) Key components: • Sequence: Stacks scenes vertically in timeline • Img: Static assets (logo, icons) • AbsoluteFill: Positions elements • interpolate: Animates values over time (e.g., opacity, scale) • Audio: Voiceover track (duck music under VO) Audio ducking: • Background music: Loop at full volume 0–15s • At 15s, voiceover starts → music fades to 30% volume (3 sec fade) • When VO ends → music returns to full volume ===== RENDER OUTPUT ===== Command: npm run remotion -- render composition.tsx explainer.mp4 Render time: 2 minutes (real-time playback + encoding) File size: 8 MB (MP4 H.264) Output ready to: • Upload to YouTube • Embed on landing page • Share on social media • Send to investors ===== ITERATION ===== Need changes? • Speed up the logo animation → adjust duration value • Make text larger → change fontSize prop • Change button color to red → swap color hex • Add background music → import new audio track Each edit re-renders in 2 minutes.
About this skill
name: remotion-dev-skill description: Use when The official Remotion skills for Claude Code, letting Claude build programmatic animated videos and motion graphics from a prompt.
Remotion Skill (official)
Installed with a single command (npx skills add remotion-dev/skills), this equips Claude with the Remotion framework so it can code full animated video compositions, progress bars, scanner reveals, and audio ducking, then render a finished MP4 with no manual editing.
What you get
- Public GitHub repo maintained by the Remotion team, installable via the skills CLI.
Customize your output
- Swap in your own Remotion compositions, transitions, and audio
- direct scenes with plain-English prompts.
Example output
A cinematic commercial rendered to MP4 end to end from a single prompt, demoed in the video.
Best for
Creators and developers wanting code-driven, programmatic video production.
SKILL.md preview
---
name: remotion-dev-skill
description: Use when building programmatic animated videos or motion graphics with the Remotion React framework and rendering them to MP4.
version: 1.0.0
category: Content & Video / Editing
author: AgentVolt
license: proprietary
tags:
- content-video
- editing
- standard
---
# Remotion Skill (official)
Equips an agent to build animated video compositions in Remotion, covering progress bars, scanner reveals, and audio ducking, then render a finished MP4.
## When to use
… (sign up to view the full skill)More video & editing skills
View all Video & Editing skills →Remotion Superpowers Skill
Turns Claude into a video production studio using Remotion, generating programmatic animated videos from a prompt.
Caption + CTA Skill
Writes the caption and routes the CTA to the right mechanism per platform.
Mograph Builder
Motion graphics from an AI video model: one style-locked motion sheet, then transcript-timed prompt packs for collage, type and B-roll.
Remotion Builder
Motion graphics as code: a script becomes deterministic Remotion scenes with charts, counters, maps and particle worlds, frame-exact.