remotion-best-practices

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring(). 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/trimAfter, volume callbacks, playbackRate, looping, and pitch adjustment via toneFrequency.

Yes, TailwindCSS works in Remotion once installed and enabled per the official Remotion docs. However, transition-* and animate-* utility classes must be avoided since all motion must be driven by useCurrentFrame().

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 motion from the current frame.

Use createTikTokStyleCaptions() from @remotion/captions to group captions into pages, render each page in a Sequence, and highlight the active token by comparing its timestamps against the current frame time.