https://github.com/motion-canvas/motion-canvas Skip to content Toggle navigation Sign up * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code + Explore + All features + Documentation + GitHub Skills + Blog * Solutions + For + Enterprise + Teams + Startups + Education + By Solution + CI/CD & Automation + DevOps + DevSecOps + Case Studies + Customer Stories + Resources * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles + Repositories + Topics + Trending + Collections * Pricing [ ] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this organization All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} motion-canvas / motion-canvas Public * * Notifications * Fork 319 * Star 8.5k Visualize Complex Ideas Programmatically motioncanvas.io License MIT license 8.5k stars 319 forks Star Notifications * Code * Issues 61 * Pull requests 8 * Discussions * Actions * Projects 0 * Security * Insights More * Code * Issues * Pull requests * Discussions * Actions * Projects * Security * Insights motion-canvas/motion-canvas This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags Name already in use A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch? Cancel Create 2 branches 7 tags Code * Local * Codespaces * Clone HTTPS GitHub CLI [https://github.com/m] Use Git or checkout with SVN using the web URL. [gh repo clone motion] Work fast with our official CLI. Learn more. * Open with GitHub Desktop * Download ZIP Sign In Required Please sign in to use Codespaces. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching Xcode If nothing happens, download Xcode and try again. Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit @gustavneustadt gustavneustadt docs(2d): add smoothCorners, cornerSharpness (#394) ... fbeb392 Feb 21, 2023 docs(2d): add smoothCorners, cornerSharpness (#394) fbeb392 Git stats * 483 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time .github build: fix verification workflow (#314) February 11, 2023 17:11 .husky feat(core): switch to vitest (#99) December 6, 2022 20:43 packages docs(2d): add smoothCorners, cornerSharpness (#394) February 21, 2023 16:01 .eslintrc.json docs: fix links (#325) February 12, 2023 12:13 .gitignore docs: custom typedoc plugin (#113) January 2, 2023 21:22 .npmrc revert: ci(release): 2.0.0 [skip ci] (#176) February 4, 2023 14:15 .prettierignore docs: add 2.3.0 release (#318) February 11, 2023 23:04 .prettierrc feat: add markdown logs (#138) January 18, 2023 01:08 CHANGELOG.md ci(release): 2.5.0 [skip ci] February 20, 2023 20:04 CODE_OF_CONDUCT.md build: fix verification workflow (#314) February 11, 2023 17:11 CONTRIBUTING.md docs: fix incorrect branch name in contribution guide (#327) February 12, 2023 14:45 FUNDING.yml docs: add FUNDING.yml (#313) February 11, 2023 10:22 LICENSE Initial commit June 7, 2022 19:54 README.md docs: custom domain (#359) February 16, 2023 11:41 SECURITY.md docs: add a security policy (#291) February 10, 2023 06:52 commitlint.config.js feat: add E2E testing (#101) December 7, 2022 09:00 lerna.json ci(release): 2.5.0 [skip ci] February 20, 2023 20:04 package-lock.json docs: add 2.5.0 release (#390) February 20, 2023 21:42 package.json build: fix verification workflow (#314) February 11, 2023 17:11 tsdoc.json feat: add random number generator (#116) January 6, 2023 17:48 View code Motion Canvas Using Motion Canvas Developing Motion Canvas locally Developing Core & 2D Developing UI Developing Player Contributing README.md Vite logo published with lerna powered by lerna npm package version discord Motion Canvas Motion Canvas is two things: * A TypeScript library that uses generators to program animations. * An editor providing a real-time preview of said animations. It's a specialized tool designed to create informative vector animations and synchronize them with voice-overs. Aside from providing the preview, the editor allows you to edit certain aspects of the animation which could otherwise be tedious. Using Motion Canvas Check out our getting started guide to learn how to use Motion Canvas. Developing Motion Canvas locally The project is maintained as one monorepo containing the following packages: Name Description core All logic related to running and rendering animations. 2d The default renderer for 2D motion graphics create A package for bootstrapping new projects. docs Our documentation website. e2e End-to-end tests. examples Animation examples used in documentation. player A custom element for displaying animations in a browser. template A template project included for developer's convenience. ui The user interface used for editing. vite-plugin A plugin for Vite used for developing and bundling animations. After cloning the repo, run npm install in the root of the project to install all necessary dependencies. Then run npx lerna run build to build all the packages. Developing Core & 2D When developing the core, start both core:watch and template:serve. This will pick up any changes you make to the core package, automatically rebuild the template project and refresh the page. Similarly, when developing the 2D package, start 2d:watch and template:serve. Developing UI If you want to develop the UI, first build the template project by running: template:build. Next, start ui:serve. Developing Player Like with UI, to develop the player, first build the template: template:build. Then, start player:serve. Contributing Read through our Contribution Guide to learn how you can help make Motion Canvas better. About Visualize Complex Ideas Programmatically motioncanvas.io Resources Readme License MIT license Code of conduct Code of conduct Security policy Security policy Stars 8.5k stars Watchers 48 watching Forks 319 forks Releases 37 v2.5.0 Latest Feb 20, 2023 + 36 releases Sponsor this project * * patreon patreon.com/aarthificial Learn more about GitHub Sponsors Used by 58 * @hhenrichsen * @12rcu * @Lunarisnia * @BrettJay * @vankrav * @squigglesdev * @oacs * @AstragoDEShare + 50 Contributors 36 * @aarthificial * @Ross-Esmond * @ksassnowski * @Tandashi * @exdeejay * @github-actions[bot] * @hhenrichsen * @gustavneustadt * @ehrenmurdick * @DoctorBracewell * @DanielBreiner + 25 contributors Languages * TypeScript 90.4% * JavaScript 3.5% * SCSS 3.1% * CSS 2.3% * Other 0.7% Footer (c) 2023 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.