remotion-best-practices

Scaffold a project with npx create-video@latest, then write React components using Remotion compositions. Animate with useCurrentFrame() and interpolate(), preview with npx remotion studio, and render with npx remotion render.

Drive all animations with useCurrentFrame() and interpolate() rather than CSS transitions or animations, which do not render correctly. Use Easing.bezier() or Easing.spring() for timing, and prefer scale, translate, and rotate CSS properties over transform.

Yes, the @remotion/captions package transcribes audio into Caption JSON, displays TikTok-style caption pages with word highlighting, and imports existing .srt files via parseSrt(). Captions are rendered in Sequence components synced to the timeline.

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

CSS transitions, animations, and Tailwind animation classes do not render correctly because Remotion renders frames deterministically. Refactor them into interpolate() calls driven by useCurrentFrame() with explicit easing and clamping.

Run npx remotion render from the project root to export the video. Use npx remotion still for single frames, and enable WebGL with Config.setChromiumOpenGlRenderer('angle') when using WebGL-based effects.