remotion-best-practices

To prevent flickering in Remotion animations, drive all animation logic using the `useCurrentFrame()` hook to ensure deterministic frame rendering. This approach synchronizes visual changes strictly with the current video frame, avoiding non-deterministic updates.

The best way to import images and videos into a Remotion composition is by using the `staticFile()` function for asset handling. This ensures correct loading and prevents rendering issues when referencing local media files within `<Img>` and `<Video>` components.

To sequence video clips and transitions in Remotion, use the `<Sequence>` component to organize timeline segments and `<TransitionSeries>` for complex transitions. These core components ensure efficient composition structure and smooth playback timing.

Yes, you can use React components for Remotion video creation, but you must use specific Remotion components like `<Img>`, `<Video>`, and `<Audio>` instead of standard HTML tags. This ensures proper rendering and optimal performance during video export.

Your Remotion video flickers during rendering because animations are likely driven by non-deterministic triggers like `setTimeout` instead of the frame count. Fix this by controlling all animations via `useCurrentFrame()` to guarantee consistent visual output across frames.

Yes, you need to use `staticFile()` for fonts in Remotion to ensure correct asset handling and loading. Proper asset management with `staticFile()` prevents missing font errors and ensures optimal performance during the rendering process.