{"id":13469517,"url":"https://github.com/motion-canvas/motion-canvas","last_synced_at":"2025-03-26T06:32:17.950Z","repository":{"id":65688058,"uuid":"520955562","full_name":"motion-canvas/motion-canvas","owner":"motion-canvas","description":"Visualize Your Ideas With Code","archived":false,"fork":false,"pushed_at":"2025-02-16T11:03:57.000Z","size":11008,"stargazers_count":16789,"open_issues_count":135,"forks_count":635,"subscribers_count":80,"default_branch":"main","last_synced_at":"2025-03-21T21:01:47.785Z","etag":null,"topics":["animation","presentation","visualization"],"latest_commit_sha":null,"homepage":"https://motioncanvas.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/motion-canvas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["aarthificial"],"patreon":"aarthificial"}},"created_at":"2022-08-03T16:30:14.000Z","updated_at":"2025-03-21T14:31:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"ef8c8e0b-360a-48a2-a245-de1795302300","html_url":"https://github.com/motion-canvas/motion-canvas","commit_stats":{"total_commits":938,"total_committers":97,"mean_commits":9.670103092783505,"dds":0.4733475479744137,"last_synced_commit":"07982a6a064135f18ffdfc8a291c7b2dde9ccc80"},"previous_names":[],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motion-canvas%2Fmotion-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motion-canvas%2Fmotion-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motion-canvas%2Fmotion-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motion-canvas%2Fmotion-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/motion-canvas","download_url":"https://codeload.github.com/motion-canvas/motion-canvas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245604243,"owners_count":20642968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","presentation","visualization"],"created_at":"2024-07-31T15:01:43.235Z","updated_at":"2025-03-26T06:32:15.314Z","avatar_url":"https://github.com/motion-canvas.png","language":"TypeScript","funding_links":["https://github.com/sponsors/aarthificial","https://patreon.com/aarthificial"],"categories":["TypeScript","前端开发框架及项目","visualization","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["其他_文本生成、文本对话"],"readme":"\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://motion-canvas.github.io\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://motion-canvas.github.io/img/logo_dark.svg\"\u003e\n      \u003cimg width=\"180\" alt=\"Motion Canvas logo\" src=\"https://motion-canvas.github.io/img/logo.svg\"\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://lerna.js.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/published%20with-lerna-c084fc?style=flat\" alt=\"published with lerna\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://vitejs.dev\"\u003e\u003cimg src=\"https://img.shields.io/badge/powered%20by-vite-646cff?style=flat\" alt=\"powered by vite\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@motion-canvas/core\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@motion-canvas/core?style=flat\" alt=\"npm package version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://chat.motioncanvas.io\"\u003e\u003cimg src=\"https://img.shields.io/discord/1071029581009657896?style=flat\u0026logo=discord\u0026logoColor=fff\u0026color=404eed\" alt=\"discord\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\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/\n├── motion-canvas/ \u003c- your local monorepo\n└── my-project/ \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/core\": \"^3.11.0\",\n+   \"@motion-canvas/core\": \"file:../motion-canvas/packages/core\",\n    // ...\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/vite-plugin';\n\nexport default defineConfig({\n  server: {\n    fs: {\n      // 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 `/@fs/` 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](./CONTRIBUTING.md) to learn how you can\nhelp make Motion Canvas better.\n\n[authenticate]:\n  https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token\n[template]: https://github.com/motion-canvas/project-template#using-the-template\n[discord]: https://chat.motioncanvas.io\n[docs]: https://motioncanvas.io/docs/quickstart\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotion-canvas%2Fmotion-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmotion-canvas%2Fmotion-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotion-canvas%2Fmotion-canvas/lists"}