https://motioncanvas.io/assets/js/1df93b7f.4b437dc5.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([[3237],{8180:(e,t,l)=>{l.d(t,{Z:()=>i});var n,a=l(2784);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n])}return e},o.apply(this,arguments)}const i=e=>{let{title:t,titleId:l,...i}=e;return a.createElement("svg",o({viewBox:"0 0 640 360",xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",style:{fillRule:"evenodd",clipRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:1.5},"aria-labelledby":l},i),t?a.createElement("title",{id:l},t):null,a.createElement("path",{style:{fill:"none"},d:"M0 0h640v360H0z"}),a.createElement("path",{style:{fill:"#181818"},d:"M0 0h640v360H0z"}),a.createElement("path",{style:{fill:"#242424"},d:"M79 78h561v282H79z"}),a.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M307 12h24v24h-24z"}),a.createElement("path",{d:"M315 17v14l11-7-11-7Z",style:{fill:"#959595",fillRule:"nonzero"}}),a.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M343 12h24v24h-24z"}),a.createElement("path",{d:"m349 30 8.5-6-8.5-6v12Zm10-12v12h2V18h-2Z",style:{fill:"#959595",fillRule:"nonzero"}}),a.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M271 12h24v24h-24z"}),a.createElement("path",{d:"M277 18h2v12h-2V18Zm3.5 6 8.5 6V18l-8.5 6Z",style:{fill:"#959595",fillRule:"nonzero"}}),a.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M379 12h24v24h-24z"}),a.createElement("path",{d:"M386 19h10v3l4-4-4-4v3h-12v6h2v-4Zm10 10h-10v-3l-4 4 4 4v-3h12v-6h-2v4Z",style:{fill:"#959595",fillRule:"nonzero"}}),a.createElement("path",{style:{fill:"none",fillRule:"nonzero"},d:"M235 12h24v24h-24z"}),a.createElement("path",{d:"M238 21v6h4l5 5V16l-5 5h-4Zm13.5 3a4.5 4.5 0 0 0-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02Zm-2.5-8.77v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77 0-4.28-2.99-7.86-7-8.77Z",style:{fill:"#959595",fillRule:"nonzero"}}),a.createElement("path",{d:"M271 78v282M463 78v282",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),a.createElement("path",{d:"M295 78v282M487 78v282M199 78v282",style:{fill:"none",stroke:"#202020",strokeWidth:2}}),a.createElement("path",{d:"M415 78v282M607 78v282M175 78v282",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),a.createElement("path",{d:"M439 78v282M631 78v282",style:{fill:"none",stroke:"#202020",strokeWidth:2}}),a.createElement("path",{d:"M223 78v282M367 78v282M559 78v282M127 78v282",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),a.createElement("path",{d:"M391 78v282M583 78v282M151 78v282",style:{fill:"none",stroke:"#202020",strokeWidth:2}}),a.createElement("path",{d:"M319 78v282M511 78v282M79 78v282M31 78v282M640 48H0",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),a.createElement("path",{d:"M343 78v282M535 78v282M103 78v282M55 78v282M7 78v282",style:{fill:"none",stroke:"#202020",strokeWidth:2}}),a.createElement("path",{d:"M640 78H0",style:{fill:"none",stroke:"#1d1d1d",strokeWidth:2}}),a.createElement("path",{d:"M308.534 144c0-6.627-5.372-12-12-12H175.466c-6.628 0-12 5.373-12 12s5.372 12 12 12h121.068c6.628 0 12-5.373 12-12Z",style:{fill:"#274358"}}),a.createElement("path",{d:"M637 88a3.995 3.995 0 0 0-1.172-2.828A3.995 3.995 0 0 0 633 84H89a3.995 3.995 0 0 0-2.828 1.172A3.995 3.995 0 0 0 85 88v34c0 1.061.421 2.078 1.172 2.828A3.995 3.995 0 0 0 89 126h544a3.995 3.995 0 0 0 2.828-1.172A3.995 3.995 0 0 0 637 122V88Z",style:{fill:"#444"}}),a.createElement("text",{x:103,y:109.11,style:{fontFamily:"'JetBrainsMono-Regular','JetBrains Mono',monospace",fontSize:14,fill:"#fff",fillOpacity:.6}},"scene"),n||(n=a.createElement("path",{d:"M740 48H83c-2.208 0-4 1.792-4 4v22c0 2.208 1.792 4 4 4h557",fill:"#242424",stroke:"#444",strokeWidth:2})),a.createElement("g",null,a.createElement("path",{d:"M407 144c0-6.627-5.373-12-12-12H281c-6.627 0-12 5.373-12 12s5.373 12 12 12h114c6.627 0 12-5.373 12-12Z",style:{fill:"#274358"}}),a.createElement("path",{d:"M431 144c0-6.627-5.373-12-12-12h-48v12

