react-mdr

Matrix Digital Rain Effect for ReactJS ·

React Matrix Digital Rain Effect gives you your favorite Matrix movie screen effect in the form of a React component. The source originates from an October 2021 blog article written by Adam Nagy, "Matrix raining code effect using JavaScript".

• Lightweight: The active code in this repository is less than 100 lines. It uses a canvas for rendering, which should ensure that it is both performant and that it works in most browsers.
• Use Anywhere: The <MatrixRainingLetters /> component tag can be placed anywhere in your jsx return function. It accepts custom classes and responds normally to CSS styling.

Screenshot

Screencast

https://user-images.githubusercontent.com/1178819/142886923-3b558b62-9695-42f0-8efc-fc457d361a83.mp4

Installation

npm i react-mdr

Code Sample

import { MatrixRainingLetters } from "react-mdr";

function Foo() {
    return (
        <React.Fragment>
            <MatrixRainingLetters key="foo-bar" custom_class="m-0 p-0" />
        </React.Fragment>
    );
}

Contributing

Development of React Matrix Digital Rain Effect happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. You can improve it by sending pull requests to this repository. Review this guide for the gist of our development process, how to propose bugfixes and improvements.

License

React Matrix Digital Rain Effect is MIT licensed.