haidrrrry/claude-remotion-skill

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.

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

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.

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.

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)

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 before writing any code, and it should extract and inspect frames before delivering. A render shipped without frame checks means the skill is not loaded.

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

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.

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/ is a Remotion project with four finished compositions built with this skill: a profile promo, the Focus Cat app promo, a "watch this video fix itself" demo where the motion rules apply themselves one by one, and a beat-synced code edit with a synthesized 120 BPM track. Each shipped only after the render, inspect frames, fix, re-render loop.

Here is the Focus Cat promo, 15.5 seconds, with a pixel-art mascot drawn in code. Click it for the MP4 with sound:

The other three render from source in a few minutes:

cd examples
npm install
npm run audio            # synthesize the SFX and music, no asset files needed
npm run render:selffix   # or render:codeedit / render:profile / render:focuscat

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

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

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

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