The API is a subject to change and may vary drastically in newer versions.
The current documentation is still lacking and will be expanded in the following weeks.
Check out the getting started guide to learn how to use Motion Canvas.
Detailed information on how to authenticate.
- Generate a PAT (Personal Access Token).
- On github.com,
go to
Settings
>Developer settings
>Personal access tokens
. - Click
Generate new token
. - Enter the note for your token, for instance
npm
. - Choose
read:packages
from the available scopes. - Click
Generate token
- Copy the generated token.
- On github.com,
go to
- Log in using npm
- In your terminal, enter the following command:
npm login --scope=@motion-canvas --registry=https://npm.pkg.github.com
- Answer the prompt.
Username
is your GitHub username,Password
is the token you just generated.Email
is your GitHub email address. For instance:> Username: Jacob > Password: ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx > Email: [email protected]
- In your terminal, enter the following command:
The project is maintained as one monorepo containing the following packages:
Name | Description |
---|---|
core |
All logic related to running and rendering animations. |
2d |
The default renderer for 2D motion graphics |
create |
A package for bootstrapping new projects. |
docs |
Our documentation website. |
e2e |
End-to-end tests. |
examples |
Animation examples used in documentation. |
player |
A custom element for displaying animations in a browser. |
template |
A template project included for developer's convenience. |
ui |
The user interface used for editing. |
vite-plugin |
A plugin for Vite used for developing and bundling animations. |
After cloning the repo, run npm install
in the root of the project to install
all necessary dependencies.
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 template:serve
.
If you want to develop the UI, first build the template project by running:
template:build
. Next, start ui:serve
.
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.