Remotion Motion Graphics
Create and edit professional motion graphics videos with Remotion (React-based video).
Install
npx skills add haidrrrry/claude-remotion-skill --skill remotion-motion-graphics -g -a claude-code -y- Repository
- haidrrrry/claude-remotion-skill756
- Category
- Design
- Updated
- 3mo ago
- License
- MIT
- Context cost
- Mediumabout 1,779 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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)
- NEVER use linear interpolation. Every
interpolate()gets an easing curve; every entrance prefersspring(). AlwaysextrapolateLeft/Right: "clamp". - Entrances animate 2, 3 properties together (opacity + translateY + scale). A lone fade is forbidden.
- Stagger everything. Lists, words, rays, cards: 3, 6 frame offsets. Nothing enters simultaneously.
- Exits exist and are faster than entrances (~10 frames vs ~20).
- Five-layer stack in every scene, bottom to top: background mesh → assets → graphics/type → color grade → grain + vignette. Never a flat solid background.
- Every still image gets Ken Burns (slow scale 1→1.08 + pan). Every video asset
uses
<OffthreadVideo>, never<Video>. - Idle elements breathe: anything on screen >2s gets sin-wave micro-motion.
- All timing derives from
fpsviauseVideoConfig(). No magic frame numbers. - One theme object at the top of the project (colors, easings, spring presets, fonts). Never inline a hex color or easing in a component.
- Render, extract frames, LOOK at them, fix, re-render. Never deliver an unverified render. This loop is mandatory, see Verification below.
