Interactive Grid Background

1"use client";
2import { cn } from "@/lib/utils";
3import { useCallback, useEffect, useRef, useState } from "react";
4 
5type MaskPosition = "top" | "bottom" | "center" | "none";
6 
7interface Background05Props {
8  className?: string;
9  gridSize?: number;
10  hoverColor?: string;
11  borderColor?: string;
12  traceDelay?: number;
13  mask?: MaskPosition;
14}
15 
16const getMaskStyle = (mask: MaskPosition): string => {
17  switch (mask) {
18    case "top":
19      return "radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)";
20    case "bottom":
21      return "radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)";
22    case "center":
23      return "radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)";
24    case "none":
25    default:
26      return "none";
27  }
28};
29 
30const Background05 = ({
31  className,
32  gridSize = 60,
33  hoverColor = "var(--accent)",
34  borderColor = "var(--border)",
35  traceDelay = 200,
36  mask = "none",
37}: Background05Props) => {
38  const containerRef = useRef<HTMLDivElement>(null);
39  const [grid, setGrid] = useState({ cols: 0, rows: 0, cellWidth: 0, cellHeight: 0 });
40  const [hoveredCells, setHoveredCells] = useState<Set<number>>(new Set());
41  const timeoutsRef = useRef<Map<number, NodeJS.Timeout>>(new Map());
42  const maskStyle = getMaskStyle(mask);
43 
44  useEffect(() => {
45    const updateGrid = () => {
46      if (!containerRef.current) return;
47      const { width, height } = containerRef.current.getBoundingClientRect();
48      const cols = Math.round(width / gridSize);
49      const rows = Math.round(height / gridSize);
50      setGrid({
51        cols,
52        rows,
53        cellWidth: width / cols,
54        cellHeight: height / rows,
55      });
56    };
57 
58    updateGrid();
59    window.addEventListener("resize", updateGrid);
60    return () => window.removeEventListener("resize", updateGrid);
61  }, [gridSize]);
62 
63  useEffect(() => {
64    return () => {
65      timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
66    };
67  }, []);
68 
69  const handleMouseEnter = useCallback((index: number) => {
70    const existingTimeout = timeoutsRef.current.get(index);
71    if (existingTimeout) {
72      clearTimeout(existingTimeout);
73      timeoutsRef.current.delete(index);
74    }
75    setHoveredCells((prev) => new Set(prev).add(index));
76  }, []);
77 
78  const handleMouseLeave = useCallback(
79    (index: number) => {
80      const timeout = setTimeout(() => {
81        setHoveredCells((prev) => {
82          const next = new Set(prev);
83          next.delete(index);
84// … truncated