remotion-best-practices

When to use

Use this skill whenever you are writing or modifying Remotion code. It covers the fundamental patterns that every Remotion project needs — from animation primitives to render settings.

Critical Rules

1. ALL animations MUST use useCurrentFrame() — CSS transitions, CSS animations, and Tailwind animation classes are FORBIDDEN. They do not render correctly because Remotion renders each frame independently.
2. Use spring() for organic motion, not interpolate() with easing. Springs feel natural. Linear/eased interpolations feel mechanical.
3. Write timing in seconds, convert to frames — multiply by fps from useVideoConfig(). Never hardcode frame numbers without commenting the equivalent seconds.
4. Always clamp interpolations — use extrapolateLeft: 'clamp', extrapolateRight: 'clamp' to prevent values from going out of range.
5. 1920x1080 at 30fps is the standard. Design for this. All size guidelines assume this resolution.

Animation Fundamentals

The Frame Model