Flickering Grid

1"use client"
2 
3import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7interface FlickeringGridProps extends React.HTMLAttributes<HTMLDivElement> {
8  squareSize?: number
9  gridGap?: number
10  flickerChance?: number
11  color?: string
12  width?: number
13  height?: number
14  className?: string
15  maxOpacity?: number
16}
17 
18export const FlickeringGrid: React.FC<FlickeringGridProps> = ({
19  squareSize = 4,
20  gridGap = 6,
21  flickerChance = 0.3,
22  color = "rgb(0, 0, 0)",
23  width,
24  height,
25  className,
26  maxOpacity = 0.3,
27  ...props
28}) => {
29  const canvasRef = useRef<HTMLCanvasElement>(null)
30  const containerRef = useRef<HTMLDivElement>(null)
31  const [isInView, setIsInView] = useState(false)
32  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })
33 
34  const memoizedColor = useMemo(() => {
35    const toRGBA = (color: string) => {
36      if (typeof window === "undefined") {
37        return `rgba(0, 0, 0,`
38      }
39      const canvas = document.createElement("canvas")
40      canvas.width = canvas.height = 1
41      const ctx = canvas.getContext("2d")
42      if (!ctx) return "rgba(255, 0, 0,"
43      ctx.fillStyle = color
44      ctx.fillRect(0, 0, 1, 1)
45      const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)
46      return `rgba(${r}, ${g}, ${b},`
47    }
48    return toRGBA(color)
49  }, [color])
50 
51  const setupCanvas = useCallback(
52    (canvas: HTMLCanvasElement, width: number, height: number) => {
53      const dpr = window.devicePixelRatio || 1
54      canvas.width = width * dpr
55      canvas.height = height * dpr
56      canvas.style.width = `${width}px`
57      canvas.style.height = `${height}px`
58      const cols = Math.ceil(width / (squareSize + gridGap))
59      const rows = Math.ceil(height / (squareSize + gridGap))
60 
61      const squares = new Float32Array(cols * rows)
62      for (let i = 0; i < squares.length; i++) {
63        squares[i] = Math.random() * maxOpacity
64      }
65 
66      return { cols, rows, squares, dpr }
67    },
68    [squareSize, gridGap, maxOpacity]
69  )
70 
71  const updateSquares = useCallback(
72    (squares: Float32Array, deltaTime: number) => {
73      for (let i = 0; i < squares.length; i++) {
74        if (Math.random() < flickerChance * deltaTime) {
75          squares[i] = Math.random() * maxOpacity
76        }
77      }
78    },
79    [flickerChance, maxOpacity]
80  )
81 
82  const drawGrid = useCallback(
83    (
84      ctx: CanvasRenderingContext2D,
85      width: number,
86      height: number,
87      cols: number,
88// … truncated