remotion-best-practices

Remotion rendering flickers when animations use CSS classes instead of useCurrentFrame() or when assets load incorrectly. Drive all animations via useCurrentFrame() and reference public assets using staticFile() with Remotion media components to ensure reliable rendering.

Remotion supports FFmpeg-dependent operations within compositions by applying domain-specific rules for sequencing and asset handling. Use Remotion media components and staticFile() to ensure FFmpeg workflows integrate correctly without breaking the render pipeline.

Tailwind CSS animation classes do not render correctly in Remotion. You must drive animations using useCurrentFrame() to maintain timeline-safe rendering and avoid forbidden animation mechanisms that cause flickering or incorrect timeline math.

The best way to load media in Remotion is using staticFile() for public assets alongside native components like Img, Video, Audio, and AnimatedImage. This ensures proper loading and prevents blank frames during video rendering.

Remotion supports 3D scenes using Three.js with React Three Fiber and provides specific patterns for audio visualization. Follow composition rules to ensure these specialized media features render correctly and reliably without timeline conflicts.

Remotion handles captions and transitions by applying domain-specific sequencing and timing patterns within React compositions. Use useCurrentFrame() to drive overlays and ensure all media assets are referenced via staticFile() for correct rendering output.