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.

Transcribe audio with @remotion/install-whisper-cpp or import an .srt file with parseSrt() from @remotion/captions. Then use createTikTokStyleCaptions() to group words into pages and render them in Sequence components with word highlighting.

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

Flickering usually comes from animations not driven by useCurrentFrame(), such as CSS animations, useFrame() from React Three Fiber, or third-party library animations. Disable library animations and compute all motion from the current frame.

Use Mediabunny's Input with UrlSource or FileSource to call computeDuration() or read the primary video track's displayWidth and displayHeight. These values can feed calculateMetadata to set composition duration and size dynamically.