A Motion Canvas Monorepo for Presentations

To start off, I’m going to be using pnpm for this due to its workspace feature. There are other ways to do this, but pnpm has been my favorite so far and it seems to work for what I’m trying to do here.

If you do not already have pnpm installed, but already have Node installed you can run the following command to install pnpm:

corepack enable

Now make a folder and initialize a new project:

mkdir my-animation
pnpm init

I’m going to create two outputs; one to just play the animation, and one to play the animation as a presentation. That needs to be in a separate project in order to build the animation properly, so I’m going to add a folder for it:

mkdir web

And create a new animation in the animations folder. I found I didn’t need the ffmpeg exporter for what I was doing, but you can use what you please:

npm create @motion-canvas@latest -- --name animations --path ./animations --language ts
cd animations
pnpm i

I’m going to add both to my pnpm workspace so that they can resolve each other:

1
packages:
2
  - "./animations"
3
  - "./web"

Now I’m going to add some animations and projects to my animations project:

cd animations/src/scenes
touch circle.tsx
touch square.tsx
cd ..
touch circle-project.tsx
touch square-project.tsx

Next I’ll add a dependency on glob so that I can resolve all of the projects at once in the animations’ vite.config.ts:

pnpm i -S glob

Then I’ll make some changes to the vite.config.ts to automatically find all of the projects in the src/projects folder. Each one will need to contain their own project.:

1
import { defineConfig } from "vite";
2
import motionCanvas from "@motion-canvas/vite-plugin";
3
import { globSync } from "glob";
4

5
export default defineConfig({
6
  plugins: [
7
    motionCanvas({
8
      project: globSync("./src/*project.ts"),
9
    }),
10
  ],
11
});