https://github.com/thedanielmoli/react-matrix-effect

A React component displaying a Matrix movie-like effect with a lot of options.
https://github.com/thedanielmoli/react-matrix-effect

component effect matrix movie npm npm-package react reactjs

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/thedanielmoli/react-matrix-effect
• Owner: TheDanielMoli
• License: apache-2.0
• Created: 2019-01-15T21:32:40.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-05-23T14:27:43.000Z (over 4 years ago)
• Last Synced: 2024-03-25T03:22:20.077Z (9 months ago)
• Topics: component, effect, matrix, movie, npm, npm-package, react, reactjs
• Language: JavaScript
• Size: 21.5 KB
• Stars: 15
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# react-matrix-effect [![npm][npm-image]][npm-url]

[npm-image]: https://img.shields.io/npm/v/react-matrix-effect.svg

[npm-url]: https://www.npmjs.com/package/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:

```javascript

import Matrix from 'react-matrix-effect';

```

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

```html

```

## 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

```html

```

```html

```

## 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](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/Sadkit/react-matrix-effect/tags). 

## Authors

* **Daniele Molinari** - [Sadkit](https://github.com/Sadkit)

## License

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