{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "background-05",
  "title": "Interactive Grid Background",
  "description": "Interactive grid background where individual cells highlight on hover with a configurable glow color. Use it behind hero sections or interactive showcases to add a playful, dynamic feel to an otherwise static layout.",
  "files": [
    {
      "path": "src/registry/blocks/background-05/background.tsx",
      "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\ntype MaskPosition = \"top\" | \"bottom\" | \"center\" | \"none\";\n\ninterface Background05Props {\n  className?: string;\n  gridSize?: number;\n  hoverColor?: string;\n  borderColor?: string;\n  traceDelay?: number;\n  mask?: MaskPosition;\n}\n\nconst getMaskStyle = (mask: MaskPosition): string => {\n  switch (mask) {\n    case \"top\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)\";\n    case \"bottom\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)\";\n    case \"center\":\n      return \"radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)\";\n    case \"none\":\n    default:\n      return \"none\";\n  }\n};\n\nconst Background05 = ({\n  className,\n  gridSize = 60,\n  hoverColor = \"var(--accent)\",\n  borderColor = \"var(--border)\",\n  traceDelay = 200,\n  mask = \"none\",\n}: Background05Props) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [grid, setGrid] = useState({ cols: 0, rows: 0, cellWidth: 0, cellHeight: 0 });\n  const [hoveredCells, setHoveredCells] = useState<Set<number>>(new Set());\n  const timeoutsRef = useRef<Map<number, NodeJS.Timeout>>(new Map());\n  const maskStyle = getMaskStyle(mask);\n\n  useEffect(() => {\n    const updateGrid = () => {\n      if (!containerRef.current) return;\n      const { width, height } = containerRef.current.getBoundingClientRect();\n      const cols = Math.round(width / gridSize);\n      const rows = Math.round(height / gridSize);\n      setGrid({\n        cols,\n        rows,\n        cellWidth: width / cols,\n        cellHeight: height / rows,\n      });\n    };\n\n    updateGrid();\n    window.addEventListener(\"resize\", updateGrid);\n    return () => window.removeEventListener(\"resize\", updateGrid);\n  }, [gridSize]);\n\n  useEffect(() => {\n    return () => {\n      timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));\n    };\n  }, []);\n\n  const handleMouseEnter = useCallback((index: number) => {\n    const existingTimeout = timeoutsRef.current.get(index);\n    if (existingTimeout) {\n      clearTimeout(existingTimeout);\n      timeoutsRef.current.delete(index);\n    }\n    setHoveredCells((prev) => new Set(prev).add(index));\n  }, []);\n\n  const handleMouseLeave = useCallback(\n    (index: number) => {\n      const timeout = setTimeout(() => {\n        setHoveredCells((prev) => {\n          const next = new Set(prev);\n          next.delete(index);\n          return next;\n        });\n        timeoutsRef.current.delete(index);\n      }, traceDelay);\n      timeoutsRef.current.set(index, timeout);\n    },\n    [traceDelay],\n  );\n\n  const totalCells = grid.cols * grid.rows;\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"absolute inset-0 z-0 h-full w-full overflow-hidden\",\n        className,\n      )}\n      style={{\n        ...(mask !== \"none\" && {\n          maskImage: maskStyle,\n          WebkitMaskImage: maskStyle,\n        }),\n      }}\n    >\n      <div\n        className=\"grid h-full w-full\"\n        style={{\n          gridTemplateColumns: `repeat(${grid.cols}, ${grid.cellWidth}px)`,\n          gridTemplateRows: `repeat(${grid.rows}, ${grid.cellHeight}px)`,\n        }}\n      >\n        {Array.from({ length: totalCells }).map((_, i) => (\n          <div\n            key={i}\n            onMouseEnter={() => handleMouseEnter(i)}\n            onMouseLeave={() => handleMouseLeave(i)}\n            className=\"transition-all duration-300 ease-out z-99 border \"\n            style={{\n              borderRight: `1px solid ${borderColor}`,\n              borderBottom: `1px solid ${borderColor}`,\n              backgroundColor: hoveredCells.has(i) ? hoverColor : \"transparent\",\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Background05;\n",
      "type": "registry:component",
      "target": "components/background-05.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/background-05.webp",
    "imageDark": "/r/previews/background-05-dark.webp"
  },
  "categories": [
    "background"
  ],
  "type": "registry:block"
}