# Motion Canvas: code-driven vector animation for voice-over explainers

> Motion Canvas pairs a TypeScript generator API with a Vite-powered editor and live preview. It suits engineers who need precise, syncable vector motion graphics, and it is a poor fit for anyone who wants a timeline or a GUI-first workflow.

**motion-canvas/motion-canvas** — Visualize Your Ideas With Code

- Repository: https://github.com/motion-canvas/motion-canvas
- Website: https://motion-canvas.io
- Stars: 19,210 · Forks: 829
- Language: TypeScript
- License: MIT
- Published: 2026-09-21 · Updated: 2026-09-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/motion-canvas-motion-canvas

## The problem Motion Canvas solves: animation that has to match a script

Most animation tools assume the visual comes first and the sound is fitted to it. Motion Canvas assumes the opposite. The README states it is "a specialized tool designed to create informative vector animations and synchronize them with voice-overs." That single sentence explains most of the design. If you are producing technical explainers where a narrator says "and then the request hits the queue" at a fixed moment, you need the queue graphic to move at that moment, and you need to change it later without dragging keyframes around.

It is also a tool for people who are already comfortable in an editor. The animation is written in TypeScript, so the same version control, review and refactoring habits apply. A scene is a file, a change is a diff, and a repeated motion is a function you call. That is a different proposition from a graphical tool where the project file is a binary blob. The audience is narrow and clearly defined: developers and technical educators producing vector graphics, not general motion designers.

## Generators, the Vite plugin and the real-time preview

The README describes Motion Canvas as two things: "A TypeScript library that uses generators to program animations" and "An editor providing a real-time preview of said animations." The generator part is the mechanism worth understanding. Instead of declaring a start state and an end state and letting a curve interpolate, you write a generator function that yields at each step of the animation. Each yield hands control back to the runtime, which advances the clock and resumes the function. Timing becomes sequential code, so waiting for one movement to finish before starting the next is just the order of statements.

The repository layout shows how the pieces separate. The monorepo holds packages named `core`, `2d`, `ui`, `player`, `vite-plugin`, `create`, `template`, `docs`, `e2e`, `examples` and `internal`. The README's table describes `core` as "All logic related to running and rendering animations", `2d` as "The default renderer for 2D motion graphics", `ui` as "The user interface used for editing", and `vite-plugin` as "A plugin for Vite used for developing and bundling animations." So the editor is not a separate application binary. It is a Vite dev server with a plugin and a UI package layered on top, which is why the workflow feels like a web project rather than a desktop app.

The `player` package is a separate concern: the README calls it "A custom element for displaying animations in a browser." That is the piece you would embed if the animation has to live inside a page rather than be exported as a file.

## Installing Motion Canvas and rendering a first scene

The README does not contain install steps. It points to the getting started guide at motion-canvas.io/docs/quickstart and says "Check out our getting started guide to learn how to use Motion Canvas." The repository does contain a `create` package, described in the README table as "A package for bootstrapping new projects", which is the documented route to a fresh project. The safest sequence is to follow the quickstart page, since the README does not pin a command or a version.

If you want to work from the monorepo instead, the README gives the local development path. After cloning, it says to run `npm install` at the root and then build every package:

```bash
npm install
npx lerna run build
```

For editor work specifically, the README gives one command and explains what it does: it "will start a vite server that watches the `core`, `2d`, `ui`, and `vite-plugin` packages." The `template` package holds a small project you can open in the browser.

```bash
npm run template:dev
```

There is also a documented way to point an existing project at a local checkout, which matters if you fork the library. The README shows replacing a published version with a `file:` path in `package.json`:

```diff
  "dependencies": {
-   "@motion-canvas/core": "^3.11.0",
+   "@motion-canvas/core": "file:../motion-canvas/packages/core",
  },
```

If the linked package is `ui`, the README says Vite also needs permission to read files outside the project root, because "the editor styles are loaded using the `/@fs/` prefix". The fix is a `vite.config.ts` change:

```ts
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';

export default defineConfig({
  server: {
    fs: {
      strict: false,
    },
  },
  plugins: [motionCanvas()],
});
```

After that, `npm install` applies the link. What you should see when the dev server starts is the editor with a live preview of the template scene. The README is explicit that the editor also "allows you to edit certain aspects of the animation which could otherwise be tedious", but it does not enumerate which aspects those are.

## Where Motion Canvas gets in the way

The sharpest limitation is the one the README states as a feature. Motion Canvas is "a specialized tool". Specialization cuts both ways, and the README never claims to be a general animation package.

The renderer is the clearest boundary. The `2d` package is described as "The default renderer for 2D motion graphics", and no other renderer appears in the package table. Anyone searching for a 3D workflow will not find one documented here. If your explainer needs a rotating camera or a perspective scene, this is the wrong tool, and no amount of TypeScript will change that.

