motion-canvas/motion-canvas

Web-based tool for creating animations programmatically

Summary

Motion Canvas is a TypeScript library and editor pair for creating vector animations programmatically. It uses generator functions to drive animations, and ships with an editor that previews them in real time and exposes edits for tedious properties. It is aimed at informative animations, including those synchronized with voice-overs.

What it is useful for

The tool fits when you want code-defined, vector-based motion graphics rather than timeline-based video editing. Common cases are explanatory animations for technical talks, product walkthroughs, algorithm visualizations, or any presentation where precise, reproducible motion matters. Synchronizing scenes to a voice-over is called out as a documented scenario, and the 2D renderer (packages/2d) is positioned as the default for 2D motion graphics.

The repository is also useful if you want to extend Motion Canvas itself. It is a Lerna-published monorepo whose packages split concerns clearly: core (animation runtime), ui (editor interface), vite-plugin (build integration), player (a custom element for displaying animations in a browser), template (a sample project), examples, create (project scaffolding), docs, e2e, and internal helpers. This lets you work on the editor, runtime, or standalone player independently.

How engineers can use it

For consuming the library, the README points readers at the getting started guide (motion-canvas.io/docs/quickstart) rather than embedding install commands, so follow that for the current bootstrap path. The repo does include a create package for scaffolding projects, but exact commands are not given here.

For running or contributing to the editor locally, the documented flow is:

npm install
npx lerna run build
npm run template:dev

npm run template:dev starts a Vite dev server that watches core, 2d, ui, and vite-plugin, using the template package as a sample project. To work on the browser player instead, build the template first (npm run template:build) and then run npm run player:dev.

A documented pattern for testing local forks is replacing a version string in a consuming project's package.json with a file: path, for example "@motion-canvas/core": "file:../motion-canvas/packages/core". Linking the ui package additionally requires setting server.fs.strict: false in vite.config.ts so Vite can read the external directory.

Scope to keep in mind: Motion Canvas is presented as a specialized 2D vector tool, and export formats or hosting beyond embedding the player element in a browser are not documented in the README.