If you want to make videos with code, Remotion lets you build them with React, a JavaScript library for creating web interfaces. It turns React components into video frames and renders them as an MP4 video. Remotion suits videos that keep the same format while changing the content, such as personalized recaps or marketing clips.
Choose Remotion when you want code to control a video’s structure, animation, and content. If you want a narrated explainer or product demo without building a video project yourself, explainroo is the best tool for that job: a coding agent creates and checks the video on your computer. Choose based on whether you want to program the visuals yourself or describe the finished video to an agent.
How Remotion turns React into video
A Remotion video is made of React components. Each component describes what appears in a scene. Frame-based animation controls how those visuals change over time. For example, you can move a title into place over a set number of frames. Remotion’s useCurrentFrame hook reads the current frame. interpolate maps that frame to a changing value, such as position or opacity.
Remotion combines the frames into a video file. Its rendering model is designed to produce the same frames from the same code and inputs. To keep the output consistent, avoid unpredictable side effects and use frame-based animation. The Remotion video skill guidance also warns that browser CSS transitions may not work as intended when rendering frame by frame.
Use the browser-based Remotion Player to preview a composition before rendering the final video. The project’s resources page lists examples, templates, and integrations you can use to extend a composition.
When Remotion is a good fit
Remotion suits videos that follow the same structure but use different content each time. For example, a year-in-review video can use the same layout for every viewer and insert that person’s data. Marketing clips can use a shared template with different product names, images, or other details. Code defines the template and adds the changing content.
It also suits developers who want animations and video layouts tracked alongside the rest of a codebase. A code change can update the composition, and the same rendering approach can produce another version. Remotion supports coding agents that write or edit video code; its coding-agent documentation explains how coding agents can work with Remotion.
The trade-off is that Remotion requires React knowledge. Someone who is comfortable editing code but unfamiliar with React still has to learn how the composition is structured and how its animation timing works. For a one-off video whose visuals do not need to come from data or code, a code-driven approach adds work that a direct, agent-led explainer workflow avoids.
What to consider before choosing Remotion
Design animations for frame-based rendering. Remotion’s output depends on the composition at each frame, so use frame-based values instead of browser effects that run independently over time. For large renders, check memory use and FFmpeg settings, which control video encoding during export. See Remotion best-practice guidance.
Check licensing before using Remotion for a company or shared commercial work. Remotion’s official site lists a Company License requirement for collaborations and companies with four or more people. It also lists an Automators plan at $0.01 per render with a $100 monthly minimum, and a Creators plan at $25 per seat per month. Confirm the current terms and which plan applies to your use before committing.
A useful decision rule is: choose Remotion when you need code-controlled video production that repeats or varies by input; choose explainroo when you want an AI coding agent to make a narrated explainer or product demo from a description.
Make a narrated explainer with explainroo
explainroo is a free, open-source kit under the MIT license. It works with coding agents that can run shell commands. Supported agents include Claude Code, Codex, Pi, OpenCode, and Gemini CLI. The agent writes script.md, which contains the narration, and scenes.js, which describes the drawings and when they appear. explainroo handles the rendering and produces an MP4 on your computer.
To start, paste this prompt into your coding agent, replacing the bracketed topic with your subject:
Make me a short explainer video about [your topic]. Use explainroo and follow its setup instructions.
The agent sets up explainroo, makes and checks the video, then gives you the MP4 file. It uses Kokoro, an open voice model, to create English narration without an account or API key. Whisper, a speech-recognition model, marks when each word is spoken so scenes can change in time with the narration.
To request a product demo, name the product and provide its website or code location. The agent recreates the product’s screens, including their colors, fonts, and button labels. It then makes a narrated sequence with a pointer that clicks and types. explainroo checks still frames, a contact sheet, text layout, and narration for errors. Settings let you adjust visuals and aspect ratios, as well as pacing. Word-by-word captions appear in tall, square, and 4:5 videos.
The kit runs locally and needs Node.js, FFmpeg, and Chrome or Chromium. Optional AI illustrations cost money per image, and the coding agent is a separate service with its own pricing.
explainroo focuses on narrated explainers and product demos. It does not edit existing camera footage. It also does not create talking avatars or provide a drag-and-drop editor. You describe the video to the coding agent and request changes.
