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. Aproject 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, makingit 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 theconfiguration 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 otherapplications. For instance, if an audio file is being used in the project, AdobeAudition will perceive it as "being used by another application" and refuse tooverride 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 replacementstill 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 officialone. The path will be resolved using Node.js module resolution rules. It shouldlead 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 theuser interface.
• index - Receives a list of all projects as its first argument and createsthe 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 bydefault. You can either pass true or a config object to enable it.

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