10c0 3.183 1.264 6.235 3.515 8.485A11.996 11.996 0 0 0 383 156h36c6.627 0 12-5.373 12-12Z",style:{fill:"#33a6ff"}}),a.createElement("path",{d:"M431 144c0 6.627-5.373 12-12 12h-36a11.996 11.996 0 0 1-8.485-3.515A11.996 11.996 0 0 1 371 144v-12h48c6.627 0 12 5.373 12 12Zm-2 0c0-5.523-4.477-10-10-10h-46v10a10.001 10.001 0 0 0 10 10h36c5.523 0 10-4.477 10-10Z",style:{fill:"#fff"}}),a.createElement("text",{x:380,y:148.11,style:{fontFamily:"'JetBrainsMono-Regular','JetBrains Mono',monospace",fontSize:14,fillOpacity:.87}},"event"),a.createElement("path",{style:{fill:"none"},d:"M423 152h24v24h-24z"}),a.createElement("path",{d:"M446 157.5V172c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19l-7.85-7.98s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V156c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v7h1v-9.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v9.5h1v-8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v8.5h1v-5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5Z",style:{fill:"#fff",fillRule:"nonzero"}})),a.createElement("path",{d:"M79 210h126l2-4 2 14 2-22 2 26 2-30 2 34 2-44 2 40 2-40 2 54 2-62 2 54 2-38 2 38 2-42 2 38 2-30 2 26 2-20 2 14 2-12 2 10 2-12 2 18 2-16 2 10 2-6 2 2h16l2-4 2 8 2-10 2 18 2-30 2 36 2-40 2 42 2-50 2 54 2-52 2 58 2-54 2 50 2-44 2 40 2-42 2 38.091L315 184l2 46 2-50 2 52 2-50 2 52 2-46 2 42 2-32 2 28 2-26 2 20 2-16 2 20 2-24 2 30 2-36 2 40 2-48 2 50 2-44 2 36 2-30 2.415 24L363 204l2 14 2-20 2 26 2-22 2 16 2-10 2 2h262",style:{fill:"none",stroke:"#444",strokeWidth:2,strokeLinecap:"square"}}),a.createElement("text",{x:215.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"30"),a.createElement("text",{x:167.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"30"),a.createElement("text",{x:119.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"10"),a.createElement("text",{x:75.4,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"0"),a.createElement("text",{x:263.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"40"),a.createElement("text",{x:311.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"50"),a.createElement("text",{x:455.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"80"),a.createElement("text",{x:407.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"70"),a.createElement("text",{x:548.2,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"100"),a.createElement("text",{x:359.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"60"),a.createElement("text",{x:503.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"90"),a.createElement("text",{x:596.2,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"110"),a.createElement("text",{x:20.2,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#959595"}},"-10"),a.createElement("path",{d:"M259 58a3.995 3.995 0 0 0-1.172-2.828A3.995 3.995 0 0 0 255 54h-16a3.995 3.995 0 0 0-2.828 1.172A3.995 3.995 0 0 0 235 58v10c0 1.061.421 2.078 1.172 2.828A3.995 3.995 0 0 0 239 72h16a3.995 3.995 0 0 0 2.828-1.172A3.995 3.995 0 0 0 259 68V58Z",style:{fill:"#32a1f6"}}),a.createElement("text",{x:239.8,y:67.38,style:{fontFamily:"'JetBrainsMono-Bold','JetBrains Mono',monospace",fontWeight:700,fontSize:12,fill:"#fff"}},"35"),a.createElement("path",{d:"M247 72v288",style:{fill:"none",stroke:"#32a1f6",strokeWidth:2}}))}},1074:(e,t,l)=>{l.d(t,{Z:()=>o});var n=l(2784);const a="root__2So";function o(e){let{src:t,width:l,height:o,title:i}=e;return n.createElement("iframe",{className:a,width:l??560,height:o??315,src:t,loading:"lazy",title:i??"YouTube video player",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0})}},8041:(e,t,l)=>{l.r(t),l.d(t,{default:()=>B});var n=l(2784),a=l(7614),o=l(7844),i=l(6277);const r="title_NqGg",c="mobile_Pepa",s="banner_MNUK",m="buttons_QzIi",f="features_ZjNC",h="feature_vtlg",d="preview_mrMv";var u=l(9817);function y(){return n.createElement(n.Fragment,null,n.createElement("header",{className:s},n.createElement("h1",{className:r},"Visualize Complex",n.createElement("br",null),"Ideas ",n.createElement("b",null,"Programmatically")),n.createElement("h1",{className:(0,i.Z)(r,c)},"Visualize",n.createElement("br",null),"Complex Ideas",n.createElement("br",null),n.createElement("b",null,"Programmatically")),n.createElement("div",{className:m},n.createElement(u.Z,{className:"button button--primary button--lg",to:"/docs"},"Get Started"),n.createElement("a",{className:"button button--outline button--lg",href:"http://web.archive.org/web/20230310200529/https://github.com/motion-canvas/motion-canvas/blob/main/CONTRIBUTING.md",target:"_blank"}

