remotion-video

Use Remotion, a React framework for programmatic video. Scaffold a project with npx create-video@latest, define compositions in a Root.tsx file, animate with useCurrentFrame() and interpolate(), then render with npx remotion render.

Animate in Remotion using interpolate() for value mapping over frames or spring() for physics-based motion, always driven by useCurrentFrame(). CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render deterministically.

Yes, enable Tailwind during project creation or install @remotion/tailwind-v4 and call enableTailwind in remotion.config.ts. However, Tailwind transition-* and animate-* classes are forbidden; all animation must use useCurrentFrame() with interpolate() or spring().

Yes, Remotion supports AWS Lambda rendering via npx remotion lambda commands or the Node.js APIs deployFunction, deploySite, and renderMediaOnLambda. Limits include roughly 80 minutes at Full HD, 10GB storage, and 1000 concurrent lambdas by default.

Flickering usually comes from non-deterministic code: CSS animations, Math.random(), or useFrame() from React Three Fiber. Use Remotion's seeded random() function, drive all motion from useCurrentFrame(), and clamp extrapolation on every interpolate() call.

Use the Caption type from @remotion/captions, which includes text, startMs, endMs, timestampMs, and confidence fields. Official rules cover transcribing audio, displaying captions, and importing SRT files into timed caption components.