Skip to main content

Configuration

Motion Canvas is configured in the Vite's configuration file:

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

export default defineConfig({
  plugins: [
    motionCanvas({
      // custom options
    }),
  ],
});

project​

  • Type: string | string[]
  • Default: ./src/project.ts

The import path of the project file, relative to the configuration file. Globs are also supported. A project file must contain a default export with an instance of the Project class.

When set to an array, the Editor will display a project selection screen, making it possible to change the project without restarting Vite.

motionCanvas({
  project: [
    './src/firstProject.ts',
    './src/secondProject.ts',
  ],
});

output​

  • Type: string
  • Default: ./output

An output path to which the animation will be saved. Relative to the configuration file.

When rendering, the complete path has the following format:

[output]/[projectName]/[frameNumber].[extension]

Stills are saved to a still subdirectory:

[output]/still/[projectName]/[frameNumber].[extension]

bufferedAssets​

  • Type: RegExp | false
  • Default: /\.(wav|ogg)$/

Defines which assets should be buffered before being sent to the browser.

Streaming larger assets directly from the drive may cause issues with other applications. For instance, if an audio file is being used in the project, Adobe Audition will perceive it as "being used by another application" and refuse to override it.

Buffered assets are first loaded to the memory and then streamed from there. This leaves the original files open for modification with hot module replacement still working.

editor​

  • Type: string
  • Default: @motion-canvas/ui

The import path of the editor package.

This option can be used to develop/use an editor different than the official one. The path will be resolved using Node.js module resolution rules. It should lead to a directory containing the following files:

  • editor.html - The HTML template for the editor.
  • styles.css - The editor styles.
  • main.js - A module exporting necessary factory functions.

main.js should export the following functions:

  • editor - Receives the project factory as its first argument and creates the user interface.
  • index - Receives a list of all projects as its first argument and creates the initial page for selecting a project.

proxy​

  • Type: boolean | MotionCanvasCorsProxyOptions
  • Default: false

The configuration of the Proxy used for remote sources.

This passes configuration to Motion Canvas' proxy. The proxy is disabled by default. You can either pass true or a config object to enable it.

  • allowedMimeTypes?: string[] - Set which types of resources are allowed by default. Catchall on the right side is supported. Pass an empty Array to allow all types of resources, although this is not recommended. Defaults to ["image/*", "video/*"].
  • allowListHosts?: string[] - Set which hosts are allowed Note that the host is everything to the left of the first /, and to the right of the protocol https://. AllowList is not used by default, although you should consider setting up just the relevant hosts.