remotion-best-practices

Scaffold a project with npx create-video@latest, define a Composition with width, height, fps, and durationInFrames in src/Root.tsx, then build your video as a React component. Preview it with npx remotion studio.

Drive all animations with the useCurrentFrame() hook combined with interpolate or spring, writing durations in seconds multiplied by fps. CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly.

Install @remotion/captions, parse an .srt file with parseSrt() or generate captions from audio, then group them into pages with createTikTokStyleCaptions(). Render each page in a Sequence and highlight the active word using token timestamps.

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

Use Mediabunny's Input with UrlSource or FileSource to read the file, then call computeDuration() for duration or read displayWidth and displayHeight from the primary video track. These values can feed calculateMetadata to set composition settings dynamically.

Flickering usually comes from animations not driven by useCurrentFrame(), such as CSS transitions, third-party library animations, or useFrame() in React Three Fiber. Replace them with frame-based interpolation and disable built-in animations in chart or map libraries.