Motion Canvas

Visualize Complex Ideas Programmatically


Motion Canvas logo

Motion Canvas

Motion Canvas is two things:

- A TypeScript library that uses generators to program animations.
- An editor providing a real-time preview of said animations.

It's a specialized tool designed to create informative vector animations and
synchronize them with voice-overs.

Aside from providing the preview, the editor allows you to edit certain aspects
of the animation which could otherwise be tedious.

Using Motion Canvas

Check out our [getting started][docs] guide to learn how to use Motion Canvas.

Developing Motion Canvas locally

The project is maintained as one monorepo containing the following packages:


After cloning the repo, run npm install in the root of the project to install
all necessary dependencies. Then run npx lerna run build to build all the

Developing Core & 2D

When developing the core, start both core:watch and template:serve.

This will pick up any changes you make to the core package, automatically
rebuild the template project and refresh the page.

Similarly, when developing the 2D package, start 2d:watch and

Developing UI

If you want to develop the UI, first build the template project by running:
template:build. Next, start ui:serve.

Developing Player

Like with UI, to develop the player, first build the template: template:build.
Then, start player:serve.


Read through our Contribution Guide to learn how you can
help make Motion Canvas better.