Cmatrix NPM | npm.io

CMatrix - Matrix effect in JavaScript

Matrix animation effect in JavaScript using Canvas

Screenshot of a browser window with Matrix rain effect, green letters that look like Japanese on black background

Installation

npm install cmatrix

Demos

ES Module (custom characters)
ES5
Matrix Font

Usage

You can use CDN:

<script src="https://cdn.jsdelivr.net/npm/cmatrix"></script>

and intialize the effect.

matrix(canvasElement, {
  chars: ['0', '1'],
  font_size: 16
}).

matrix(canvasElement, {
  chars: matrix.range(0x30A1, 0x30F6).concat(matrix.range(0x0030, 0x0039)),
  font_size: 16
}).

The matrix function return a Promise that is resolved when exit. By default, q and ESC exit from the effect. Use exit: false to disable ending of the animation.

Repo Link

Options

chars - array of single character strings, by default Katagana and Hiragana (Japanese characters are used).
exit - by default matrix return a promise that resolves when it ends (when someone press q or ESC) this option when set to false will disable this and the function return undefined.
color - default color - default is #0f0.
width - width of the Canvas, default full screen.
height - height of the Canvas, default full screen.
resize - if the size is constant (you specify the width and height options) you should set it to false.
background - by default it's set rgba(0, 0, 0, 0.05) alpha is required for the effect to look good.
font_size - number the default is 14.
mount: (matrix) => void - callback function which is executed with single argument that is instance of internal Matrix object when initializing.
unmount: (matrix) => void - callback function which is executed when Matrix effect is destroyed.
font - name of the font (default monospace).

Matrix instance methods

start() - start the animation
stop() - stop the animation
resize(width, height) - resize the canvas to the given width and height
clear() - clear the canvas
reset() - reset the internal state the effect
fullscreen() - toggle fullscreen
render() - render single frame using internal state

Static methods

matrix.range(start_number, end_number) - returns characters created from given range. Use matrix.range(0x30A1, 0x30F6) for Katagana characters and matrix.range(0x3041, 0x3096) for Hiragana, they look nice as matrix rain.
matrix.custom_chars - array containing all characters for custom matrix font in this repository.