remotion-best-practices

Animate properties using useCurrentFrame() and interpolate() with Easing.bezier for custom timing curves. CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly in Remotion.

Transcribe audio with the transcribe() function from @remotion/install-whisper-cpp, or import existing .srt files with parseSrt() from @remotion/captions. Display them using createTikTokStyleCaptions() for paginated, word-highlighted captions.

Yes, TailwindCSS works in Remotion once installed and enabled per the official docs. However, transition-* and animate-* classes must be avoided; all animation must use the useCurrentFrame() hook to render correctly.

Use the trimBefore and trimAfter props on the Video component from @remotion/media, with values in frames. This is non-destructive and preferred over FFmpeg trimming, which requires re-encoding to avoid frozen frames.

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS animations or useFrame() from @react-three/fiber. All motion must derive from the current frame to stay deterministic across renders.

Add a calculateMetadata function to the Composition that returns durationInFrames, width, height, or transformed props. It can fetch data or measure media files with Mediabunny to compute values before rendering.