The second limitation is the editor's role. It provides "a real-time preview" and lets you edit "certain aspects". It is not described as a timeline editor, a layer panel, or a keyframe tool. A designer who expects to drag elements on a canvas and scrub through time will find the workflow inverted: the source of truth is a TypeScript file, and the editor is a window onto it. That is a genuine cost for teams with mixed skills.

The third gap is documentation of the output path. The README explains local development, linking packages and the player element, but it does not document a render or export command, nor does it describe rollback or versioning behaviour for a finished animation. The quickstart guide is where the README sends you for actual usage, so treat the README as a map of the codebase rather than a manual.

## Motion Canvas compared with Manim and Remotion

Two comparisons come up repeatedly in search data, and they are genuinely different tools rather than interchangeable ones.

Manim is the Python route to the same destination. Both target precise, code-authored vector animation for explainers, and both make you think in program structure rather than in keyframes. The difference is the ecosystem you are buying into. Motion Canvas is TypeScript, runs on Vite, and ships an editor with a live preview as part of the project; its packages are published on npm and the repository is a Lerna monorepo. Choosing between them is mostly a question of which language your team already writes and whether you want the preview editor in the same tool.

Remotion takes a different architectural position. It is also TypeScript, but the mental model is React components rendered frame by frame rather than generator functions yielding over time. The practical consequence is that Remotion's abstractions are the ones a React developer already knows, while Motion Canvas's are its own generator-based timing model. The README does not compare the two, so the honest answer is that the difference is the programming model, not a feature checklist.

A third option worth naming is simply a conventional motion tool with a timeline. It is the right answer when the person authoring the animation is not a programmer, and no amount of library design fixes that.

## Maintenance, licence and the cost of upgrading

The repository is not archived, and the last push was on 2026-07-02. The most recent release listed is v3.18.0-alpha.0 from 2025-02-16, which is a pre-release, and the last stable entry is v3.17.2 from 2024-12-14. That combination is worth reading carefully: commits are still landing, but the newest published tag is an alpha and the stable line has not moved since December 2024. Anyone planning to build on this should check which line they are installing rather than assuming the alpha is the default.

The upgrade cost is structural. Motion Canvas is published under the `@motion-canvas` scope, and the README's own example shows a dependency pinned as `"@motion-canvas/core": "^3.11.0"`. Because the animation is code, a breaking change in the API surfaces as TypeScript compile errors rather than as a silently different render, which is a real advantage over binary project files. It also means an upgrade is a code change you have to make deliberately, and the monorepo's internal packages (`core`, `2d`, `ui`, `vite-plugin`) move together, so partial upgrades are not the intended path.

The licence is MIT, which is permissive and places few obligations on how you distribute the output. That is a statement about the licence text, not legal advice; if your organisation has policies about dependency licences, route it through the people who own that policy.

## Conclusion

Adopt Motion Canvas if your team already writes TypeScript, your output is vector explainer content, and you want animation timing expressed as code that can be reviewed and diffed. Do not adopt it if you need a scrubbable timeline, a 3D scene graph, or a non-developer to author scenes, because the README describes only 2D rendering and the editor is a preview tool rather than a full authoring suite. Before committing, verify two things yourself: that the current npm release line matches the API in the quickstart guide, and how your target format is exported, since the README does not document an export or render command.

## FAQ

### What is Motion Canvas?

It is a TypeScript library that uses generators to program animations, plus an editor that gives a real-time preview of them. The README describes it as a specialized tool for informative vector animations synchronized with voice-overs.

### Is Motion Canvas free?

The repository is licensed under MIT, which is a permissive open source licence. The README does not mention a paid tier or a hosted service.

### How do I install Motion Canvas?

The README does not give install steps; it sends readers to the getting started guide at motion-canvas.io/docs/quickstart. The monorepo contains a `create` package described as a package for bootstrapping new projects, which is the documented starting point.

### What are the key differences between Motion Canvas and Remotion?

Both are TypeScript, but Motion Canvas programs animations with generator functions and ships an editor with a live preview, while Remotion's model is React components rendered frame by frame. The Motion Canvas README does not compare the two directly.

### How do I use Motion Canvas?

The README directs readers to the getting started guide at motion-canvas.io/docs/quickstart. For local work, the README says to run `npm install` at the repository root and then `npx lerna run build`, and `npm run template:dev` starts the editor with the template project.

## Sources

- [License: MIT](https://github.com/motion-canvas/motion-canvas/blob/main/LICENSE)
- [motion-canvas/motion-canvas on GitHub](https://github.com/motion-canvas/motion-canvas)
- [Project website](https://motion-canvas.io)
- [README](https://github.com/motion-canvas/motion-canvas/blob/main/README.md)
- [Releases](https://github.com/motion-canvas/motion-canvas/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/motion-canvas-motion-canvas