Motion Canvas lets you build vector animations for an explainer video and preview them as you work. It pairs a TypeScript library for writing animation sequences with an editor that shows a real-time preview. TypeScript is JavaScript with added syntax for describing data types; a generator is a function that can pause and continue, which Motion Canvas uses to organize animation.
Use Motion Canvas if you want direct control over how scenes move and change and are comfortable working in code. For a more agent-led route to narrated explainer videos and product demos, explainroo is a free, open-source alternative: you describe the video to an AI coding agent, which creates it on your computer.
How Motion Canvas works
In Motion Canvas, you write code that defines what appears on screen and how it moves over time. This is an imperative approach: you describe actions and their order in code. In a keyframe-based editor, you set visual states at specific points in time, and the software fills in the movement between them. Functions let you reuse animation logic, and loops let you repeat actions.
The Motion Canvas documentation describes the project as a tool for informative vector animations that can be synchronized with voice-over. Vector graphics are shapes and lines drawn from mathematical descriptions, so they remain crisp when resized. The editor provides a live preview and gives you access to some animation settings without extra code editing.
Motion Canvas is free and open source. Its editor runs through a browser, while Node.js runs the development environment. The project’s GitHub repository contains the library and related project packages.
Start a Motion Canvas project
The documented setup uses npm, a package manager for JavaScript tools and project dependencies. In a terminal, create a project, install its dependencies, and start the editor:
npm init @motion-canvas/latest
npm install
npm startThe setup command comes from a Motion Canvas walkthrough. Check the current official documentation for prerequisites and setup details before starting, since the precise requirements depend on the project version.
Once the editor opens, use the preview to inspect the animation while you work. A practical first project might animate a diagram: introduce a label, draw a connector, then move an icon along the connector as the narration explains the relationship. Keep the scene focused on one idea at a time, and make changes in code when you need control over repeated or precisely sequenced motion.
Plan the render before animating
Motion Canvas rendering settings include the background, output range, resolution, and frame rate. They also include scale, color space, audio offset, and the exporter. An exporter writes the finished animation to a file. Motion Canvas includes exporters for image sequences and video through FFmpeg, a tool for encoding and processing video.
Choose the output resolution before laying out the animation. Motion Canvas animations do not automatically scale when you change resolution, so a layout that works at one size may need adjustment at another. If you add narration or other audio, you can configure an audio offset to shift its timing; that setting is available only when audio is set up for the project. Render time depends on the exporter and how much frame processing it does, as the rendering documentation explains.
When explainroo is the better fit
Choose Motion Canvas if you want to write animation behavior directly in TypeScript and refine it using the editor’s preview. Choose explainroo if you want a coding agent to assemble a narrated video from a topic or product description. The agent writes the scene code, and explainroo handles narration, timing, rendering, and checks.
To try explainroo, give a coding agent that can run shell commands this prompt, replacing the bracketed topic:
Make me a short explainer video about [your topic]. Use explainroo for it: clone explainroo, read its AGENTS.md and follow the steps.
explainroo works with Claude Code, Codex, Pi, OpenCode, Gemini CLI, and other coding agents that can run shell commands. The agent writes script.md for the spoken words and scenes.js for the drawings. The agent then sets up explainroo and creates the video. It checks the video before returning an MP4 file. The explainroo documentation describes the workflow, and example videos show its output.
For narration, explainroo uses Kokoro, an open voice model with natural American and British English voices. Whisper marks when each word is spoken in the generated recording, so scene elements can appear in sync with specific words. Chrome draws frames on an HTML canvas. The tool can add hand-drawn-looking lines with Rough.js, Lucide icons, charts, code, or screenshots. It also creates background music and sound effects, lowers the music while the narration plays, and uses FFmpeg to assemble the MP4.
Because a coding agent cannot watch the finished video, explainroo provides checks. It provides scene stills and a contact sheet, checks whether text is cut off or overlapping, and checks whether the voice misread words. You can choose among five visual looks in video.json, set the video format, and adjust the pace. Tall, portrait, and square formats include word-by-word captions. For a product demo, tell the agent which product to show and provide its code or website; it rebuilds the screens and depicts pointer clicks and typing while the narration explains them.
explainroo is released under the MIT license and costs nothing per video for its core features. Optional AI illustrations through OpenRouter are paid per image, and the coding agent is a separate service with its own pricing. To run it yourself, install recent Node.js, FFmpeg, and Chrome or Chromium. The first setup downloads the voice and timing models. The project was developed and tested on Linux, with less testing on macOS and Windows. explainroo does not edit existing camera footage or create talking avatars or live-action AI footage, and it has no drag-and-drop editor. You ask the coding agent for changes instead. Try explainroo if that agent-led approach matches your project.
