remotion-best-practices

Remotion video flicker usually happens because animations use runtime CSS or third-party libraries instead of useCurrentFrame. Drive all animations deterministically with useCurrentFrame to ensure frame-accurate, flicker-free server-side rendering.

To load async assets in Remotion, use the useDelayRender hook to delay rendering until data loads. This prevents asset-loading races and ensures components mount only after asynchronous dependencies resolve.

The best way to handle media duration and trimming in Remotion is using Mediabunny utilities for metadata and FFmpeg for media trimming. This ensures assets sync reliably and durations match your composition timeline.

Remotion supports dynamic video sizing via calculateMetadata and transparent exports with specific codec and pixel format settings. These composition and export rules ensure production-ready outputs for complex pipelines.

You can integrate Mapbox and Lottie animations into Remotion compositions by following specific integration rules. Ensure animations remain deterministic by driving them with useCurrentFrame to prevent rendering errors.

Use the staticFile function to reference local media files in Remotion without loading errors. staticFile ensures assets are correctly bundled and accessible during server-side rendering, preventing asset-loading races.