Remotion Animation Rules

Overview

This skill enables Claude to create technically correct animations in Remotion by following Remotion-native rendering and animation principles.

Unlike traditional frontend animation workflows, Remotion relies entirely on deterministic frame-based rendering instead of browser-driven animation systems.

This workflow focuses on:

• proper use of useCurrentFrame()
• spring-driven motion systems
• deterministic rendering
• layout stability
• frame-based timing
• avoiding unsupported animation patterns

The goal is to ensure animations remain smooth, stable, render-safe, and consistent across all frames.