How to Create the Matrix Text Effect With JavaScript

The green falling rain text effect is easy to implement with JavaScript and HTML canvas and still looks great

The Matrix text effect in JavaScript. Image by author.

The Matrix text effect is one of the most recognizable effects of the early 2000s. Inspired by the release of The Matrix Resurrections (which I didn’t get to see yet), I rewatched the old trilogy and it made me want to implement the effect for myself. It turns out, it’s very easy to implement, and when you see it in fullscreen you (and others that happen to pass by) think you are the greatest hacker ever. So let’s have a look at how to create the Matrix text effect with JavaScript.

Implementation

Like with most animated content on the internet, we start with an HTML canvas element.

<canvas id=”canvas” width=”1280" height=”720" style=”display:block; margin:0 auto;”></canvas>

In the init() function on the JavaScript side, we first save a reference to the canvas element and its 2D context. Then we can initialize the Matrix effect and start the main loop.

To initialize the Matrix effect, we have to define a few global variables first, like the tile size, which defines the size of the grid cells and the text. Then we divide the total height of the canvas by the tile size to calculate the maximum number of tiles per column.

We also divide the width of the canvas into columns, so we can keep track of the raining text on a per-column basis. For every column, we store its x position and then create a random height based on the maximum stack height. Finally, every column needs a counter variable to count up in every frame of the effect.