August 11, 2023

The matrix falling text effect in React using an HTML canvas

React Matrix Animation

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


You can install this module as a component from NPM:

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


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

export default async function Page() {
  return (
); }

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


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