cmatrix

Matrix effect animation on a canvas

Usage no npm install needed!

<script type="module">
  import cmatrix from 'https://cdn.skypack.dev/cmatrix';
</script>

README

CMatrix - Matrix effect in JavaScript

Matrix animation effect in JavaScript using Canvas

Installation

npm install cmatrix

Demo

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
}).

The matrix function return a Promise that is resolved when exit. By default, q and ESC exit from the effect.

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.
  • background - by default it's set rgba(0, 0, 0, 0.05) alpha is used for nice fade out effect.
  • font_size - number the default is 14.

Changelog

0.2.0

  • add exit/color/background options

0.1.1 / 0.1.0

  • Initial version

Acknowledge

  • The base code and initial idea came from this Code Pen Demo by Michael Goodman.

License

Copyright (C) 2021 Jakub T. Jankiewicz
Released under MIT License