remotion-best-practices

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

Use the @remotion/captions package with the Caption type. You can transcribe audio, import .srt files with parseSrt(), and display TikTok-style pages with word highlighting using createTikTokStyleCaptions().

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

Flickering occurs when animations are not driven by useCurrentFrame(), when CSS animations are used, or when assets are not loaded through Remotion components like Img, Video, and Audio that delay rendering until loaded.

Use the trimBefore and trimAfter props on the Video component from @remotion/media for non-destructive trimming, or run FFmpeg via bunx remotion ffmpeg with re-encoding to avoid frozen frames at the start.