remotion-best-practices

Animate with useCurrentFrame() and interpolate(), optionally with Easing.bezier() for custom timing. CSS transitions and Tailwind animation classes are forbidden because they do not render correctly in Remotion's frame-based rendering.

Place assets in the public/ folder and reference them with staticFile(). Use the Img component for images, and the Video and Audio components from @remotion/media for media files; remote URLs are also supported.

Yes, install @remotion/three and wrap 3D content in ThreeCanvas with explicit width and height. All animation must be driven by useCurrentFrame(); useFrame() from @react-three/fiber is forbidden to avoid flickering during renders.

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

Remotion renders each frame deterministically, so time-based CSS transitions and animations do not advance per frame and produce incorrect output. All motion must be computed from useCurrentFrame() so every frame is reproducible.