10,"Contribute"))))}var p=l(8128),v=l(1074),E=l(8180);function M(e){let{content:t,children:l}=e;return n.createElement("div",{className:(0,i.Z)(h,"row")},n.createElement("div",{className:"col col--6 col--offset-1"},n.createElement("div",{className:d},t)),n.createElement("div",{className:"col col--4 padding-top--lg"},l))}function g(){return n.createElement("section",{className:f},n.createElement("div",{className:"container"},n.createElement(M,{content:n.createElement(E.Z,null)},n.createElement("h3",null,"Best of ",n.createElement("b",null,"Both")," Worlds"),n.createElement("p",null,"Some things are easier with a mouse. Write animations in TypeScript with your favorite IDE; Use a web-based editor to sync them with audio."),n.createElement("p",null,"Powered by"," ",n.createElement("a",{href:"http://web.archive.org/web/20230310200529/https://vitejs.dev/",target:"_blank"},"Vite"),", a real-time preview of your animation automatically updates upon any changes."),n.createElement("p",null,n.createElement("a",{className:"button button--outline button--lg",href:"/editor/quickstart",target:"_blank"},"Try the Editor"))),n.createElement(M,{content:n.createElement(p.Z,{language:"tsx"},"export makeScene(function* (view) {\n  const circle = createRef<Circle>();\n  view.add(\n    <Circle \n      ref={circle} \n      width={320} \n      height={320} \n      fill={'blue'} \n    />\n  );\n  \n  yield* circle().scale(2, 0.3);\n  yield* waitUntil('event');\n  yield* all(\n    circle().scale(1, 0.3),\n    circle().position.y(200, 0.3),\n  );\n  yield* circle().fill('green', 0.3);\n});")},n.createElement("h3",null,n.createElement("b",null,"Procedural")," for a Change"),n.createElement("p",null,"Let the execution of your code define the animation. Write generator functions that describe what should happen - step by step."),n.createElement("p",null,"Focus on duration, speed and acceleration instead of hardcoded key frames."),n.createElement("p",null,n.createElement(u.Z,{className:"button button--outline button--lg",to:"/docs/quickstart"},"Learn More"))),n.createElement(M,{content:n.createElement(v.Z,{src:"http://web.archive.org/web/20230310200529/https://www.youtube.com/embed/R6vQ9VmMz2w"})},n.createElement("h3",null,n.createElement("b",null,"Tested")," in Combat"),n.createElement("p",null,"The road ahead is still long, but you can already use Motion Canvas to create production-quality animations."),n.createElement("p",null,n.createElement("a",{className:"button button--outline button--lg",href:"http://web.archive.org/web/20230310200529/https://github.com/motion-canvas/examples",target:"_blank"},"Video Source Code")))))}var b=l(9854);function B(){const{siteConfig:e}=(0,a.Z)();return n.createElement(o.Z,{title:e.title,description:e.tagline},n.createElement(b.Z,null,n.createElement("title",null,e.title," - ",e.tagline),n.createElement("meta",{property:"og:title",content:e.title})),n.createElement(y,null),n.createElement("main",null,n.createElement(g,null)))}}}]);