remotion-best-practices

## 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 Animate properties using `useCurrentFrame()` and `interpolate()`. Use Easing to customize the timing of the animation. ```tsx import { useCurrentFrame, Easing } 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>; }; ``` CSS transitions or animations are FORBIDDEN - they will not render correctly. Tailwind animation class names are FORBIDDEN - they will not render correctly. Place assets in the `public/` folder at your project root. Use `staticFile()` to reference files from the `public/` folder. Add images using the `<Img>` component: ```tsx import { Img, staticFile } from "remotion"; export const MyComposition = () => { return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />; }; ``` Add videos using the `<Video>` component from `@remotion/media`: ```tsx import { Video } from "@...