# matrix-effect

> ![matrix](https://media.giphy.com/media/XsY0ffTDJY9HcDG68h/giphy.gif)

Latest version **1.5.0** (published 2024-05-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install matrix-effect
pnpm add matrix-effect
yarn add matrix-effect
bun add matrix-effect
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2024-05-05 |
| First published | 2022-12-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | joaomariofm |

## Links

- npm: https://www.npmjs.com/package/matrix-effect
- Repository: https://github.com/JoaoMario17/matrix-effect
- Homepage: https://github.com/JoaoMario17/matrix-effect#readme
- Issues: https://github.com/JoaoMario17/matrix-effect/issues
- npm.io page: https://npm.io/package/matrix-effect

## Recent versions

- 1.5.0 (latest) — 2024-05-05
- 1.4.0 — 2023-03-17
- 1.3.1 — 2022-12-08
- 1.3.0 — 2022-12-08
- 1.2.1 — 2022-12-08
- 1.2.0 — 2022-12-08
- 1.0.5 — 2022-12-07
- 1.0.4 — 2022-12-07
- 1.0.3 — 2022-12-07
- 1.0.2 — 2022-12-04
- 1.0.1 — 2022-12-04

## README

# Matrix Effect

![matrix](https://media.giphy.com/media/XsY0ffTDJY9HcDG68h/giphy.gif)

## Description

This is an implementation of the famous "matrix effect", built with Html canvas tag and TypeScript. The purpose of this project is to be reused in any HTML page. Since it is built with the HTML canvas tag, the script can be easily reused by importing it with npm and then loading it into your page.

## Usage

- First, **install the project** as a dependency

    ```bash
        npm install matrix-effect
    ```

- Then **load the script** on your HTML page

    ```html
        <script src="./node_modules/matrix-effect/script/index.js" ></script>
    ```

- And finally, **add a canvas tag to your page** with the **id matrix**

    ```html
        <canvas id="matrix"></canvas>
    ```

## Important

The dimensions of the canvas will be defined by its parent. In the example shown below, the canvas will have a width of 100px and a height of 80px

```html
    <div class="parent">
        <canvas id="matrix"></canvas>
    </div>
```
```css
    .parent {
        width: 100px;
        height: 80px;
    }
```

---
_Source: https://npm.io/package/matrix-effect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._