remotion-motion-graphics

# 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,...