# svelte-matrix

> Rebuild the Matrix on your Svelte applications with this amazing effect

Latest version **1.0.0** (published 2019-11-24) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-11-24 |
| First published | 2019-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Henrique Borges |
| Maintainers | henriquehbr |
| Keywords | svelte, matrix-effect |

## Links

- npm: https://www.npmjs.com/package/svelte-matrix
- Repository: https://github.com/henriquehbr/svelte-matrix
- npm.io page: https://npm.io/package/svelte-matrix

## Recent versions

- 1.0.0 (latest) — 2019-11-24

## README

# svelte-matrix
> Rebuild the Matrix on your Svelte applications with this amazing effect

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)

## Installation

```bash
# yarn
yarn add -D svelte-matrix

# npm
npm i -D svelte-matrix
```

## Usage

```svelte
<script>
	import Matrix from 'svelte-matrix'
</script>

<Matrix />
```

## Options

You can control the behavior of the matrix effect by passing specific props to the `<Matrix />` component

### `width`

The width of the Matrix canvas

default: `window.innerWidth`

#### Example:

```svelte
<Matrix width={300} />
```

### `height`

The height of the Matrix canvas

default: `window.innerHeight`

#### Example:

```svelte
<Matrix height={150} />
```

### `noInitialDrop`

Disables the initial column drop animation

default: `false`

#### Example:

```svelte
<Matrix noInitialDrop />
```

### `fontSize`

Sets the font size of the Matrix characters

default: `16`

#### Example:

```svelte
<Matrix fontSize={24} />
```

### `color`

Sets the font color of the Matrix characters

default: `'#0f0'`

#### Example:

```svelte
<Matrix color='#fff' />
```

### `interval`

Sets the time interval of the fall speed of the characters

default: `33`

#### Example:

```svelte
<Matrix interval={33} />
```

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