remotion-best-practices

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring(). CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly in exported videos.

Transcribe audio with @remotion/install-whisper-cpp or import an .srt file with parseSrt() from @remotion/captions. Then use createTikTokStyleCaptions() to group words into pages and render them in Sequence components with word highlighting.

Place assets in the public/ folder and reference them with staticFile(). Use the Img component from remotion for images and the Video component from @remotion/media for videos, never native HTML img or video tags.

Yes. Three.js works via @remotion/three with ThreeCanvas, but all 3D animation must use useCurrentFrame() instead of useFrame(). Tailwind CSS is supported, but transition-* and animate-* classes must be avoided.

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS animations, useFrame() from React Three Fiber, or third-party library animations. Convert all motion to frame-based interpolation and disable library-built-in animations.

Use the trimBefore and trimAfter props on the Video component for non-destructive trimming in frames. Alternatively, run bunx remotion ffmpeg with re-encoding (-c:v libx264) to trim the file permanently and avoid frozen frames.