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#!$^&456789ABC" | 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 |