React Matrix Animation

Inspired by Christian Behler's post How to Create the Matrix Text Effect With JavaScript.

Install

You can install this module as a component from NPM:

yarn add react-matrix-animation
npm install react-matrix-animation

Usage

import { ReactMatrixAnimation } from 'react-matrix-animation';

export default async function Page() {
  return (
    <div className="m-auto flex h-screen w-screen items-center justify-center">
      <ReactMatrixAnimation />
    </div>
  );
}

Options & Defaults

// Size of the character elements. Number value.
tileSize = 20

// A higher fade factor will make the characters fade quicker. Number value.
fadeFactor = 0.05

// Background color. Hex value.
backgroundColor = '#030303'

// Font color. Hex value.
fontColor = '#008529'

// the values for the falling tiles. Array of strings. e.g. ["0", "1"]
tileSet = null

Contribution

I appreciate any contributions to this repo! Feel free to get in touch with me here.