PageSourceSearch

https://motioncanvas.io/

html motioncanvas.io collected 2026-10-04 00:24:32 UTC 36,287 bytes, 467 lines download raw bytes

1<!DOCTYPE html>
2<meta charset="utf-8"><meta name="generator" content="Docusaurus v2.3.1"><title data-rh="true">Motion Canvas - Visualize complex ideas programmatically</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://motion-canvas.github.io/img/banner.png"><meta data-rh="true" name="twitter:image" content="https://motion-canvas.github.io/img/banner.png"><meta data-rh="true" property="og:url" content="https://motion-canvas.github.io/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" name="keywords" content="typescript, animation, library"><meta data-rh="true" name="description" content="Visualize complex ideas programmatically"><meta data-rh="true" property="og:description" content="Visualize complex ideas programmatically"><meta data-rh="true" property="og:title" content="Motion Canvas"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="preconnect" href="https://q6z7bj83rf-dsn.algolia.net/" crossorigin="anonymous">
2<script data-rh="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n   <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.\n   <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseurl" style="font-weight: bold;">baseUrl configuration.\n   <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/  (default value)\n   <p>We suggest trying baseUrl = <span id="docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;">\n\n';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script>
2<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Motion Canvas RSS Feed"><link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Motion Canvas Atom Feed"><link rel="search" type="application/opensearchdescription+xml" title="Motion Canvas" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.ac615c4e.css"><link rel="preload" href="/assets/js/runtime~main.87e6562d.js" as="script"><link rel="preload" href="/assets/js/main.2373b22b.js" as="script"><body class="navigation-with-keyboard">
3 
3<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"dark")}()</script>
3
4
5<div id="__docusaurus">
6  <div id="docusaurus-base-url-issue-banner-container"></div>
7  <div role="region" aria-label="Skip to main content">
8    <a class="skipToContent_G6ar" href="#docusaurus_skipToContent_fallback">Skip to main content</a>
9  </div>
10  <nav aria-label="Main" class="navbar navbar--fixed-top">
11    <div class="navbar__inner">
12      <div class="navbar__items">
13        
14        <a class="navbar__brand" href="/">
15          <div class="navbar__logo">
16            <img src="/img/logo.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--light_riBm">
17            <img src="/img/logo_dark.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--dark_Dsi0">
18          </div>
19          <b class="navbar__title text--truncate">Motion Canvas</b>
20        </a>
21        <a class="navbar__item navbar__link" href="/docs/">Docs</a>
22        <a class="navbar__item navbar__link" href="/api/core">API</a>
23        <a class="navbar__item navbar__link" href="/blog">Blog</a>
24      </div>
25      <div class="navbar__items navbar__items--right">
26        
27        <div class="toggle_OLSw colorModeToggle_x44X">
28          
29        </div>
30        <div class="root_TZLv loading_lRyv">
31          <div class="badge_yk5a">
32            <small>
33              <strong></strong>
34               stars
35            </small>
36          </div>
37          
38        </div>
39        <div class="root_TZLv loading_lRyv">
40          <div class="badge_yk5a">
41            <small>
42              <strong></strong>
43               online
44            </small>
45          </div>
46          
47        </div>
48      </div>
49    </div>
50    <div role="presentation" class="navbar-sidebar__backdrop"></div>
51  </nav>
52  <div id="docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_UyTV">
53    <header class="banner_MNUK">
54      <h1 class="title_NqGg">
55        Visualize Complex
56        <br>
57        Ideas 
58        <b>Programmatically</b>
59      </h1>
60      <h1 class="title_NqGg mobile_Pepa">
61        Visualize
62        <br>
63        Complex Ideas
64        <br>
65        <b>Programmatically</b>
66      </h1>
67      <div class="buttons_QzIi">
68        <a class="button button--primary button--lg" href="/docs">Get Started</a>
69        
70      </div>
71    </header>
72    <main>
73      <section class="features_ZjNC">
74        <div class="container">
75          <div class="feature_vtlg row">
76            <div class="col col--6 col--offset-1">
77              <div class="preview_mrMv">
78                <svg viewbox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.5">
79                  <path style="fill:none" d="M0 0h640v360H0z"></path>
80                  <path style="fill:#181818" d="M0 0h640v360H0z"></path>
81                  <path style="fill:#242424" d="M79 78h561v282H79z"></path>
82                  <path style="fill:none;fill-rule:nonzero" d="M307 12h24v24h-24z"></path>
83                  <path d="M315 17v14l11-7-11-7Z" style="fill:#959595;fill-rule:nonzero"></path>
84                  <path style="fill:none;fill-rule:nonzero" d="M343 12h24v24h-24z"></path>
85                  <path d="m349 30 8.5-6-8.5-6v12Zm10-12v12h2V18h-2Z" style="fill:#959595;fill-rule:nonzero"></path>
86                  <path style="fill:none;fill-rule:nonzero" d="M271 12h24v24h-24z"></path>
87                  <path d="M277 18h2v12h-2V18Zm3.5 6 8.5 6V18l-8.5 6Z" style="fill:#959595;fill-rule:nonzero"></path>
88                  <path style="fill:none;fill-rule:nonzero" d="M379 12h24v24h-24z"></path>
89                  <path d="M386 19h10v3l4-4-4-4v3h-12v6h2v-4Zm10 10h-10v-3l-4 4 4 4v-3h12v-6h-2v4Z" style="fill:#959595;fill-rule:nonzero"></path>
90                  <path style="fill:none;fill-rule:nonzero" d="M235 12h24v24h-24z"></path>
91                  <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;fill-rule:nonzero"></path>
92                  <path d="M271 78v282M463 78v282" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path>
93                  <path d="M295 78v282M487 78v282M199 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path>
94                  <path d="M415 78v282M607 78v282M175 78v282" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path>
95                  <path d="M439 78v282M631 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path>
96                  <path d="M223 78v282M367 78v282M559 78v282M127 78v282" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path>
97                  <path d="M391 78v282M583 78v282M151 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path>
98                  <path d="M319 78v282M511 78v282M79 78v282M31 78v282M640 48H0" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path>
99                  <path d="M343 78v282M535 78v282M103 78v282M55 78v282M7 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path>
100                  <path d="M640 78H0" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path>
101                  <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"></path>
102                  <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"></path>
103                  <text x="103" y="109.11" style="font-family:'JetBrainsMono-Regular','JetBrains Mono',monospace;font-size:14px;fill:#fff;fill-opacity:0.6">scene</text>
104                  <path d="M640 48H83c-2.208 0-4 1.792-4 4v22c0 2.208 1.792 4 4 4h557V48Z" style="fill:#1e3a4f"></path>
105                  <path d="M79 73.9v.002A4.098 4.098 0 0 0 83.098 78H640" style="fill:none;stroke:#32a1f6;stroke-width:2"></path>
106                  <g>
107                    <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"></path>
108                    <path d="M431 144c0-6.627-5.373-12-12-12h-48v12
108c0 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"></path>
109                    <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"></path>
110                    <text x="380" y="148.11" style="font-family:'JetBrainsMono-Regular','JetBrains Mono',monospace;font-size:14px;fill-opacity:0.87">event</text>
111                    <path style="fill:none" d="M423 152h24v24h-24z"></path>
112                    <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;fill-rule:nonzero"></path>
113                  </g>
114                  <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;stroke-width:2;stroke-linecap:square"></path>
115                  <text x="215.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">30</text>
116                  <text x="167.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">30</text>
117                  <text x="119.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">10</text>
118                  <text x="75.4" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">0</text>
119                  <text x="263.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">40</text>
120                  <text x="311.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">50</text>
121                  <text x="455.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">80</text>
122                  <text x="407.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">70</text>
123                  <text x="548.2" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">100</text>
124                  <text x="359.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">60</text>
125                  <text x="503.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">90</text>
126                  <text x="596.2" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">110</text>
127                  <text x="20.2" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#959595">-10</text>
128                  <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"></path>
129                  <text x="239.8" y="67.38" style="font-family:'JetBrainsMono-Bold','JetBrains Mono',monospace;font-weight:700;font-size:12px;fill:#fff">35</text>
130                  <path d="M247 72v288" style="fill:none;stroke:#32a1f6;stroke-width:2"></path>
131                </svg>
132              </div>
133            </div>
134            <div class="col col--4 padding-top--lg">
135              <h3>
136                Best of 
137                <b>Both</b>
138                 Worlds
139              </h3>
140              <p>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.</p>
141              <p>
142                Powered by 
143                <a href="https://vitejs.dev/" target="_blank" rel="nofollow">Vite</a>
144                , a real-time preview of your animation automatically updates upon any changes.
145              </p>
146              <p>
147                <a class="button button--outline button--lg" href="/editor/quickstart" target="_blank">Try the Editor</a>
148              </p>
149            </div>
150          </div>
151          <div class="feature_vtlg row">
152            <div class="col col--6 col--offset-1">
153              <div class="preview_mrMv">
154                <div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:#f8f8f8;--prism-background-color:var(--code-background-color)">
155                  <div class="codeBlockContent_qZBB">
156                    <pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar">
157                      <code class="codeBlockLines_AdAo">
158                        <span class="token-line" style="color:#f8f8f8">
159                          <span class="token keyword" style="color:rgb(86, 156, 214)">export</span>
160                          <span class="token plain"></span>
161                          <span class="token function" style="color:rgb(220, 220, 170)">makeScene</span>
162                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
163                          <span class="token keyword" style="color:rgb(86, 156, 214)">function</span>
164                          <span class="token operator" style="color:rgb(212, 212, 212)">*</span>
165                          <span class="token plain"></span>
166                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
167                          <span class="token plain">view</span>
168                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
169                          <span class="token plain"></span>
170                          <span class="token punctuation" style="color:rgb(212, 212, 212)">{</span>
171                          <span class="token plain"></span>
172                          <br>
173                        </span>
174                        <span class="token-line" style="color:#f8f8f8">
175                          <span class="token plain"></span>
176                          <span class="token keyword" style="color:rgb(86, 156, 214)">const</span>
177                          <span class="token plain"> circle </span>
178                          <span class="token operator" style="color:rgb(212, 212, 212)">=</span>
179                          <span class="token plain"></span>
180                          <span class="token generic-function function" style="color:rgb(220, 220, 170)">createRef</span>
181                          <span class="token generic-function generic class-name operator" style="color:rgb(212, 212, 212)"><</span>
182                          <span class="token generic-function generic class-name" style="color:rgb(78, 201, 176)">Circle</span>
183                          <span class="token generic-function generic class-name operator" style="color:rgb(212, 212, 212)">></span>
184                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
185                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
186                          <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span>
187                          <span class="token plain"></span>
188                          <br>
189                        </span>
190                        <span class="token-line" style="color:#f8f8f8">
191                          <span class="token plain">  view</span>
192                          <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span>
193                          <span class="token method function property-access" style="color:rgb(220, 220, 170)">add</span>
194                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
195                          <span class="token plain"></span>
196                          <br>
197                        </span>
198                        <span class="token-line" style="color:#f8f8f8">
199                          <span class="token plain"></span>
200                          <span class="token tag punctuation" style="color:rgb(212, 212, 212)"><</span>
201                          <span class="token tag class-name" style="color:rgb(78, 201, 176)">Circle</span>
202                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
203                          <br>
204                        </span>
205                        <span class="token-line" style="color:#f8f8f8">
206                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
207                          <span class="token tag attr-name" style="color:rgb(156, 220, 254)">ref</span>
208                          <span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span>
209                          <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span>
210                          <span class="token tag script language-javascript" style="color:rgb(78, 201, 176)">circle</span>
211                          <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span>
212                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
213                          <br>
214                        </span>
215                        <span class="token-line" style="color:#f8f8f8">
216                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
217                          <span class="token tag attr-name" style="color:rgb(156, 220, 254)">width</span>
218                          <span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span>
219                          <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span>
220                          <span class="token tag script language-javascript number" style="color:rgb(181, 206, 168)">320</span>
221                          <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span>
222                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
223                          <br>
224                        </span>
225                        <span class="token-line" style="color:#f8f8f8">
226                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
227                          <span class="token tag attr-name" style="color:rgb(156, 220, 254)">height</span>
228                          <span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span>
229                          <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span>
230                          <span class="token tag script language-javascript number" style="color:rgb(181, 206, 168)">320</span>
231                          <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span>
232                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
233                          <br>
234                        </span>
235                        <span class="token-line" style="color:#f8f8f8">
236                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
237                          <span class="token tag attr-name" style="color:rgb(156, 220, 254)">fill</span>
238                          <span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(212, 212, 212)">=</span>
239                          <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">{</span>
240                          <span class="token tag script language-javascript string" style="color:rgb(206, 145, 120)">'blue'</span>
241                          <span class="token tag script language-javascript punctuation" style="color:rgb(212, 212, 212)">}</span>
242                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
243                          <br>
244                        </span>
245                        <span class="token-line" style="color:#f8f8f8">
246                          <span class="token tag" style="color:rgb(78, 201, 176)"></span>
247                          <span class="token tag punctuation" style="color:rgb(212, 212, 212)">/></span>
248                          <span class="token plain"></span>
249                          <br>
250                        </span>
251                        <span class="token-line" style="color:#f8f8f8">
252                          <span class="token plain"></span>
253                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
254                          <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span>
255                          <span class="token plain"></span>
256                          <br>
257                        </span>
258                        <span class="token-line" style="color:#f8f8f8">
259                          <span class="token plain"></span>
260                          <br>
261                        </span>
262                        <span class="token-line" style="color:#f8f8f8">
263                          <span class="token plain"></span>
264                          <span class="token keyword" style="color:rgb(86, 156, 214)">yield</span>
265                          <span class="token operator" style="color:rgb(212, 212, 212)">*</span>
266                          <span class="token plain"></span>
267                          <span class="token function" style="color:rgb(220, 220, 170)">circle</span>
268                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
269                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
270                          <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span>
271                          <span class="token method function property-access" style="color:rgb(220, 220, 170)">scale</span>
272                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
273                          <span class="token number" style="color:rgb(181, 206, 168)">2</span>
274                          <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span>
275                          <span class="token plain"></span>
276                          <span class="token number" style="color:rgb(181, 206, 168)">0.3</span>
277                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
278                          <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span>
279                          <span class="token plain"></span>
280                          <br>
281                        </span>
282                        <span class="token-line" style="color:#f8f8f8">
283                          <span class="token plain"></span>
284                          <span class="token keyword" style="color:rgb(86, 156, 214)">yield</span>
285                          <span class="token operator" style="color:rgb(212, 212, 212)">*</span>
286                          <span class="token plain"></span>
287                          <span class="token function" style="color:rgb(220, 220, 170)">waitUntil</span>
288                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
289                          <span class="token string" style="color:rgb(206, 145, 120)">'event'</span>
290                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
291                          <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span>
292                          <span class="token plain"></span>
293                          <br>
294                        </span>
295                        <span class="token-line" style="color:#f8f8f8">
296                          <span class="token plain"></span>
297                          <span class="token keyword" style="color:rgb(86, 156, 214)">yield</span>
298                          <span class="token operator" style="color:rgb(212, 212, 212)">*</span>
299                          <span class="token plain"></span>
300                          <span class="token function" style="color:rgb(220, 220, 170)">all</span>
301                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
302                          <span class="token plain"></span>
303                          <br>
304                        </span>
305                        <span class="token-line" style="color:#f8f8f8">
306                          <span class="token plain"></span>
307                          <span class="token function" style="color:rgb(220, 220, 170)">circle</span>
308                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
309                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
310                          <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span>
311                          <span class="token method function property-access" style="color:rgb(220, 220, 170)">scale</span>
312                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
313                          <span class="token number" style="color:rgb(181, 206, 168)">1</span>
314                          <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span>
315                          <span class="token plain"></span>
316                          <span class="token number" style="color:rgb(181, 206, 168)">0.3</span>
317                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
318                          <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span>
319                          <span class="token plain"></span>
320                          <br>
321                        </span>
322                        <span class="token-line" style="color:#f8f8f8">
323                          <span class="token plain"></span>
324                          <span class="token function" style="color:rgb(220, 220, 170)">circle</span>
325                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
326                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
327                          <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span>
328                          <span class="token property-access">position</span>
329                          <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span>
330                          <span class="token method function property-access" style="color:rgb(220, 220, 170)">y</span>
331                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
332                          <span class="token number" style="color:rgb(181, 206, 168)">200</span>
333                          <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span>
334                          <span class="token plain"></span>
335                          <span class="token number" style="color:rgb(181, 206, 168)">0.3</span>
336                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
337                          <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span>
338                          <span class="token plain"></span>
339                          <br>
340                        </span>
341                        <span class="token-line" style="color:#f8f8f8">
342                          <span class="token plain"></span>
343                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
344                          <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span>
345                          <span class="token plain"></span>
346                          <br>
347                        </span>
348                        <span class="token-line" style="color:#f8f8f8">
349                          <span class="token plain"></span>
350                          <span class="token keyword" style="color:rgb(86, 156, 214)">yield</span>
351                          <span class="token operator" style="color:rgb(212, 212, 212)">*</span>
352                          <span class="token plain"></span>
353                          <span class="token function" style="color:rgb(220, 220, 170)">circle</span>
354                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
355                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
356                          <span class="token punctuation" style="color:rgb(212, 212, 212)">.</span>
357                          <span class="token method function property-access" style="color:rgb(220, 220, 170)">fill</span>
358                          <span class="token punctuation" style="color:rgb(212, 212, 212)">(</span>
359                          <span class="token string" style="color:rgb(206, 145, 120)">'green'</span>
360                          <span class="token punctuation" style="color:rgb(212, 212, 212)">,</span>
361                          <span class="token plain"></span>
362                          <span class="token number" style="color:rgb(181, 206, 168)">0.3</span>
363                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
364                          <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span>
365                          <span class="token plain"></span>
366                          <br>
367                        </span>
368                        <span class="token-line" style="color:#f8f8f8">
369                          <span class="token plain"></span>
370                          <span class="token punctuation" style="color:rgb(212, 212, 212)">}</span>
371                          <span class="token punctuation" style="color:rgb(212, 212, 212)">)</span>
372                          <span class="token punctuation" style="color:rgb(212, 212, 212)">;</span>
373                          <br>
374                        </span>
375                      </code>
376                    </pre>
377                    <div class="buttonGroup_TNwR">
378                      
379                    </div>
380                  </div>
381                </div>
382              </div>
383            </div>
384            <div class="col col--4 padding-top--lg">
385              <h3>
386                <b>Procedural</b>
387                 for a Change
388              </h3>
389              <p>Let the execution of your code define the animation. Write generator functions that describe what should happen - step by step.</p>
390              <p>Focus on duration, speed and acceleration instead of hardcoded key frames.</p>
391              <p>
392                <a class="button button--outline button--lg" href="/docs/quickstart">Learn More</a>
393              </p>
394            </div>
395          </div>
396          <div class="feature_vtlg row">
397            <div class="col col--6 col--offset-1">
398              <div class="preview_mrMv">
399                
400              </div>
401            </div>
402            <div class="col col--4 padding-top--lg">
403              <h3>
404                <b>Tested</b>
405                 in Combat
406              </h3>
407              <p>The road ahead is still long, but you can already use Motion Canvas to create production-quality animations.</p>
408              <p>
409                
410              </p>
411            </div>
412          </div>
413        </div>
414      </section>
415    </main>
416  </div>
417  <footer class="footer">
418    <div class="container container-fluid">
419      <div class="row footer__links">
420        <div class="col footer__col">
421          <div class="footer__title">Docs</div>
422          <ul class="footer__items clean-list">
423            <li class="footer__item">
424              <a class="footer__link-item" href="/docs">Docs</a>
425            </li>
426            <li class="footer__item">
427              <a class="footer__link-item" href="/api/core">API</a>
428            </li>
429          </ul>
430        </div>
431        <div class="col footer__col">
432          <div class="footer__title">Community</div>
433          <ul class="footer__items clean-list">
434            <li class="footer__item">
435              
436            </li>
437            <li class="footer__item">
438              
439            </li>
440            <li class="footer__item">
441              
442            </li>
443          </ul>
444        </div>
445        <div class="col footer__col">
446          <div class="footer__title">More</div>
447          <ul class="footer__items clean-list">
448            <li class="footer__item">
449              <a class="footer__link-item" href="/blog">Blog</a>
450            </li>
451            <li class="footer__item">
452              
453            </li>
454          </ul>
455        </div>
456      </div>
457      <div class="footer__bottom text--center">
458        <div class="footer__copyright">Copyright © 2023 Motion Canvas. Built with Docusaurus.</div>
459      </div>
460    </div>
461  </footer>
462</div>
463<script src="/assets/js/runtime~main.87e6562d.js"></script>
vendor: 1 bytes, line 463
463
464<script src="/assets/js/main.2373b22b.js"></script>
464
465
466<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"1b56d61f0b11461382ef5c8a5b32ae99","r":1,"spa":2}' crossorigin="anonymous"></script>
466
467</body>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.