Skip to content

amasin76/code-motion

Repository files navigation

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

Code-Motion

Present your code like never before.

Features

  • 💯 Free & open-source
  • 🤩 diff animation (example)
  • 🏗️ 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

    pnpm run install
  2. Run the app locally

    pnpm run dev

Docker

  1. Run in it a container

    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

Contributing

Like Code Motion?

Don't forget to star the repository! ⭐️