Matrix Code Rain renders the classic falling green character columns on an HTML canvas, with katakana, digits, and symbols cycling as they drop. Density, fall speed, character set, and colors are props, and it scales to fill any container or the whole page background. Built with React and Tailwind CSS. Works well behind hero sections, on hacker themed landing pages, and anywhere you want an instantly recognizable retro terminal mood.
Installation
Usage
import { MatrixCodeRain } from "@/components/ui/matrix-code-rain";export default function MyComponent() {
return (
<div className="relative h-[400px] w-full overflow-hidden">
<MatrixCodeRain />
{/* Optional overlay content */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="bg-black/50 p-6 rounded-lg text-white">
<h1 className="text-3xl font-bold">Your Content Here</h1>
</div>
</div>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "#00ff00" | The color of the matrix characters |
charset | string | "0123#!$^&456789ABCDEFRLY" | The set of characters to display in the animation |
fontSize | number | 16 | The size of the characters in pixels |
fps | number | 20 | Frames per second - controls animation speed |
opacity | number | 0.05 | The opacity of the fade effect (0-1) |
fullScreen | boolean | false | Whether to display the effect as a fullscreen background |
width | string | "100%" | The width of the container when not in fullscreen mode |
height | string | "400px" | The height of the container when not in fullscreen mode |