Matrix Code Rain

1"use client";
2import { cn } from "@/lib/utils";
3import React, { useEffect, useRef } from "react";
4 
5type MatrixCodeRainProps = {
6  color?: string;
7  charset?: string;
8  fontSize?: number;
9  fps?: number;
10  opacity?: number;
11  fullScreen?: boolean;
12  width?: string;
13  height?: string;
14};
15 
16export const MatrixCodeRain = ({
17  color = "#00ff00",
18  charset = "0123#!$^&456789ABCDEFRLY",
19  fontSize = 16,
20  fps = 20,
21  opacity = 0.05,
22  fullScreen = false,
23  width = "100%",
24  height = "400px",
25}: MatrixCodeRainProps) => {
26  const canvasRef = useRef<HTMLCanvasElement>(null);
27  const animationRef = useRef<number | null>(null);
28  const particlesRef = useRef<number[]>([]);
29 
30  useEffect(() => {
31    const canvas = canvasRef.current;
32    if (!canvas) return;
33 
34    const ctx = canvas.getContext("2d");
35    if (!ctx) return;
36 
37    let w = 0,
38      h = 0;
39    let lastFrameTime = 0;
40    const frameInterval = 1000 / fps;
41 
42    const resize = () => {
43      const container = canvas.parentElement;
44      if (!container) return;
45 
46      if (fullScreen) {
47        w = canvas.width = window.innerWidth;
48        h = canvas.height = window.innerHeight;
49      } else {
50        w = canvas.width = container.clientWidth;
51        h = canvas.height = container.clientHeight;
52      }
53 
54      particlesRef.current = new Array(Math.ceil(w / fontSize)).fill(0);
55    };
56 
57    const random = (items: string) =>
58      items[Math.floor(Math.random() * items.length)];
59 
60    const draw = (timestamp: number) => {
61      if (timestamp - lastFrameTime >= frameInterval) {
62        ctx.fillStyle = `rgba(0,0,0,${opacity})`;
63        ctx.fillRect(0, 0, w, h);
64        ctx.fillStyle = color;
65        ctx.font = `${fontSize}px monospace`;
66 
67        for (let i = 0; i < particlesRef.current.length; i++) {
68          const v = particlesRef.current[i];
69          ctx.fillText(random(charset), i * fontSize, v);
70          particlesRef.current[i] =
71            v >= h || v >= 10000 * Math.random() ? 0 : v + fontSize;
72        }
73 
74        lastFrameTime = timestamp;
75      }
76 
77      animationRef.current = requestAnimationFrame(draw);
78    };
79 
80    const handleResize = () => resize();
81 
82    window.addEventListener("resize", handleResize);
83    resize();
84    animationRef.current = requestAnimationFrame(draw);
85 
86    return () => {
87      window.removeEventListener("resize", handleResize);
88      if (animationRef.current) {
89        cancelAnimationFrame(animationRef.current);
90      }
91    };
92  }, [color, charset, fontSize, fps, opacity, fullScreen]);
93 
94// … truncated