Create Matrix-Style Digital Rain in JavaScript – RainChar

RainChar is a JavaScript library that creates a Matrix-style digital rain effect on web pages.

It simulates the iconic falling characters you’ve seen in “Ghost in the Shell” and “The Matrix” series.

You can adjust character size, color, font, density, and more to fit your design needs.

RainChar works by creating a Canvas element and continuously updating character positions to simulate falling.

Each character is randomly selected from a defined character range, assigned a random size and speed, and drawn on the canvas.

The characters are updated and redrawn on each frame, creating a smooth and continuous effect.

The library also handles window resizing and adjusts the character count accordingly.

How to use it:

1. Download and include the rain-char.js script on your webpage:

<script src="src/rain-char.js"></script>

2. Create an empty HTML element where you want the digital rain effect to appear.

<div id="example"></div>

3. Initialize the effect by creating a new RainChar instance:

const rain = new RainChar({
  id: 'example',
});

4. Start/pause/stop the animation.

rain.start();
rain.stop();
rain.pause();
rain.updateSetting(key, value);

5. Adjust the appearance according to your needs using the customizable options as follows:

const rain = new RainChar({
  font: 'monospace',
  charSize: [10, 40],
  charRange: [0x0021, 0x007e],
  bg: '#222',
  fg: 'yellow',
  fps: 30,
  densityFactor: 10,
  trailMultiplier: 1,
  charSpacing: 1,
  charChangeFreq: 1,
  parentId: document.body,
});

Changelog:

v2.2.0 (10/07/2025)

• Added more options

v1.4.0 (08/25/2024)

• Added more options