React Rendering

Components become deterministic video frames.

@kitsra/kavio-react adds component authoring while Kavio JSON continues to own the timeline, media, audio, and exports.

Frame API

useCurrentFrame() returns the zero-based frame.
useVideoConfig() returns dimensions, FPS, duration, and the resolved composition.
createReactFrameRenderer(...) creates deterministic static markup.
createReactPlaywrightDriver(...) plugs markup into browser capture and video encoding.

Execution Rules

Pass the React driver to renderComposition and select browser-overlay. Components render through react-dom/server for every frame, so effects, hydration, events, browser state, and Remotion APIs are not available. Derive visuals from frame hooks, stable props, and static CSS. Images and fonts are awaited before each capture.

Performance

React markup generation and DOM replacement add per-frame work. Use FFmpeg-direct for eligible JSON-only compositions. React capture still supports capture parallelism through the standard Playwright driver contract. Injected React drivers currently make batch rendering sequential.