{
  "markdown": "<br/>\n<p align=\"center\">\n  <a href=\"https://motion-canvas.github.io\">\n    <picture>\n      <source media=\"(prefers-color-scheme: dark)\" srcset=\"https://motion-canvas.github.io/img/logo_dark.svg\">\n      <img width=\"180\" alt=\"Motion Canvas logo\" src=\"https://motion-canvas.github.io/img/logo.svg\">\n    </picture>\n  </a>\n</p>\n<p align=\"center\">\n  <a href=\"https://lerna.js.org\"><img src=\"https://img.shields.io/badge/published%20with-lerna-c084fc?style=flat\" alt=\"published with lerna\"></a>\n  <a href=\"https://vitejs.dev\"><img src=\"https://img.shields.io/badge/powered%20by-vite-646cff?style=flat\" alt=\"powered by vite\"></a>\n  <a href=\"https://www.npmjs.com/package/@motion-canvas/core\"><img src=\"https://img.shields.io/npm/v/@motion-canvas/core?style=flat\" alt=\"npm package version\"></a>\n  <a href=\"https://chat.motion-canvas.io\"><img src=\"https://img.shields.io/discord/1071029581009657896?style=flat&logo=discord&logoColor=fff&color=404eed\" alt=\"discord\"></a>\n</p>\n<br/>\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/ <- your local monorepo\n└── my-project/ <- 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.motion-canvas.io\n[docs]: https://motion-canvas.io/docs/quickstart\n",
  "bytes": 5248,
  "sha": "9895daa20be79849a312b5cb5b9ed36db2d1a6dfe9731b5e53a67b222abe9cd9",
  "repo_slug": "motion-canvas/motion-canvas",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_aitmpl_video_motion_canvas_6d4f0253/readme"
}