remotion-best-practiceslisted

## When to use Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge. ## New project setup When in an empty folder or workspace with no existing Remotion project, scaffold one using: ```bash npx create-video@latest --yes --blank --no-tailwind my-video ``` Replace `my-video` with a suitable project name. ## Designing a video Before designing visual scenes, layouts, promos, motion graphics, or text-heavy videos, load [rules/video-layout.md](rules/video-layout.md) for video-first layout and text sizing guidance. Animate properties using `useCurrentFrame()` and `interpolate()`. Prefer `interpolate()` over `spring()` unless physics-based motion is explicitly needed. Use `Easing.bezier()` to customize timing, including jumpy or overshooting motion. For animations that should be editable in Remotion Studio, keep the `interpolate()` call inline in the `style` prop and use individual CSS transform properties (`scale`, `translate`, `rotate`) instead of composing a `transform` string. ```tsx import { useCurrentFrame, Easing, interpolate, useVideoConfig } from "remotion"; export const FadeIn = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const opacity = interpolate(frame, [0, 2 * fps], [0, 1], { extrapolateRight: "clamp", extrapolateLeft: "clamp", easing: Easing.bezier(0.16, 1, 0.3, 1), }); return <div style={{ opacity }}>Hello World!</div>; }; ``` Prefer: ```tsx style={{ sc