remotion-best-practices

Animate in Remotion by driving all motion from the useCurrentFrame() hook with interpolate() or spring(). CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly during video export.

Add captions using the @remotion/captions package with the Caption type. You can transcribe audio to generate captions, import existing .srt files with parseSrt(), or display them with createTikTokStyleCaptions() for word-by-word 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, since these ensure assets fully load before rendering.

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

Flickering happens 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.

Use Mediabunny to extract video duration with input.computeDuration() and dimensions from the primary video track's displayWidth and displayHeight. These values can feed calculateMetadata to set composition duration and size dynamically.