hacker-background

1"use client"
2 
3import React, { useEffect, useRef } from "react"
4 
5interface HackerBackgroundProps {
6  color?: string
7  fontSize?: number
8  className?: string
9  speed?: number
10}
11 
12export const HackerBackground: React.FC<HackerBackgroundProps> = ({
13  color = "#0F0",
14  fontSize = 14,
15  className = "",
16  speed = 1,
17}) => {
18  const canvasRef = useRef<HTMLCanvasElement>(null)
19 
20  useEffect(() => {
21    const canvas = canvasRef.current
22    if (!canvas) return
23 
24    const ctx = canvas.getContext("2d")
25    if (!ctx) return
26 
27    const resizeCanvas = () => {
28      canvas.width = window.innerWidth
29      canvas.height = window.innerHeight
30    }
31 
32    resizeCanvas()
33    window.addEventListener("resize", resizeCanvas)
34 
35    let animationFrameId: number
36 
37    const columns = Math.floor(canvas.width / fontSize)
38    const drops: number[] = new Array(columns).fill(1)
39 
40    const chars =
41      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()_+"
42 
43    let lastTime = 0
44    const interval = 33 // ~30 fps
45 
46    const draw = (currentTime: number) => {
47      animationFrameId = requestAnimationFrame(draw)
48 
49      if (currentTime - lastTime < interval) return
50      lastTime = currentTime
51 
52      ctx.fillStyle = "rgba(0, 0, 0, 0.05)"
53      ctx.fillRect(0, 0, canvas.width, canvas.height)
54 
55      ctx.fillStyle = color
56      ctx.font = `${fontSize}px monospace`
57 
58      for (let i = 0; i < drops.length; i++) {
59        const text = chars[Math.floor(Math.random() * chars.length)]
60        ctx.fillText(text, i * fontSize, drops[i] * fontSize)
61 
62        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
63          drops[i] = 0
64        }
65        drops[i] += speed // Use the speed prop to control fall rate
66      }
67    }
68 
69    animationFrameId = requestAnimationFrame(draw)
70 
71    return () => {
72      window.removeEventListener("resize", resizeCanvas)
73      cancelAnimationFrame(animationFrameId)
74    }
75  }, [color, fontSize, speed])
76 
77  return (
78    <canvas
79      ref={canvasRef}
80      className={`pointer-events-none ${className}`}
81      style={{
82        position: "absolute",
83        top: 0,
84        left: 0,
85        width: "100%",
86        height: "100%",
87      }}
88    />
89  )
90}