remotion-best-practices

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring() from Remotion. CSS transitions, CSS animations, 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 to generate captions, import existing .srt files with parseSrt(), and display them with createTikTokStyleCaptions() for word-by-word highlighting.

Use the trimBefore and trimAfter props on the Video component from @remotion/media for non-destructive trimming. Alternatively, run bunx remotion ffmpeg with re-encoding to trim the file permanently and avoid frozen frames.

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 because it causes flickering.

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS transitions, self-animating shaders, or third-party library animations. Disable library animations and compute all motion from the current frame value.

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 settings dynamically.