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 Audio and Video components from @remotion/media with staticFile() for local files or remote URLs directly. They support trimming with trimBefore and trimAfter, volume callbacks, playbackRate, looping, and pitch adjustment via toneFrequency.

Yes, TailwindCSS works in Remotion once installed and enabled in the project. However, avoid transition-* and animate-* classes since all motion must be driven by useCurrentFrame() to render correctly.

Use @remotion/captions to parse .srt files or transcribe audio, then group captions into pages with createTikTokStyleCaptions(). Render each page in a Sequence and highlight the active word by comparing token timestamps to the current frame.

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS animations, useFrame() from React Three Fiber, or third-party library animations. Replace them with frame-based interpolation or springs.

Use the calculateMetadata function on a Composition to compute durationInFrames from media metadata, for example by reading video duration with Mediabunny. It can also adjust width, height, props, and the default output filename before rendering.