matrix-rain

1"use client"
2 
3import { cn } from "@/lib/utils"
4import { useEffect, useRef } from "react"
5 
6interface MatrixRainProps {
7    className?: string
8    variant?: "default" | "cyan" | "rainbow"
9    width?: number
10    height?: number
11    fontSize?: number
12    speed?: number
13    fixedColor?: string
14}
15 
16export function MatrixRain({
17    className,
18    variant = "default",
19    width,
20    height,
21    fontSize = 16,
22    speed = 50,
23    fixedColor,
24}: MatrixRainProps) {
25    const canvasRef = useRef<HTMLCanvasElement>(null)
26 
27    useEffect(() => {
28        const canvas = canvasRef.current
29        if (!canvas) return
30 
31        const ctx = canvas.getContext("2d")
32        if (!ctx) return
33 
34        // If specific dimensions are provided, use them. Otherwise observe parent.
35        const resizeObserver = new ResizeObserver(() => {
36            if (!width && !height) {
37                canvas.width = canvas.offsetWidth
38                canvas.height = canvas.offsetHeight
39            }
40        })
41        resizeObserver.observe(canvas)
42 
43        // Initial size setup
44        if (width) canvas.width = width
45        if (height) canvas.height = height
46        if (!width && !height) {
47            canvas.width = canvas.offsetWidth
48            canvas.height = canvas.offsetHeight
49        }
50 
51        const w = canvas.width
52        const h = canvas.height
53 
54        // Columns config
55        const columns = Math.floor(w / fontSize)
56        const drops = new Array(columns).fill(1)
57 
58        // Character set: Katakana + Numbers
59        const chars = "ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ1234567890"
60 
61        let isDark = document.documentElement.classList.contains("dark")
62 
63        // Set default background based on theme immediately to avoid delay
64        const bg = isDark ? "#000000" : "#ffffff"
65 
66        ctx.fillStyle = bg
67        ctx.fillRect(0, 0, w, h)
68 
69        const draw = () => {
70            // Check theme state on every frame
71            const currentIsDark = document.documentElement.classList.contains("dark")
72 
73            // If theme changed, reset the background immediately
74            if (currentIsDark !== isDark) {
75                isDark = currentIsDark
76                ctx.fillStyle = isDark ? "#000000" : "#ffffff"
77                ctx.fillRect(0, 0, canvas.width, canvas.height)
78            }
79 
80            // Semi-transparent color for trail effect
81// … truncated