🎬 Claude Remotion Skill — Make AI Video Editing & Motion Graphics with Claude

An open-source Claude agent skill that turns Claude Code, Claude Desktop, and Claude AI into a real motion-graphics editor. It teaches Claude to create and edit professional AI videos with Remotion — springs, staggered choreography, color grades, film grain, Ken Burns, word-synced captions, and sound design — from a single prompt. Text to video, the way an actual editor would do it.

If you've ever asked an AI to "make a video" and gotten flat fades and linear motion, this is the fix. Remotion is never the bottleneck — motion-design craft is. This skill encodes that craft as hard rules plus a mandatory render → inspect frames → fix → re-render loop, so Claude verifies its own output instead of shipping blind.

🎥 Demo — made with this skill

A motion-graphics clip produced by Claude Code using this skill. ▶️ Watch/download the full-quality MP4 (with audio)

🤖 What is this? (TL;DR)

Claude Remotion Skill is a free, open-source agent skill for Anthropic's Claude. You install it once, then ask Claude — in plain English — to make or fix a video, and Claude renders a finished, professionally animated clip using Remotion (React + TypeScript for video). It handles motion design, B-roll, captions, transitions, and sound design automatically.

❓ FAQ

Can Claude edit videos?
Yes. Out of the box Claude can write video code; with this skill it produces professional motion graphics — proper easing, staggered timing, color grading, grain, captions — and verifies the render by extracting and inspecting frames before delivering.

Do I need After Effects or Premiere?
No. Everything runs in code via Remotion (React + TypeScript). No timeline software, no manual keyframing. You describe the video; Claude builds and renders it.

Which Claude models work?
Claude Code and Claude Desktop on Sonnet or Opus. The skill is model-agnostic — any Claude that supports agent skills can use it.

Is it free?
Yes. MIT licensed, fully open source. You only need Remotion (free, open source) and a Claude subscription/API access.

What can it make?
Logo animations, brand intros, vertical Reels/Shorts/TikToks, faceless content videos, product explainers, animated captions/subtitles, lower thirds, kinetic typography, and B-roll-driven edits.

How is this different from text-to-video models (Sora, Runway, etc.)?
Those generate pixels and hallucinate. This produces deterministic, editable, brand-controlled motion graphics from real code — exact text, exact colors, exact timing, re-renderable forever.

🆚 Generic AI video vs. with this skill

📦 What's inside

remotion-motion-graphics/
├── SKILL.md                    # Workflow + 10 non-negotiable motion rules
├── references/
│   ├── motion-patterns.md      # 17 copy-paste components (reveals, grade, grain,
│   │                           #   Ken Burns, counters, transitions, captions...)
│   └── design-rules.md         # Palettes, typography, pacing, sound, checklist
└── assets/
    └── theme.ts                # Theme template (colors, easings, spring presets)

🚀 Install

Claude Code (per-user — available in every project):

git clone https://github.com/haidrrrry/claude-remotion-skill.git
mkdir -p ~/.claude/skills
cp -r claude-remotion-skill/remotion-motion-graphics ~/.claude/skills/

Claude Code (per-project — share with your team):

git clone https://github.com/haidrrrry/claude-remotion-skill.git
mkdir -p .claude/skills
cp -r claude-remotion-skill/remotion-motion-graphics .claude/skills/

Claude Desktop / Claude.ai: upload remotion-motion-graphics.skill in Settings → Capabilities → Skills.

Verify it worked: ask Claude "make me a 3 second logo sting" — it should read the skill first (you'll see it load remotion-motion-graphics) and end by extracting and inspecting frames before delivering. If it ships a render without looking at frames, the skill isn't loaded.

Update later: git pull in your clone, then re-copy the folder (and re-upload the .skill file on Desktop).

🎯 Usage

Just talk to Claude normally — the skill triggers itself:

• "Create a 5 second logo animation for my brand"
• "My Remotion video looks generic and basic, fix it"
• "Add word-synced captions to this clip"
• "Build a vertical Reel intro, dark tech aesthetic"

Claude reads the skill, applies the motion rules, renders with Remotion, extracts frames with ffmpeg, inspects them, fixes issues, and only then delivers.

🧠 The 10 rules (short version)

1. Never linear interpolation — springs/bezier + clamp, always
2. Entrances animate 2–3 properties together
3. Stagger everything
4. Exits exist and are faster than entrances
5. Five-layer stack: bg mesh → assets → graphics → grade → grain+vignette
6. Every still gets Ken Burns; footage uses OffthreadVideo
7. Idle elements breathe (sin-wave micro-motion)
8. All timing derives from fps — no magic frame numbers
9. One theme.ts — no inline colors or easings
10. Render → inspect frames → fix → re-render. Never ship unverified.

📁 Examples

examples/ is a complete Remotion project with four finished compositions built with this skill — a profile promo, a warm app promo with a code-drawn pixel-art mascot, a "watch this video fix itself" rule-by-rule demo, and a beat-synced code edit with a synthesized soundtrack. Each one shipped only after the render → inspect → fix loop. Clone, npm install, and render any of them:

cd examples
npm install
node scripts/gen-sfx.mjs && node scripts/gen-track.mjs   # synthesize the audio (no asset files needed)
npx remotion render src/index.ts SelfFix out/self-fix.mp4 --codec h264 --crf 16

🤝 Contributing

PRs welcome — new motion patterns, palettes, or fixes. See CONTRIBUTING.md.

⭐ Star this repo

If this saved you from shipping another flat-fade video, star it — it helps other people find it.

📄 License

MIT — use it, fork it, ship videos with it.

Made by @haidrrrry · Follow @haidercodes for AI + dev content