https://motioncanvas.io/assets/js/30d27832.c3987f6a.js

1var _____WB$wombat$assign$function_____=function(name){return (globalThis._wb_wombat && globalThis._wb_wombat.local_init && globalThis._wb_wombat.local_init(name))||globalThis[name];};if(!globalThis.__WB_pmw){globalThis.__WB_pmw=function(obj){this.__WB_source=obj;return this;}}{
2let window = _____WB$wombat$assign$function_____("window");
3let self = _____WB$wombat$assign$function_____("self");
4let document = _____WB$wombat$assign$function_____("document");
5let location = _____WB$wombat$assign$function_____("location");
6let top = _____WB$wombat$assign$function_____("top");
7let parent = _____WB$wombat$assign$function_____("parent");
8let frames = _____WB$wombat$assign$function_____("frames");
9let opener = _____WB$wombat$assign$function_____("opener");
10"use strict";(self.webpackChunk_motion_canvas_docs=self.webpackChunk_motion_canvas_docs||[]).push([[3650],{876:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>m});var i=n(2784);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,i,o=function(e,t){if(null==e)return{};var n,i,o={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=i.createContext({}),p=function(e){var t=i.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},u=function(e){var t=p(e.components);return i.createElement(s.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},f=i.forwardRef((function(e,t){var n=e.components,o=e.mdxType,r=e.originalType,s=e.parentName,u=l(e,["components","mdxType","originalType","parentName"]),c=p(n),f=o,m=c["".concat(s,".").concat(f)]||c[f]||d[f]||r;return n?i.createElement(m,a(a({ref:t},u),{},{components:n})):i.createElement(m,a({ref:t},u))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=n.length,a=new Array(r);a[0]=f;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:o,a[1]=l;for(var p=2;p<r;p++)a[p]=n[p];return i.createElement.apply(null,a)}return i.createElement.apply(null,n)}f.displayName="MDXCreateElement"},8285:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>s,contentTitle:()=>a,default:()=>c,frontMatter:()=>r,metadata:()=>l,toc:()=>p});var i=n(7896),o=(n(2784),n(876));const r={sidebar_position:16,slug:"/configuration"},a="Configuration",l={unversionedId:"getting-started/configuration",id:"getting-started/configuration",title:"Configuration",description:"Motion Canvas is configured in the Vite's configuration file:",source:"@site/docs/getting-started/configuration.mdx",sourceDirName:"getting-started",slug:"/configuration",permalink:"/docs/configuration",draft:!1,editUrl:"http://web.archive.org/web/20230315084657/https://github.com/motion-canvas/motion-canvas/blob/main/packages/docs/docs/getting-started/configuration.mdx",tags:[],version:"current",lastUpdatedBy:"Jacob",sidebarPosition:16,frontMatter:{sidebar_position:16,slug:"/configuration"},sidebar:"docs",previous:{title:"Presentation",permalink:"/docs/presentation"},next:{title:"Components",permalink:"/docs/category/components"}},s={},p=[{value:"<code>project</code>",id:"project",level:3},{value:"<code>output</code>

10",id:"output",level:3},{value:"<code>bufferedAssets</code>",id:"bufferedassets",level:3},{value:"<code>editor</code>",id:"editor",level:3},{value:"<code>proxy</code>",id:"proxy",level:3}],u={toc:p};function c(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,i.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"configuration"},"Configuration"),(0,o.kt)("p",null,"Motion Canvas is configured in the Vite's configuration file:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts",metastring:'title="vite.config.ts"',title:'"vite.config.ts"'},"import {defineConfig} from 'vite';\nimport motionCanvas from '@motion-canvas/vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    motionCanvas({\n      // custom options\n    }),\n  ],\n});\n")),(0,o.kt)("h3",{id:"project"},(0,o.kt)("inlineCode",{parentName:"h3"},"project")),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Type: ",(0,o.kt)("inlineCode",{parentName:"li"},"string | string[]")),(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"./src/project.ts"))),(0,o.kt)("p",null,"The import path of the project file, relative to the configuration file. A\nproject file must contain a default export with an instance of the ",(0,o.kt)("inlineCode",{parentName:"p"},"Project"),"\nclass."),(0,o.kt)("p",null,"When set to an array, the Editor will display a project selection screen, making\nit possible to change the project without restarting Vite."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"motionCanvas({\n  project: [\n    // highlight-start\n    './src/firstProject.ts',\n    './src/secondProject.ts',\n  ],\n});\n")),(0,o.kt)("h3",{id:"output"},(0,o.kt)("inlineCode",{parentName:"h3"},"output")),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Type: ",(0,o.kt)("inlineCode",{parentName:"li"},"string")),(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"./output"))),(0,o.kt)("p",null,"An output path to which the animation will be saved. Relative to the\nconfiguration file."),(0,o.kt)("p",null,"When rendering, the complete path has the following format:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre"},"[output]/[projectName]/[frameNumber].[extension]\n")),(0,o.kt)("p",null,"Stills are saved to a ",(0,o.kt)("inlineCode",{parentName:"p"},"still")," subdirectory:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre"},"[output]/still/[projectName]/[frameNumber].[extension]\n")),(0,o.kt)("h3",{id:"bufferedassets"},(0,o.kt)("inlineCode",{parentName:"h3"},"bufferedAssets")),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Type: RegExp | false"),(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"/\\.(wav|ogg)$/"))),(0,o.kt)("p",null,"Defines which assets should be buffered before being sent to the browser."),(0,o.kt)("p",null,'Streaming larger assets directly from the drive may cause issues with other\napplications. For instance, if an audio file is being used in the project, Adobe\nAudition will perceive it as "being used by another application" and refuse to\noverride it.'),(0,o.kt)("p",null,"Buffered assets are first loaded to the memory and then streamed from there.\nThis leaves the original files open for modification with hot module replacement\nstill working."),(0,o.kt)("h3",{id:"editor"},(0,o.kt)("inlineCode",{parentName:"h3"},"editor")),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Type: ",(0,o.kt)("inlineCode",{parentName:"li"},"string")),(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"@motion-canvas/ui"))),(0,o.kt)("p",null,"The import path of the editor package."),(0,o.kt)("p",null,"This option can be used to develop/use an editor different than the official\none. The path will be resolved using Node.js module resolution rules. It should\nlead to a directory containing the following files:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"editor.html")," - The HTML template for the editor."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"styles.css")," - The editor styles."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"main.js")," - A module exporting necessary factory functions.")),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"main.js")," should export the following functions:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"editor")," - Receives the project factory as its first argument and creates the\nuser interface."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"index")," - Receives a list of all projects as its first argument and creates\nthe initial page for selecting a project.")),(0,o.kt)("h3",{id:"proxy"},(0,o.kt)("inlineCode",{parentName:"h3"},"proxy")),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},"Type: ",(0,o.kt)("inlineCode",{parentName:"li"},"boolean | MotionCanvasCorsProxyOptions")),(0,o.kt)("li",{parentName:"ul"},"Default: ",(0,o.kt)("inlineCode",{parentName:"li"},"false"))),(0,o.kt)("p",null,"The configuration of the Proxy used for remote sources."),(0,o.kt)("p",null,"This passes configuration to Motion Canvas' proxy. The proxy is disabled by\ndefault. You can either pass ",(0,o.kt)("inlineCode",{parentName:"p"},"true")," or a config object to enable it."),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"allowedMimeTypes?: string[]")," - Set which types of resources are allowed by\ndefault. Catchall on the right side is supported. Pass an empty Array to allow\nall types of resources, although this is not recommended. Defaults to\n",(0,o.kt)("inlineCode",{parentName:"li"},'["image/*", "video/*"]'),"."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"allowListHosts?: string[]")," - Set which hosts are allowed Note that the host\nis everything to the left of the first ",(0,o.kt)("inlineCode",{parentName:"li"},"/"),", and to the right of the protocol\n",(0,o.kt)("inlineCode",{parentName:"li"},"https://"),". AllowList is not used by default, although you should consider\nsett

10ing up just the relevant hosts.")))}c.isMDXComponent=!0}}]);