magicbyt3 / svelte-matrix

Rebuild the Matrix on your Svelte applications with this amazing effect

svelte-matrix

Rebuild the Matrix on your Svelte applications with this amazing effect

Try it on Codesandbox

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} />