https://github.com/deco31416/matrix-effect

Matrix rain animation - An interactive animation inspired by the iconic Matrix movie. Built using HTML, CSS, and JavaScript. Includes responsive design and customizable features.
https://github.com/deco31416/matrix-effect

animation canvas css html javascript

Last synced: 11 days ago
JSON representation

Matrix rain animation - An interactive animation inspired by the iconic Matrix movie. Built using HTML, CSS, and JavaScript. Includes responsive design and customizable features.

• Host: GitHub
• URL: https://github.com/deco31416/matrix-effect
• Owner: deco31416
• License: mit
• Created: 2024-12-31T19:56:10.000Z (17 days ago)
• Default Branch: main
• Last Pushed: 2024-12-31T20:10:42.000Z (17 days ago)
• Last Synced: 2024-12-31T21:16:45.629Z (17 days ago)
• Topics: animation, canvas, css, html, javascript
• Language: JavaScript
• Homepage: https://matrix-effect-mocha.vercel.app
• Size: 512 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Matrix Rain Animation

![HTML5](https://img.shields.io/badge/HTML5-%23E34F26.svg?style=flat&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/CSS3-%231572B6.svg?style=flat&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/JavaScript-%23F7DF1E.svg?style=flat&logo=javascript&logoColor=black)

![Canvas API](https://img.shields.io/badge/Canvas%20API-%23000000.svg?style=flat&logo=canvas&logoColor=white)



  



## Description

This project creates a mesmerizing matrix rain animation using the Canvas API. Inspired by the iconic "Matrix" effect, it features:

- A black background with green falling characters.

- Dynamic toggle for a vibrant gradient color mode (via double-click or double-tap on touch devices).

- Responsive design that adjusts to screen size.

[Live Demo](https://matrix-effect-mocha.vercel.app/)

---

## Table of Contents

- [Matrix Rain Animation](#matrix-rain-animation)

  - [Description](#description)

  - [Table of Contents](#table-of-contents)

  - [Installation](#installation)

  - [Features](#features)

  - [Usage](#usage)

    - [Quick Demo](#quick-demo)

    - [Customization](#customization)

  - [Live Site](#live-site)

  - [License](#license)

  - [🚀 **Implementation**](#-implementation)

  - [💬 **Contact**](#-contact)

---

## Installation

1. **Clone the repository** and navigate into the folder:

   ```bash

   git clone https://github.com/deco31416/matrix-effect.git

   ```

2. **Open the `index.html` file** in your browser:

   ```bash

   open index.html

   ```

3. **Interact with the animation**:

   - Double-click (or double-tap on touch devices) to toggle the gradient color effect.

---

## Features

- **Dynamic Characters:** Falling characters from a customizable string.

- **Color Modes:** Single green or gradient rainbow effect.

- **Responsive Design:** Adjusts automatically to window resizing.

- **Interactive Controls:** Toggle colors with a double-click or double-tap.

- **Optimized Performance:** Frame rate control and canvas repainting for smooth visuals.

---

## Usage

### Quick Demo

You can directly view the animation by opening the `index.html` file in your browser.

### Customization

To change the characters or colors:

1. Open the `symbol.js` file.

2. Modify the `this.characters` string to your preferred text.

Example:

```javascript

this.characters = "Hello World!";

```

To adjust colors:

- Update `singleColor` or `gradientColor` values in the main script file.

---

## Live Site

Check out the live version of the animation:

[**Matrix Effect Live Preview**](https://matrix-effect-mocha.vercel.app/)

---

## License

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

---

## 🚀 **Implementation**

The easiest way to deploy your Next.js application is to use the [Vercel](https://vercel.com/) platform.

See the [deployment documentation](https://nextjs.org/docs/deployment) for more details.

---

## 💬 **Contact**

Do you have an idea or are you looking for collaboration? Connect with me!

- **Email**: [[email protected]](mailto:[email protected])  

- **Twitter**: [@Deco31416](https://twitter.com/Deco31416)  

- **Telegram**: [@Deco31416](https://t.me/Deco31416)

---

**© 2024 DECO31416**  

_Your technological partner in Blockchain and Fintech solutions._

**Redefining technological excellence in each project, by establishing new standards of quality and innovation.**