-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
25 lines (19 loc) · 34.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="en" dir="ltr" class="plugin-pages plugin-id-default" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v2.4.3">
<title data-rh="true">Motion Canvas - A TypeScript library for creating animated videos using the Canvas API.</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://motioncanvas.io/img/banner.png"><meta data-rh="true" name="twitter:image" content="https://motioncanvas.io/img/banner.png"><meta data-rh="true" property="og:url" content="https://motioncanvas.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="A TypeScript library for creating animated videos using the Canvas API."><meta data-rh="true" property="og:description" content="A TypeScript library for creating animated videos using the Canvas API."><meta data-rh="true" property="og:title" content="Motion Canvas"><link data-rh="true" rel="icon" href="/img/favicon.svg"><link data-rh="true" rel="canonical" href="https://motioncanvas.io/"><link data-rh="true" rel="alternate" href="https://motioncanvas.io/" hreflang="en"><link data-rh="true" rel="alternate" href="https://motioncanvas.io/" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://Q6Z7BJ83RF-dsn.algolia.net" crossorigin="anonymous"><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.</p>\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</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\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><script type="importmap">{"imports":{"@motion-canvas/core":"/modules/core-4f5340cb.js","@motion-canvas/2d":"/modules/2d-b97f9037.js","@motion-canvas/2d/jsx-runtime":"/modules/2d-b97f9037.js"}}</script>
<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.dd294994.css">
<link rel="preload" href="/assets/js/runtime~main.03886d62.js" as="script">
<link rel="preload" href="/assets/js/main.0c693f9d.js" as="script">
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"dark")}()</script><div id="__docusaurus">
<div id="__docusaurus-base-url-issue-banner-container"></div><div role="region" aria-label="Skip to main content"><a class="skipToContent_G6ar" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg viewBox="0 0 24 24" width="24" height="24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--light_riBm"><img src="/img/logo_dark.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--dark_Dsi0"></div><b class="navbar__title text--truncate">Motion Canvas</b></a><a class="navbar__item navbar__link" href="/docs/">Docs</a><a class="navbar__item navbar__link" href="/api/core">API</a><a class="navbar__item navbar__link" href="/blog">Blog</a></div><div class="navbar__items navbar__items--right"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button><div class="toggle_OLSw colorModeToggle_x44X"><button class="clean-btn toggleButton_wYmb toggleButtonDisabled_vaDU" type="button" disabled="" title="Switch between dark and light mode (currently dark mode)" aria-label="Switch between dark and light mode (currently dark mode)" aria-live="polite"><svg height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor" class="lightToggleIcon_Sxwe"><path d="M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0 c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2 c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1 C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06 c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41 l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41 c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36 c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg height="24px" width="24px" viewBox="0 0 24 24" fill="currentColor" class="darkToggleIcon_Yem1"><path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="root_TZLv loading_lRyv"><div class="badge_yk5a"><small><strong></strong> <!-- -->stars</small></div><a href="https://github.com/motion-canvas/motion-canvas" class="icon_QWMH"><svg viewBox="0 0 98 96" width="20" height="20" aria-hidden="true"><path d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"></path></svg></a></div><div class="root_TZLv loading_lRyv"><div class="badge_yk5a"><small><strong></strong> <!-- -->online</small></div><a href="https://chat.motioncanvas.io" class="icon_QWMH"><svg viewBox="0 -2 127.14 96.36" width="20" height="20" aria-hidden="true"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" fill="currentColor"></path></svg></a></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_UyTV"><div class="feature_vtlg banner_MNUK"><img src="img/logo.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--light_riBm logo_x_Ts"><img src="img/logo_dark.svg" alt="Motion Canvas Logo" class="themedImage_RWGG themedImage--dark_Dsi0 logo_x_Ts"><div class="content_By1D"><h1 class="title_NqGg"><b>Visualize</b> Your<br><b>Ideas</b> With Code</h1><p class="description_T5Ho">A TypeScript library for creating animated videos using the Canvas API.</p><div class="buttons_QzIi"><a class="button button--primary button--lg" href="/docs">Get Started</a><a class="button button--outline button--lg" href="https://github.com/motion-canvas/motion-canvas/blob/main/CONTRIBUTING.md" target="_blank">Contribute</a></div></div></div><main><section><div class="feature_vtlg"><div class="preview_mrMv"><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"><path style="fill:none" d="M0 0h640v360H0z"></path><path style="fill:#181818" d="M0 0h640v360H0z"></path><path style="fill:#242424" d="M79 78h561v282H79z"></path><path style="fill:none;fill-rule:nonzero" d="M307 12h24v24h-24z"></path><path d="M315 17v14l11-7-11-7Z" style="fill:#959595;fill-rule:nonzero"></path><path style="fill:none;fill-rule:nonzero" d="M343 12h24v24h-24z"></path><path d="m349 30 8.5-6-8.5-6v12Zm10-12v12h2V18h-2Z" style="fill:#959595;fill-rule:nonzero"></path><path style="fill:none;fill-rule:nonzero" d="M271 12h24v24h-24z"></path><path d="M277 18h2v12h-2V18Zm3.5 6 8.5 6V18l-8.5 6Z" style="fill:#959595;fill-rule:nonzero"></path><path style="fill:none;fill-rule:nonzero" d="M379 12h24v24h-24z"></path><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><path style="fill:none;fill-rule:nonzero" d="M235 12h24v24h-24z"></path><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><path d="M271 78v282M463 78v282" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path><path d="M295 78v282M487 78v282M199 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path><path d="M415 78v282M607 78v282M175 78v282" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path><path d="M439 78v282M631 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path><path d="M223 78v282M367 78v282M559 78v282M127 78v282" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path><path d="M391 78v282M583 78v282M151 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path><path d="M319 78v282M511 78v282M79 78v282M31 78v282M640 48H0" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path><path d="M343 78v282M535 78v282M103 78v282M55 78v282M7 78v282" style="fill:none;stroke:#202020;stroke-width:2"></path><path d="M640 78H0" style="fill:none;stroke:#1d1d1d;stroke-width:2"></path><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><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><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><path d="M740 48H83c-2.208 0-4 1.792-4 4v22c0 2.208 1.792 4 4 4h557" fill="#242424" stroke="#444" stroke-width="2"></path><g><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><path d="M431 144c0-6.627-5.373-12-12-12h-48v12c0 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><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><text x="380" y="148.11" style="font-family:'JetBrainsMono-Regular','JetBrains Mono',monospace;font-size:14px;fill-opacity:0.87">event</text><path style="fill:none" d="M423 152h24v24h-24z"></path><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></g><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><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><path d="M247 72v288" style="fill:none;stroke:#32a1f6;stroke-width:2"></path></svg></div><div class="wrapper_AzAD"><div class="content_By1D"><h3>Best of <b>Both</b> Worlds</h3><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><p>Powered by<!-- --> <a href="https://vitejs.dev/" target="_blank">Vite</a>, a real-time preview of your animation automatically updates upon any changes.</p><p><a class="button button--outline button--lg" href="/editor/quickstart" target="_blank">Try the Editor</a></p></div></div></div><div class="feature_vtlg"><div class="preview_mrMv"><div class="language-tsx codeBlockContainer_ZGJx theme-code-block" style="--prism-color:var(--hl-color);--prism-background-color:var(--hl-background)"><div class="codeBlockContent_qZBB"><pre tabindex="0" class="prism-code language-tsx codeBlock_TAPP thin-scrollbar"><code class="codeBlockLines_AdAo"><span class="token-line" style="color:var(--hl-color)"><span class="token keyword" style="color:var(--hl-keyword)">export</span><span class="token plain"> </span><span class="token keyword" style="color:var(--hl-keyword)">default</span><span class="token plain"> </span><span class="token function" style="color:var(--hl-function)">makeScene2D</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token keyword" style="color:var(--hl-keyword)">function</span><span class="token operator" style="color:var(--hl-punctuation)">*</span><span class="token plain"> </span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token plain">view</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:var(--hl-punctuation)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token keyword" style="color:var(--hl-keyword)">const</span><span class="token plain"> circle </span><span class="token operator" style="color:var(--hl-punctuation)">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:var(--hl-function)">createRef</span><span class="token generic-function generic class-name operator" style="color:var(--hl-punctuation)"><</span><span class="token generic-function generic class-name" style="color:var(--hl-class)">Circle</span><span class="token generic-function generic class-name operator" style="color:var(--hl-punctuation)">></span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> view</span><span class="token punctuation" style="color:var(--hl-punctuation)">.</span><span class="token method function property-access" style="color:var(--hl-function)">add</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token tag punctuation" style="color:var(--hl-punctuation)"><</span><span class="token tag class-name" style="color:var(--hl-class)">Circle</span><span class="token tag" style="color:var(--hl-tag)"> </span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token tag" style="color:var(--hl-tag)"> </span><span class="token tag attr-name" style="color:var(--hl-variable)">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:var(--hl-punctuation)">=</span><span class="token tag script language-javascript punctuation" style="color:var(--hl-punctuation)">{</span><span class="token tag script language-javascript" style="color:var(--hl-tag)">circle</span><span class="token tag script language-javascript punctuation" style="color:var(--hl-punctuation)">}</span><span class="token tag" style="color:var(--hl-tag)"> </span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token tag" style="color:var(--hl-tag)"> </span><span class="token tag attr-name" style="color:var(--hl-variable)">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:var(--hl-punctuation)">=</span><span class="token tag script language-javascript punctuation" style="color:var(--hl-punctuation)">{</span><span class="token tag script language-javascript number" style="color:var(--hl-number)">320</span><span class="token tag script language-javascript punctuation" style="color:var(--hl-punctuation)">}</span><span class="token tag" style="color:var(--hl-tag)"> </span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token tag" style="color:var(--hl-tag)"> </span><span class="token tag attr-name" style="color:var(--hl-variable)">height</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:var(--hl-punctuation)">=</span><span class="token tag script language-javascript punctuation" style="color:var(--hl-punctuation)">{</span><span class="token tag script language-javascript number" style="color:var(--hl-number)">320</span><span class="token tag script language-javascript punctuation" style="color:var(--hl-punctuation)">}</span><span class="token tag" style="color:var(--hl-tag)"> </span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token tag" style="color:var(--hl-tag)"> </span><span class="token tag attr-name" style="color:var(--hl-variable)">fill</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:var(--hl-punctuation)">=</span><span class="token tag script language-javascript punctuation" style="color:var(--hl-punctuation)">{</span><span class="token tag script language-javascript string" style="color:var(--hl-string)">'blue'</span><span class="token tag script language-javascript punctuation" style="color:var(--hl-punctuation)">}</span><span class="token tag" style="color:var(--hl-tag)"> </span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token tag" style="color:var(--hl-tag)"> </span><span class="token tag punctuation" style="color:var(--hl-punctuation)">/></span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token keyword" style="color:var(--hl-keyword)">yield</span><span class="token operator" style="color:var(--hl-punctuation)">*</span><span class="token plain"> </span><span class="token function" style="color:var(--hl-function)">circle</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">.</span><span class="token method function property-access" style="color:var(--hl-function)">scale</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token number" style="color:var(--hl-number)">2</span><span class="token punctuation" style="color:var(--hl-punctuation)">,</span><span class="token plain"> </span><span class="token number" style="color:var(--hl-number)">0.3</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token keyword" style="color:var(--hl-keyword)">yield</span><span class="token operator" style="color:var(--hl-punctuation)">*</span><span class="token plain"> </span><span class="token function" style="color:var(--hl-function)">waitUntil</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token string" style="color:var(--hl-string)">'event'</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token keyword" style="color:var(--hl-keyword)">yield</span><span class="token operator" style="color:var(--hl-punctuation)">*</span><span class="token plain"> </span><span class="token function" style="color:var(--hl-function)">all</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token function" style="color:var(--hl-function)">circle</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">.</span><span class="token method function property-access" style="color:var(--hl-function)">scale</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token number" style="color:var(--hl-number)">1</span><span class="token punctuation" style="color:var(--hl-punctuation)">,</span><span class="token plain"> </span><span class="token number" style="color:var(--hl-number)">0.3</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token function" style="color:var(--hl-function)">circle</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">.</span><span class="token property-access">position</span><span class="token punctuation" style="color:var(--hl-punctuation)">.</span><span class="token method function property-access" style="color:var(--hl-function)">y</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token number" style="color:var(--hl-number)">200</span><span class="token punctuation" style="color:var(--hl-punctuation)">,</span><span class="token plain"> </span><span class="token number" style="color:var(--hl-number)">0.3</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"> </span><span class="token keyword" style="color:var(--hl-keyword)">yield</span><span class="token operator" style="color:var(--hl-punctuation)">*</span><span class="token plain"> </span><span class="token function" style="color:var(--hl-function)">circle</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">.</span><span class="token method function property-access" style="color:var(--hl-function)">fill</span><span class="token punctuation" style="color:var(--hl-punctuation)">(</span><span class="token string" style="color:var(--hl-string)">'green'</span><span class="token punctuation" style="color:var(--hl-punctuation)">,</span><span class="token plain"> </span><span class="token number" style="color:var(--hl-number)">0.3</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:var(--hl-color)"><span class="token plain"></span><span class="token punctuation" style="color:var(--hl-punctuation)">}</span><span class="token punctuation" style="color:var(--hl-punctuation)">)</span><span class="token punctuation" style="color:var(--hl-punctuation)">;</span><br></span></code></pre><div class="buttonGroup_TNwR"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_MVhB" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_yxgH"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_QJLJ"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div class="wrapper_AzAD"><div class="content_By1D"><h3><b>Procedural</b> for a Change</h3><p>Let the execution of your code define the animation. Write generator functions that describe what should happen - step by step.</p><p>Focus on duration, speed and acceleration instead of hardcoded key frames.</p><p><a class="button button--outline button--lg" href="/docs/quickstart">Learn More</a></p></div></div></div><div class="feature_vtlg"><div class="preview_mrMv"><iframe class="root__2So" width="560" height="315" src="https://www.youtube.com/embed/R6vQ9VmMz2w" loading="lazy" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div><div class="wrapper_AzAD"><div class="content_By1D"><h3><b>Tested</b> in Combat</h3><p>The road ahead is still long, but you can already use Motion Canvas to create production-quality animations.</p><p><a class="button button--outline button--lg" href="https://github.com/motion-canvas/examples" target="_blank">Video Source Code</a></p></div></div></div></section></main></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs">Docs</a></li><li class="footer__item"><a class="footer__link-item" href="/api/core">API</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://patreon.com/aarthificial" target="_blank" rel="noopener noreferrer" class="footer__link-item">Patreon<svg width="16" height="16" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_2l9O"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="currentColor"></path></svg></a></li><li class="footer__item"><a href="https://youtube.com/aarthificial" target="_blank" rel="noopener noreferrer" class="footer__link-item">YouTube<svg width="16" height="16" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_2l9O"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="currentColor"></path></svg></a></li><li class="footer__item"><a href="https://chat.motioncanvas.io" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="16" height="16" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_2l9O"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="currentColor"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://github.com/motion-canvas/motion-canvas" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="16" height="16" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_2l9O"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="currentColor"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 Motion Canvas. Built with Docusaurus.</div></div></div></footer></div>
<script src="/assets/js/runtime~main.03886d62.js"></script>
<script src="/assets/js/main.0c693f9d.js"></script>
</body>
</html>