matrixrain.js

Playground

Try every knob

Swap themes, drag the sliders, and watch the rain react in real time. Every change here is one setOptions() call.

Gallery

Seven themes, one plugin

Each tile is a live MatrixRain instance. Every theme is a preset of charset · color · leadColor · background · fadeAlpha · glow · fontFamily — and you can override any field per-instance, or define your own theme.

Usage

Drop it in

One CSS file, one JS file, one container. The canvas fills its parent and resizes with it.

<link rel="stylesheet" href="path/to/matrixrain.css">
<script src="path/to/matrixrain.js"></script>

<div id="hero" style="height: 60vh"></div>

<script>
  const rain = new MatrixRain('#hero');

  // Live tuning — every option is hot-swappable.
  rain.setOptions({
    theme:    'binary',
    fontSize: 18,
    speed:    50,        // ms per frame; lower = faster
    density:  0.7,       // 0–1; fraction of columns actively raining
  });
</script>

Options

new MatrixRain('#hero', {
  theme:       'matrix',     // 'matrix' | 'binary' | 'emoji' | 'terminal' | 'bloodrain' | 'arctic' | 'gbf'
  charset:     null,         // string or array — overrides theme's glyph set
  color:       null,         // CSS color — overrides theme
  leadColor:   null,         // brighter color for the leading head glyph; false to disable
  background:  null,         // theme default, or 'transparent' to let the parent show through
  fadeAlpha:   null,         // 0–1; trail-fade alpha per frame (lower = longer trails)
  fontSize:    16,           // px
  fontFamily:  null,         // overrides theme
  speed:       33,           // ms per frame
  density:     1.0,          // 0–1; fraction of columns raining
  glow:        null,         // px shadowBlur; overrides theme
  columnRatio: null,         // column step = fontSize * columnRatio
  rowRatio:    1.0,          // row step = fontSize * rowRatio
  resetChance: 0.025,        // probability per frame a fallen drop resets to top
  paused:      false,
  autoStart:   true,
});

Methods

rain.start();
rain.pause();
rain.resume();
rain.stop();                 // clears canvas
rain.setOptions({ ... });    // merge + apply (hot-swap any option)
rain.resize();               // manual re-measure (auto via ResizeObserver)
rain.destroy();              // tear down canvas + listeners

Transparent over your own background

new MatrixRain('#hero', { background: 'transparent' });
/* The plugin fades via destination-out, so whatever you paint on the
   host element (CSS gradient, image, video) shows through the rain. */