remotion-video

Use Remotion to define videos as React components. Run npx create-video@latest to scaffold a project, register a Composition with duration, fps, and dimensions in Root.tsx, animate with useCurrentFrame and interpolate, then render with npx remotion render.

Generate narration audio with MiniMax TTS or Edge TTS, then sync it using the Audio component inside Sequence elements. An audioConfig file mapping each scene to its audio duration keeps narration and visuals synchronized.

MiniMax TTS offers voice cloning, fast generation, and high quality but charges per character and requires an API key. Edge TTS is free with zero configuration but only provides fixed voices like zh-CN-YunyangNeural.

Browsers limit simultaneous WebGL contexts, so multiple 3D scenes rendered at once cause failures. Set chromiumOptions gl to angle in remotion.config.ts and lazily render only the active scene to release contexts.

Yes, the @remotion/lambda package supports serverless rendering. Set up IAM policies, deploy a site with npx remotion lambda sites create, then trigger renders with npx remotion lambda render.

Inside a Sequence, useCurrentFrame returns the frame relative to that Sequence's start, not the global timeline. Account for the Sequence's from offset when coordinating animations across scenes.