# Remotion Motion Graphics

Create and edit professional motion graphics videos with Remotion (React-based video).

- Repository: https://github.com/haidrrrry/claude-remotion-skill (756 stars)
- Category: Design
- License: MIT
- Last updated: 2026-08-12
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add haidrrrry/claude-remotion-skill --skill remotion-motion-graphics -g -a claude-code -y`
Codex: `npx skills add haidrrrry/claude-remotion-skill --skill remotion-motion-graphics -g -a codex -y`
Cursor: `npx skills add haidrrrry/claude-remotion-skill --skill remotion-motion-graphics -g -a cursor -y`
Gemini CLI: `npx skills add haidrrrry/claude-remotion-skill --skill remotion-motion-graphics -g -a gemini-cli -y`

## Description

Create and edit professional motion graphics videos with Remotion (React-based video). Use this skill EVERY time the user wants to create a video, edit a video, animate something, build an intro/outro/logo animation, make a Reel/Short/promo/launch video, add text animations or captions to footage, composite images and B-roll into a video, or mentions Remotion, motion graphics, video rendering, or "make this video look better/less generic". Also trigger when editing an existing Remotion project or when the user complains their video looks basic, generic, or amateur, this skill contains the exact fixes. Always read this skill BEFORE writing any Remotion code.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Remotion Motion Graphics

Remotion renders React components frame-by-frame into video. Code quality is not the
bottleneck, **motion design craft is**. Untrained generation produces linear easing,
opacity-only fades, simultaneous entrances, flat colors, and no texture. That is the
"generic AI video" look. This skill exists to prevent it.

## Non-negotiable rules (apply to EVERY composition)

1. **NEVER use linear interpolation.** Every `interpolate()` gets an easing curve;
   every entrance prefers `spring()`. Always `extrapolateLeft/Right: "clamp"`.
2. **Entrances animate 2, 3 properties together** (opacity + translateY + scale).
   A lone fade is forbidden.
3. **Stagger everything.** Lists, words, rays, cards: 3, 6 frame offsets. Nothing
   enters simultaneously.
4. **Exits exist and are faster than entrances** (~10 frames vs ~20).
5. **Five-layer stack in every scene**, bottom to top: background mesh → assets →
   graphics/type → color grade → grain + vignette. Never a flat solid background.
6. **Every still image gets Ken Burns** (slow scale 1→1.08 + pan). Every video asset
   uses `<OffthreadVideo>`, never `<Video>`.
7. **Idle elements breathe**: anything on screen >2s gets sin-wave micro-motion.
8. **All timing derives from `fps`** via `useVideoConfig()`. No magic frame numbers.
9. **One theme object** at the top of the project (colors, easings, spring presets,
   fonts). Never inline a hex color or easing in a component.
10. **Render, extract frames, LOOK at them, fix, re-render.** Never deliver an
    unverified render. This loop is mandatory, see Verification below.

## Workflow

The rest: https://github.com/haidrrrry/claude-remotion-skill/blob/HEAD/remotion-motion-graphics/SKILL.md