Remotion
uramaki.remotion
A Docker Compose file for Remotion alone, generated from the catalog and checked by the safety inspector. No account needed.
Framework for producing videos from React components, where compositions are rendered frame by frame in a headless browser so video output can be generated from application data.
Remotion defines a video as a React composition with a known duration and frame rate, where each frame is a render of the component tree at that point in time, driven by a hook that exposes the current frame number. Because the frames are ordinary web output, animation uses the same layout, styling and data-fetching tools as any other React application, and the content of a video can come from an API response or a database row. A renderer drives a headless browser to capture every frame and encodes them into a video file, which is what makes bulk personalised video generation practical. A preview studio scrubs the timeline during development.
You know it worked when
- The preview studio loads and lists the defined compositions.
- Scrubbing the timeline shows the composition changing per frame.
- A render produces a video file of the expected duration and frame rate.
- Data passed into the composition as props appears in the rendered output.
- Fonts and assets in the output match the preview rather than falling back.
Known sharp edges
- The company licence threshold counts personnel across every party operating the same project, including contractors and any client that owns or runs the codebase.
- Rendering drives a headless browser, so the container needs its font and graphics dependencies present or output renders with substituted fonts and no error.
- Render time and memory scale with frame count, resolution and per-frame complexity, and a long composition can occupy the container for a very long time.
- Frames are captured from live web rendering, so any asset that loads asynchronously without being awaited is captured mid-load.