remotion-best-practices

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring(), writing durations in seconds multiplied by fps from useVideoConfig(). CSS transitions and Tailwind animation classes are forbidden because they do not render correctly.

Transcribe audio with the transcribe() function from @remotion/install-whisper-cpp, or import an existing .srt file using parseSrt() from @remotion/captions. Then group captions into pages with createTikTokStyleCaptions() and render each page in a Sequence with word highlighting.

Place assets in the public/ folder and reference them with staticFile(), then render them with the Img component from remotion and the Video or Audio components from @remotion/media. Remote URLs with CORS enabled can be used directly without staticFile().

Yes, TailwindCSS works once enabled in the project, but transition-* and animate-* classes must be avoided. Three.js content requires @remotion/three with ThreeCanvas, and all 3D animations must be driven by useCurrentFrame() rather than useFrame().

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS animations, third-party library animations, or useFrame() from React Three Fiber. Replace them with frame-based interpolation and disable built-in animations in chart or map libraries.

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