https://github.com/amasin76/code-motion

animate code changes, and export it as a video
https://github.com/amasin76/code-motion

canvas code-animation code-snippets presentation video-player

Last synced: 27 days ago
JSON representation

animate code changes, and export it as a video

• Host: GitHub
• URL: https://github.com/amasin76/code-motion
• Owner: amasin76
• Created: 2024-03-06T00:38:29.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-12T21:29:32.000Z (9 months ago)
• Last Synced: 2024-04-13T05:14:37.481Z (9 months ago)
• Topics: canvas, code-animation, code-snippets, presentation, video-player
• Language: TypeScript
• Homepage: https://code-motion.vercel.app
• Size: 907 KB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  


    An effortless video code diff-animation tool for visualizing code changes

  





  

    

			

		

    

      


        Present your code like never before.

      

    

  



## Features

- 💯 Free & open-source

- 🤩 diff animation ([example](https://code-motion.vercel.app/assets/diff-anim-example-CQZ8pw7x.webm))

- 🏗️ canvas-based video

- 🎬 preview player

- 🖼️ Export video to webm

- ✍️ in-browser code editor

- 🎨 Customizable

- 📷 capture screenshots

- 🌓 Dark mode

## Use Cases

- Creating programming video tutorials (youtube, udemy..).

- Assisting tutors in explaining code solutions effectively.

- Student showcasing specific code snippets during presentation.  

  ...

## Developing

Clone the repository, then you can run it locally or in a docker container

### locally

> [!TIP]

> Install pnpm [`npm i -g pnpm`] if not already installed

1. Install the dependencies

   ```sh

   pnpm run install

   ```

2. Run the app locally

   ```sh

   pnpm run dev

   ```

### Docker

1. Run in it a container

   ```sh

   docker-compose up

   ```

After running the app either locally or in docker, navigate to http://localhost:5173.

## Tech Stack

- TypeScript : A statically typed superset of JavaScript, for better DX

- React : A library for building user interfaces using components

- Tailwind : A utility-first CSS framework for rapid web development

- Zustand : A lightweight state management library for React

- Framer-Motion : A production-ready animation library for React

- Shadcn : A set of pre-designed ui components, accessible. customizable.

- CodeMirror : A code editor component for the web.

- DiffJs : A text differencing implementation based on the O(ND)Algorithm.

- PrismJs : A syntax highlighting library for code blocks

## Privacy

App is designed to be offline-first, meaning that it does not rely on any external servers or backdoors,

However, code motion utilizes Vercel Basic Analytics:  

but only stores anonymized data, and does not use cookies [more info](https://vercel.com/docs/analytics#how-visitors-are-determined)

## Contributing

- Found a bug? [Report here](https://github.com/amasin76/code-motion/issues/new/choose).

- Feature missing? [Request here](https://github.com/amasin76/code-motion/issues/new/choose).

## Like Code Motion?

Don't forget to star the repository! ⭐️