rdwz / react-matrix-effect

A React component displaying a Matrix movie-like effect with a lot of options.

react-matrix-effect

react-matrix-effect provides a Matrix React component for a movie-like animation.

Installation

In order to use the component, you will have to install it first via npm:

npm install --save react-matrix-effect 

Usage

Then, import it in your React app:

import Matrix from 'react-matrix-effect';

Now you can use the component directly inside your Babel HTML template:

<Matrix/>

Options

You may also pass some options to the component:

• width for the canvas width (number)
• height for the canvas height (number)
• fullscreen (boolean, overrides width and height)
• colSize (number, width of a column)
• fontSize (number, font size in pixels)
• color (string, hex font color)
• frequency (number, float describing frequency of the characters)
• speed (number)
• zIndex (number)
• style (object, passed to the wrapping div)

Examples

<Matrix width={1280} height={720} speed={2} />

<Matrix fullscreen={true} color={'#FF0000'}  />

Default Options

• width 640px
• height 480px
• fullscreen false
• colSize 11
• fontSize 13.5
• color '#00cc33'
• frequency 0.005
• speed 1.6

Contributing

Feel free to open an Issue or send me a direct message.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Daniele Molinari - Sadkit

License

This project is licensed under the Apache License 2.0 - see the LICENSE.md file for details.