remotion-best-practices

name	remotion-best-practices
description	Best practices for Remotion - Video creation in React
metadata	{"tags":"remotion, video, react, animation, composition"}

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:

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 for video-first layout and text sizing guidance.

Animate properties using useCurrentFrame() and interpolate(). Use Easing to customize the timing of the animation.

import { useCurrentFrame, Easing } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = (frame, [,  * fps], [, ], {
    : ,
    : ,
    : .(, , , ),
  });

   ;
};