[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3775":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":15,"starSnapshotCount":15,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},3775,"motion-canvas","motion-canvas\u002Fmotion-canvas","Visualize Your Ideas With Code","https:\u002F\u002Fmotioncanvas.io",null,"TypeScript",18637,776,79,149,0,3,32,138,20,100.67,"MIT License",false,"main",true,[26,27,28],"animation","presentation","visualization","2026-06-12 04:00:19","\u003Cbr\u002F>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fmotion-canvas.github.io\">\n    \u003Cpicture>\n      \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fmotion-canvas.github.io\u002Fimg\u002Flogo_dark.svg\">\n      \u003Cimg width=\"180\" alt=\"Motion Canvas logo\" src=\"https:\u002F\u002Fmotion-canvas.github.io\u002Fimg\u002Flogo.svg\">\n    \u003C\u002Fpicture>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Flerna.js.org\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fpublished%20with-lerna-c084fc?style=flat\" alt=\"published with lerna\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fvitejs.dev\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fpowered%20by-vite-646cff?style=flat\" alt=\"powered by vite\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@motion-canvas\u002Fcore\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@motion-canvas\u002Fcore?style=flat\" alt=\"npm package version\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fchat.motioncanvas.io\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1071029581009657896?style=flat&logo=discord&logoColor=fff&color=404eed\" alt=\"discord\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cbr\u002F>\n\n# Motion Canvas\n\nMotion Canvas is two things:\n\n- A TypeScript library that uses generators to program animations.\n- An editor providing a real-time preview of said animations.\n\nIt's a specialized tool designed to create informative vector animations and\nsynchronize them with voice-overs.\n\nAside from providing the preview, the editor allows you to edit certain aspects\nof the animation which could otherwise be tedious.\n\n## Using Motion Canvas\n\nCheck out our [getting started][docs] guide to learn how to use Motion Canvas.\n\n## Developing Motion Canvas locally\n\nThe project is maintained as one monorepo containing the following packages:\n\n| Name          | Description                                                    |\n| ------------- | -------------------------------------------------------------- |\n| `2d`          | The default renderer for 2D motion graphics                    |\n| `core`        | All logic related to running and rendering animations.         |\n| `create`      | A package for bootstrapping new projects.                      |\n| `docs`        | [Our documentation website.][docs]                             |\n| `e2e`         | End-to-end tests.                                              |\n| `examples`    | Animation examples used in documentation.                      |\n| `internal`    | Internal helpers used for building the packages.               |\n| `player`      | A custom element for displaying animations in a browser.       |\n| `template`    | A template project included for developer's convenience.       |\n| `ui`          | The user interface used for editing.                           |\n| `vite-plugin` | A plugin for Vite used for developing and bundling animations. |\n\nAfter cloning the repo, run `npm install` in the root of the project to install\nall necessary dependencies. Then run `npx lerna run build` to build all the\npackages.\n\n### Developing Editor\n\nWhen developing the editor, run the following command:\n\n```bash\nnpm run template:dev\n```\n\nIt will start a vite server that watches the `core`, `2d`, `ui`, and\n`vite-plugin` packages. The `template` package itself contains a simple Motion\nCanvas project that can be used during development.\n\n### Developing Player\n\nTo develop the player, first build the template: `npm run template:build`. Then,\nstart `npm run player:dev`.\n\n## Installing a local version of Motion Canvas in a project\n\nIt can be useful to install a local version of Motion Canvas in a standalone\nproject. For example, when you want to use your own fork with some custom-made\nfeatures to create your animations.\n\nLet's assume the following project structure:\n\n```\nprojects\u002F\n├── motion-canvas\u002F \u003C- your local monorepo\n└── my-project\u002F \u003C- a bootstrapped project\n    └── package.json\n```\n\nYou can link the local packages from the monorepo by updating the `package.json`\nof your project. Simply replace the version with a `file:` followed by a\nrelative path to the package you want to link:\n\n```diff\n  \"dependencies\": {\n-   \"@motion-canvas\u002Fcore\": \"^3.11.0\",\n+   \"@motion-canvas\u002Fcore\": \"file:..\u002Fmotion-canvas\u002Fpackages\u002Fcore\",\n    \u002F\u002F ...\n  },\n```\n\nIf you're linking the `ui` package, you'll also need to modify `vite.config.ts`\nto allow vite to load external files:\n\n```ts\nimport {defineConfig} from 'vite';\nimport motionCanvas from '@motion-canvas\u002Fvite-plugin';\n\nexport default defineConfig({\n  server: {\n    fs: {\n      \u002F\u002F let it load external files\n      strict: false,\n    },\n  },\n  plugins: [motionCanvas()],\n});\n```\n\nThis is necessary because the editor styles are loaded using the `\u002F@fs\u002F` prefix\nand since the linked `ui` package is outside the project, vite needs permission\nto access it.\n\nThen run `npm install` in to apply the changes and that's it.\n\nYou can use the same technique to test out any custom package you're working on.\n\n## Contributing\n\nRead through our [Contribution Guide](.\u002FCONTRIBUTING.md) to learn how you can\nhelp make Motion Canvas better.\n\n[authenticate]:\n  https:\u002F\u002Fdocs.github.com\u002Fen\u002Fpackages\u002Fworking-with-a-github-packages-registry\u002Fworking-with-the-npm-registry#authenticating-with-a-personal-access-token\n[template]: https:\u002F\u002Fgithub.com\u002Fmotion-canvas\u002Fproject-template#using-the-template\n[discord]: https:\u002F\u002Fchat.motioncanvas.io\n[docs]: https:\u002F\u002Fmotioncanvas.io\u002Fdocs\u002Fquickstart\n","Motion Canvas 是一个用于通过代码创建可视化动画的工具。它结合了TypeScript库和编辑器，允许用户使用生成器编程动画，并提供实时预览功能。该工具特别适合于制作信息丰富的矢量动画，并支持与旁白同步。其核心特性包括易于编辑的动画属性、基于Vite的快速开发环境以及强大的2D渲染能力。适用于需要高质量视觉呈现的教学材料、技术演示或产品介绍等场景。",2,"2026-06-11 02:56:12","top_language"]