Skip to content

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

License

Notifications You must be signed in to change notification settings

TheDanielMoli/react-matrix-effect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-matrix-effect npm

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

Matrix Effect Screenshot

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

License

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