Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ntatko/code-input-animator

A react-based code animator that times your keystrokes out an a smooth fassion
https://github.com/ntatko/code-input-animator

gists react socials

Last synced: 6 days ago
JSON representation

A react-based code animator that times your keystrokes out an a smooth fassion

Awesome Lists containing this project

README

        

# Code Input Animator

Code Input Animator is a simple web application that animates the typing of code snippets. It is built with React using Vite.

## Instructions

Set up your code in the top box how you want the recording to start. You'll see your changes mirrored in the bottom box as you start.

Click the record button to start recording. You can pause and resume the recording as needed. When you're done editing your code, click the stop button.

You can then play back the recording by clicking the play button. You can also pause and resume the playback as needed. You'll use a screen recorder to capture the playback, so try to get as close to the green edges as possible, or be ready to do that in post.

## Getting Started

To get a local copy up and running follow these simple steps.

### Prerequisites

You will need Node.js and npm installed on your machine.

### Installation

1. Fork and clone the repo
2. Install dependencies
```sh
npm install
```
3. Start the development server
```sh
npm run dev
```
4. Open your browser and navigate to `http://localhost:3000`

## Contributing

If you would like to contribute, please fork the repository and submit a pull request. If you find a bug, please open an issue.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.