{"id":22488937,"url":"https://github.com/amasin76/code-motion","last_synced_at":"2025-08-02T21:31:57.554Z","repository":{"id":230131998,"uuid":"767823886","full_name":"amasin76/code-motion","owner":"amasin76","description":"animate code changes, and export it as a video","archived":false,"fork":false,"pushed_at":"2024-04-12T21:29:32.000Z","size":929,"stargazers_count":17,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-06T17:22:08.516Z","etag":null,"topics":["canvas","code-animation","code-snippets","presentation","video-player"],"latest_commit_sha":null,"homepage":"https://code-motion.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amasin76.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-06T00:38:29.000Z","updated_at":"2024-09-20T16:29:56.000Z","dependencies_parsed_at":"2024-03-28T03:23:55.093Z","dependency_job_id":"7d52dacc-cd21-4a84-90de-3094fb5d2719","html_url":"https://github.com/amasin76/code-motion","commit_stats":null,"previous_names":["amasin76/code-motion"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/amasin76/code-motion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amasin76%2Fcode-motion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amasin76%2Fcode-motion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amasin76%2Fcode-motion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amasin76%2Fcode-motion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amasin76","download_url":"https://codeload.github.com/amasin76/code-motion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amasin76%2Fcode-motion/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268456614,"owners_count":24253256,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["canvas","code-animation","code-snippets","presentation","video-player"],"created_at":"2024-12-06T17:18:56.572Z","updated_at":"2025-08-02T21:31:57.211Z","avatar_url":"https://github.com/amasin76.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch2\u003e\n    An effortless video code diff-animation tool for visualizing code changes\n  \u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cfigure\u003e\n    \u003ca href=\"https://code-motion.vercel.app/\" target=\"_blank\" rel=\"noopener\"\u003e\n\t\t\t\u003cimg alt=\"Code-Motion\" src='./src/assets/studio.webp'\u003e\n\t\t\u003c/a\u003e\n    \u003cfigcaption\u003e\n      \u003cp align=\"center\"\u003e\n        Present your code like never before.\n      \u003c/p\u003e\n    \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/div\u003e\n\n## Features\n\n- 💯 Free \u0026 open-source\n- 🤩 diff animation ([example](https://code-motion.vercel.app/assets/diff-anim-example-CQZ8pw7x.webm))\n- 🏗️ canvas-based video\n- 🎬 preview player\n- 🖼️ Export video to webm\n- ✍️ in-browser code editor\n- 🎨 Customizable\n- 📷 capture screenshots\n- 🌓 Dark mode\n\n## Use Cases\n\n- Creating programming video tutorials (youtube, udemy..).\n- Assisting tutors in explaining code solutions effectively.\n- Student showcasing specific code snippets during presentation.  \n  ...\n\n## Developing\n\nClone the repository, then you can run it locally or in a docker container\n\n### locally\n\n\u003e [!TIP]\n\u003e Install pnpm [`npm i -g pnpm`] if not already installed\n\n1. Install the dependencies\n\n   ```sh\n   pnpm run install\n   ```\n\n2. Run the app locally\n\n   ```sh\n   pnpm run dev\n   ```\n\n### Docker\n\n1. Run in it a container\n\n   ```sh\n   docker-compose up\n   ```\n\nAfter running the app either locally or in docker, navigate to http://localhost:5173.\n\n## Tech Stack\n\n- TypeScript : A statically typed superset of JavaScript, for better DX\n- React : A library for building user interfaces using components\n- Tailwind : A utility-first CSS framework for rapid web development\n- Zustand : A lightweight state management library for React\n- Framer-Motion : A production-ready animation library for React\n- Shadcn : A set of pre-designed ui components, accessible. customizable.\n- CodeMirror : A code editor component for the web.\n- DiffJs : A text differencing implementation based on the O(ND)Algorithm.\n- PrismJs : A syntax highlighting library for code blocks\n\n## Privacy\n\nApp is designed to be offline-first, meaning that it does not rely on any external servers or backdoors,\n\nHowever, code motion utilizes Vercel Basic Analytics:  \nbut only stores anonymized data, and does not use cookies [more info](https://vercel.com/docs/analytics#how-visitors-are-determined)\n\n## Contributing\n\n- Found a bug? [Report here](https://github.com/amasin76/code-motion/issues/new/choose).\n- Feature missing? [Request here](https://github.com/amasin76/code-motion/issues/new/choose).\n\n## Like Code Motion?\n\nDon't forget to star the repository! ⭐️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famasin76%2Fcode-motion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famasin76%2Fcode-motion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famasin76%2Fcode-motion/lists"}