Matrix Digital Rain Demo

A demonstration of the Matrix-style “digital rain” using HTML5 canvas and javascipt animation.

Complete Digital Rain HTML Page

A self-contained HTML file demonstrating how to set up the Matrix-style digital rain canvas background with Bootstrap and JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Matrix Digital Rain</title>

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    >

    /* Full-screen background canvas */
    #rain{
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0;
        background: #000;
    }

    /* Foreground content sits above the canvas */
    .content {
        position: relative;
        z-index: 10;
    }

    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
  </head>

  <body class="bg-black text-light">

    <!-- Canvas Background -->
    <canvas id="bgCanvas"></canvas>

    <!-- Foreground Content -->
    <div class="content container py-5 text-center">
      <h1 class="text-success mb-4">Matrix Digital Rain Demo</h1>
      <p class="lead">
        This page demonstrates a Matrix-style “digital rain” animation using HTML5 Canvas and JavaScript.
      </p>
    </div>

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Matrix Animation Script -->
    <script src="scripts.js"></script>
  </body>
</html>

HTML5 Bootstrap Canvas JavaScript

Sample scripts.js Logic

Core JavaScript loop that draws random characters in vertical columns to create the digital rain animation:

const canvas = document.getElementById("bgCanvas");
const ctx = canvas.getContext("2d");

let w, h, cols, ypos;

function setup() {
  w = canvas.width  = window.innerWidth;
  h = canvas.height = window.innerHeight;
  cols = Math.floor(w / 20) + 1;
  ypos = Array(cols).fill(0);
}

setup();
window.addEventListener("resize", setup);

function matrix() {
  ctx.fillStyle = "#0001";
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = "#0f0";
  ctx.font = "16px monospace";

  ypos.forEach((y, ind) => {
    const text = String.fromCharCode(Math.random() * 128);
    const x = ind * 20;
    ctx.fillText(text, x, y);
    ypos[ind] = y > h + Math.random() * 10000 ? 0 : y + 20;
  });
}

setInterval(matrix, 50);

JavaScript Animation Canvas API

How It Works

The Matrix Digital Rain effect is created entirely in JavaScript using the HTML5 Canvas API. Each frame, a set of random characters is drawn in vertical columns that fall from top to bottom, leaving behind a faint trail.

1. Canvas Initialization
The script sets the canvas width and height to match the current browser window size. The width is divided into fixed 20px-wide columns, each representing a vertical stream of falling characters.
2. Column Data
An array named ypos stores the vertical position for each column. Every column starts at a random y-offset to create staggered motion across the screen.
3. Character Generation
On each animation frame, a new random ASCII character (using String.fromCharCode()) is chosen for every column and drawn at its current (x, y) position.
4. Trail Effect
Before new characters are drawn, the canvas is covered with a semi-transparent black rectangle:
```
ctx.fillStyle = "#0001";
ctx.fillRect(0, 0, w, h);
```
This faint overlay slightly dims previous characters instead of completely erasing them, creating a smooth trailing or "rain" effect as newer characters overwrite older ones.
5. Motion and Looping
Each y-position increases by a fixed step (20 pixels). When a column passes below the screen’s height, it is reset to the top at a random interval, ensuring the streams loop continuously but irregularly.
6. Animation Timing
The matrix() function is executed every 50 milliseconds using setInterval(), providing a stable, smooth refresh rate. The result is a steady downward rain of glowing green symbols.

The entire animation runs independently in the browser with no external libraries required, using only the native Canvas 2D API and simple math for motion and randomness.

Canvas 2D Animation Loop JavaScript Graphics Timing