remotion-best-practices

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

Install @remotion/media and use its Video or Audio components with staticFile() for local assets or remote URLs. These components support trimming, volume callbacks, playbackRate, looping, muting, and pitch adjustment via toneFrequency.

Yes, TailwindCSS can and should be used in Remotion if installed in the project. However, transition-* and animate-* utility classes must be avoided; all motion must come from useCurrentFrame()-driven values.

Install @remotion/captions and use createTikTokStyleCaptions() to group captions into pages, then render each page inside a Sequence. Highlight the currently spoken word by comparing token timestamps against the current frame time.

Flickering occurs when animations are not driven by useCurrentFrame(), such as using useFrame() from @react-three/fiber. Wrap 3D content in ThreeCanvas from @remotion/three and animate only via frame-based values.

Use the calculateMetadata function on a Composition together with Mediabunny to read the video duration in seconds, then return durationInFrames computed from that duration multiplied by the fps.