{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "interactive-grid-background",
  "title": "Interactive Grid Background",
  "description": "A highly interactive, mouse-sensitive grid background.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/chamaac/interactive-grid/interactive-grid-background.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface InteractiveGridBackgroundProps\n  extends React.HTMLProps<HTMLDivElement> {\n  gridGap?: number;\n  dotSize?: number;\n  color?: string;\n  highlightColor?: string;\n  radius?: number;\n}\n\nexport function InteractiveGridBackground({\n  className,\n  children,\n  gridGap = 40,\n  dotSize = 1.5,\n  color = \"#737373\", // zinc-700\n  highlightColor = \"#FFFF00\",\n  radius = 300,\n  ...props\n}: InteractiveGridBackgroundProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const mouseRef = useRef({ x: -1000, y: -1000 });\n  const requestRef = useRef<number | undefined>(undefined);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    const container = containerRef.current;\n    if (!canvas || !container) return;\n\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return;\n\n    // Mouse move handler\n    const onMouseMove = (e: MouseEvent) => {\n      const rect = container.getBoundingClientRect();\n      mouseRef.current = {\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      };\n    };\n\n    const onMouseLeave = () => {\n      mouseRef.current = { x: -1000, y: -1000 };\n    };\n\n    container.addEventListener(\"mousemove\", onMouseMove);\n    container.addEventListener(\"mouseleave\", onMouseLeave);\n\n    const resize = () => {\n      canvas.width = container.clientWidth;\n      canvas.height = container.clientHeight;\n    };\n    resize();\n    window.addEventListener(\"resize\", resize);\n\n    const animate = () => {\n      if (!ctx || !canvas) return;\n      const width = canvas.width;\n      const height = canvas.height;\n\n      ctx.clearRect(0, 0, width, height);\n\n      // Draw grid dots\n      for (let x = 0; x < width; x += gridGap) {\n        for (let y = 0; y < height; y += gridGap) {\n          // Distance to mouse\n          const dx = x - mouseRef.current.x;\n          const dy = y - mouseRef.current.y;\n          const dist = Math.sqrt(dx * dx + dy * dy);\n\n          // Base state\n          let currentSize = dotSize;\n          let currentAlpha = 0.5;\n          let currentColor = color;\n\n          // Interaction\n          if (dist < radius) {\n            const ratio = 1 - dist / radius;\n            currentSize = dotSize + ratio * 2; // Scale up\n            currentAlpha = 0.5 + ratio * 0.5;\n\n            // We can't easily interpolate hex in canvas without parsing,\n            // so we'll just switch color or rely on opacity.\n            // For a premium feel, let's use the highlight color when very close\n            if (ratio > 0.5) {\n              currentColor = highlightColor;\n            }\n          }\n\n          ctx.beginPath();\n          ctx.arc(x, y, currentSize, 0, Math.PI * 2);\n\n          // Simple hex to rgba (approximate or just use globalAlpha)\n          // Let's assume input colors are hex.\n          // To support alpha, we set globalAlpha.\n          ctx.fillStyle = currentColor;\n          ctx.globalAlpha = currentAlpha;\n          ctx.fill();\n          ctx.globalAlpha = 1.0;\n        }\n      }\n\n      requestRef.current = requestAnimationFrame(animate);\n    };\n\n    animate();\n\n    return () => {\n      window.removeEventListener(\"resize\", resize);\n      container.removeEventListener(\"mousemove\", onMouseMove);\n      container.removeEventListener(\"mouseleave\", onMouseLeave);\n      if (requestRef.current) cancelAnimationFrame(requestRef.current);\n    };\n  }, [gridGap, dotSize, color, highlightColor, radius]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"relative w-full h-screen bg-black overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <canvas ref={canvasRef} className=\"absolute inset-0 z-0\" />\n      <div className=\"relative z-10 w-full h-full pointer-events-none\">\n        {children}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}