remotion-best-practices

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring(). Write animation durations in seconds and multiply by fps from useVideoConfig(). CSS transitions and Tailwind animation classes are forbidden because they do not render correctly.

Use the Audio and Video components from @remotion/media with staticFile() for local files in the public folder. Control trimming with trimBefore and trimAfter, adjust volume with a static value or frame-based callback, and delay playback by wrapping in a Sequence.

Yes, Tailwind CSS works in Remotion once installed and enabled in the project. However, avoid transition-* and animate-* utility classes since they will not render correctly; always animate using the useCurrentFrame() hook instead.

Use createTikTokStyleCaptions() from @remotion/captions to group captions into pages, then render each page inside a Sequence timed by frame calculations. Highlight the currently spoken word by comparing token timestamps against 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. Disable external animation systems and compute all visual state from the current frame.

Use calculateMetadata on the Composition and call Mediabunny to read the video duration in seconds, then return durationInFrames as the duration multiplied by fps. You can also match width and height to the source video dimensions.