gitmyhub

matrix

JavaScript ★ 3.8k updated 1y ago

matrix (web-based green code rain, made with love)

A browser-based recreation of the green falling code effect from the Matrix films, built with WebGL for smooth hardware-accelerated rendering, with dozens of visual variants controllable via URL parameters.

JavaScriptWebGLsetup: easycomplexity 1/5

This project is a web-based recreation of the green falling code effect from the Matrix film franchise, the visual that shows columns of glowing characters streaming down a screen like rain. It runs entirely in the browser using WebGL, a technology for hardware-accelerated graphics on the web, and requires no installation or backend. You can open it by visiting the live site or running a local web server.

The author put significant effort into accuracy. The glyphs used in the effect were sourced from an archived Flash file from an official Matrix game website, not just approximated from katakana characters as many similar projects do. When the Matrix Resurrections film introduced 135 new symbols in 2021, the author recovered them from movie trailers and reverse-engineered additional ones from marketing materials before the film even released.

The project includes many variants reachable through URL parameters: classic green rain, 3D mode, mirror mode with ripple effects on click, modes styled after specific scenes from Reloaded and Revolutions, and visual variants like Nightmare Matrix, Paradise Matrix, and a Pride flag color version. You can also supply a custom image URL to render the rain effect over a photo, or customize colors through palette parameters.

Lilly Wachowski, co-director of the Matrix films, commented on the project when it was featured in Vice Motherboard in September 2022.

Two free fonts used in the effect are available for download from the repository: the classic Matrix typeface and the Resurrections typeface, both in TrueType format. The project is licensed as open source and welcomes contributions.

Where it fits