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.

npm i react-mdr

import { MatrixRainingLetters } from "react-mdr";

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

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.

React Matrix Digital Rain Effect is MIT licensed.