svelte-matrix

Rebuild the Matrix on your Svelte applications with this amazing effect

Installation

# yarn 
yarn add -D svelte-matrix
 
# npm 
npm i -D svelte-matrix

Usage

<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:

<Matrix width={300} />

height

The height of the Matrix canvas

default: window.innerHeight

Example:

<Matrix height={150} />

noInitialDrop

Disables the initial column drop animation

default: false

Example:

<Matrix noInitialDrop />

fontSize

Sets the font size of the Matrix characters

default: 16

Example:

<Matrix fontSize={24} />

color

Sets the font color of the Matrix characters

default: '#0f0'

Example:

<Matrix color='#fff' />

interval

Sets the time interval of the fall speed of the characters

default: 33

Example:

<Matrix interval={33} />