{
  "name": "magnet-lines",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [],
  "description": "A grid of lines that rotate to face the cursor, creating a magnetic field effect.",
  "files": [
    {
      "path": "components/ui/magnet-lines.tsx",
      "content": "\"use client\";\n\nimport React, { useRef, useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\n\ninterface MagnetLinesProps {\n    rows?: number;\n    columns?: number;\n    containerSize?: string;\n    lineColor?: string;\n    lineWidth?: string;\n    lineHeight?: string;\n    baseAngle?: number;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nexport function MagnetLines({\n    rows = 9,\n    columns = 9,\n    containerSize = \"80vmin\",\n    lineColor = \"#efefef\",\n    lineWidth = \"1vmin\",\n    lineHeight = \"6vmin\",\n    baseAngle = 0,\n    className = \"\",\n    style = {},\n}: MagnetLinesProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // Spans the grid\n    const total = rows * columns;\n    const spans = Array.from({ length: total }, (_, i) => i);\n\n    return (\n        <div\n            ref={containerRef}\n            className={`relative grid place-items-center ${className}`}\n            style={{\n                gridTemplateColumns: `repeat(${columns}, 1fr)`,\n                gridTemplateRows: `repeat(${rows}, 1fr)`,\n                width: containerSize,\n                height: containerSize,\n                ...style,\n            }}\n        >\n            {spans.map((i) => (\n                <Line\n                    key={i}\n                    containerRef={containerRef}\n                    lineColor={lineColor}\n                    lineWidth={lineWidth}\n                    lineHeight={lineHeight}\n                    baseAngle={baseAngle}\n                />\n            ))}\n        </div>\n    );\n}\n\nfunction Line({\n    containerRef,\n    lineColor,\n    lineWidth,\n    lineHeight,\n    baseAngle,\n}: {\n    containerRef: React.RefObject<HTMLDivElement | null>;\n    lineColor: string;\n    lineWidth: string;\n    lineHeight: string;\n    baseAngle: number;\n}) {\n    const lineRef = useRef<HTMLDivElement>(null);\n    const [rotate, setRotate] = useState(baseAngle);\n\n    useEffect(() => {\n        const updateRotation = (e: MouseEvent) => {\n            if (!lineRef.current || !containerRef.current) return;\n\n            const rect = lineRef.current.getBoundingClientRect();\n            const centerX = rect.left + rect.width / 2;\n            const centerY = rect.top + rect.height / 2;\n\n            const mouseX = e.clientX;\n            const mouseY = e.clientY;\n\n            const distanceX = mouseX - centerX;\n            const distanceY = mouseY - centerY;\n\n            const angle = (Math.atan2(distanceY, distanceX) * 180) / Math.PI;\n\n            setRotate(angle + baseAngle);\n        };\n\n        window.addEventListener(\"mousemove\", updateRotation);\n        return () => window.removeEventListener(\"mousemove\", updateRotation);\n    }, [baseAngle, containerRef]);\n\n    return (\n        <motion.div\n            ref={lineRef}\n            animate={{ rotate }}\n            transition={{ type: \"spring\", damping: 20, stiffness: 300 }}\n            style={{\n                width: lineWidth,\n                height: lineHeight,\n                backgroundColor: lineColor,\n            }}\n        />\n    );\n}\n",
      "type": "registry:ui"
    }
  ]
}