remotion-best-practices

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring() from Remotion. CSS transitions, CSS animations, and Tailwind animate classes are forbidden because they do not render correctly during video export.

Use the @remotion/captions package with the Caption type. Transcribe audio with @remotion/install-whisper-cpp, import existing .srt files with parseSrt(), then display them using createTikTokStyleCaptions() with word-level highlighting.

Place assets in the public/ folder and reference them with staticFile(). Use the <Img> component from remotion for images and <Video> from @remotion/media for videos, which ensure assets fully load before rendering.

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

Use Mediabunny to extract metadata by creating an Input with UrlSource and calling computeDuration() for duration or reading displayWidth and displayHeight from the primary video track. These values can feed calculateMetadata to set composition settings dynamically.

Rendering differences usually come from CSS transitions, Tailwind animation classes, or self-animating libraries that ignore the frame timeline. Remotion renders frame-by-frame, so every visual change must derive from useCurrentFrame() to stay deterministic.