remotion-best-practices

Scaffold a project with npx create-video@latest --yes --blank --no-tailwind, then install dependencies and start the preview with npx remotion studio --no-open. Add React markup following the frame-driven animation rules.

Animate using useCurrentFrame() with interpolate() and Easing.bezier() for timing. CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly.

Use the @remotion/captions package with the Caption type. Transcribe audio to generate captions, import existing .srt files with parseSrt(), or display them with createTikTokStyleCaptions() for word-by-word highlighting.

Yes, install @remotion/three and wrap 3D content in ThreeCanvas with width and height props. All animations must be driven by useCurrentFrame(); using useFrame() from @react-three/fiber is forbidden to avoid flickering.

Run npx remotion render for videos or npx remotion still for single frames. For advanced options like transparent videos, WebGL effects, or Lambda rendering, use the --gl=angle flag or the SaaS rendering guidance.

Use the Mediabunny library with Input and UrlSource to call computeDuration() or read the primary video track's displayWidth and displayHeight. These values can feed calculateMetadata to set composition duration and dimensions dynamically.