remotion-best-practices

Scaffold a project with npx create-video@latest, define a Composition in src/Root.tsx with width, height, fps, and durationInFrames, then build animated components using useCurrentFrame and interpolate. Preview with npx remotion studio.

Drive all animations with the useCurrentFrame hook and interpolate function, writing durations in seconds multiplied by fps. Use Easing.bezier for custom timing curves and Sequence components to delay or limit element duration.

No, CSS transitions, CSS animations, and Tailwind animation class names are forbidden because they do not render correctly. All motion must be driven by useCurrentFrame so each frame renders deterministically.

Install @remotion/captions, load captions in the Caption format, and use createTikTokStyleCaptions to group words into pages. Render each page in a Sequence and highlight the active word by comparing token timestamps to the current frame.

Use the trimBefore and trimAfter props on the Video component from @remotion/media, specifying values in frames. This is non-destructive and preferred over FFmpeg, which requires re-encoding to avoid frozen frames.

Flickering occurs when animations are not driven by useCurrentFrame, such as using useFrame from React Three Fiber or Mapbox's built-in animations. Disable library-driven motion, set fadeDuration to 0, and render maps with --gl=angle --concurrency=1.