{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "creepy-button",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/ui/creepy-button.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useRef, useState } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface CreepyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    children: React.ReactNode;\r\n    /**\r\n     * Optional custom class for the button container\r\n     */\r\n    className?: string;\r\n    /**\r\n     * Optional custom class for the button cover (the visible part)\r\n     */\r\n    coverClassName?: string;\r\n}\r\n\r\ntype Coords = {\r\n    x: number;\r\n    y: number;\r\n};\r\n\r\nexport const CreepyButton = ({\r\n    children,\r\n    className,\r\n    coverClassName,\r\n    onClick,\r\n    ...props\r\n}: CreepyButtonProps) => {\r\n    const eyesRef = useRef<HTMLSpanElement>(null);\r\n    const [eyeCoords, setEyeCoords] = useState<Coords>({ x: 0, y: 0 });\r\n    const [isHovered, setIsHovered] = useState(false);\r\n\r\n    const updateEyes = (e: React.MouseEvent | React.TouchEvent) => {\r\n        const userEvent =\r\n            \"touches\" in e ? (e as React.TouchEvent).touches[0] : (e as React.MouseEvent);\r\n\r\n        if (!eyesRef.current) return;\r\n\r\n        // get the center of the eyes container\r\n        const eyesRect = eyesRef.current.getBoundingClientRect();\r\n        const eyesCenter = {\r\n            x: eyesRect.left + eyesRect.width / 2,\r\n            y: eyesRect.top + eyesRect.height / 2,\r\n        };\r\n\r\n        // cursor position\r\n        const cursor = {\r\n            x: userEvent.clientX,\r\n            y: userEvent.clientY,\r\n        };\r\n\r\n        // calculate the eye angle\r\n        const dx = cursor.x - eyesCenter.x;\r\n        const dy = cursor.y - eyesCenter.y;\r\n        const angle = Math.atan2(-dy, dx) + Math.PI / 2;\r\n\r\n        // pupil distance from the eye center\r\n        const visionRangeX = 180; // Max distance to look horizontally\r\n        const visionRangeY = 75; // Max distance to look vertically\r\n        const distance = Math.hypot(dx, dy);\r\n\r\n        // Limit the movement so pupils don't go too far\r\n        // We normalize the distance influence\r\n        const x = (Math.sin(angle) * Math.min(distance, visionRangeX)) / visionRangeX;\r\n        const y = (Math.cos(angle) * Math.min(distance, visionRangeY)) / visionRangeY;\r\n\r\n        setEyeCoords({ x, y });\r\n    };\r\n\r\n    // Reset eyes when mouse leaves\r\n    const resetEyes = () => {\r\n        setEyeCoords({ x: 0, y: 0 });\r\n        setIsHovered(false);\r\n    };\r\n\r\n    const pupilStyle = {\r\n        transform: `translate(calc(-50% + ${eyeCoords.x * 50}%), calc(-50% + ${eyeCoords.y * 50}%))`,\r\n    };\r\n\r\n    return (\r\n        <button\r\n            className={cn(\r\n                \"relative min-w-[9em] rounded-xl bg-black cursor-pointer outline-none select-none group tap-highlight-transparent\",\r\n                \"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-400\",\r\n                className\r\n            )}\r\n            onClick={onClick}\r\n            onMouseMove={(e) => {\r\n                updateEyes(e);\r\n                setIsHovered(true);\r\n            }}\r\n            onTouchMove={updateEyes}\r\n            onMouseLeave={resetEyes}\r\n            onFocus={() => setIsHovered(true)}\r\n            onBlur={() => setIsHovered(false)}\r\n            {...props}\r\n        >\r\n            {/* Eyes Container */}\r\n            <span\r\n                ref={eyesRef}\r\n                className=\"absolute flex items-center gap-[0.375em] right-[1em] bottom-[0.5em] h-[0.75em] z-0 pointer-events-none\"\r\n            >\r\n                {/* Left Eye */}\r\n                <motion.span\r\n                    className=\"relative w-[0.75em] bg-white rounded-full overflow-hidden\"\r\n                    animate={{ height: [\"0.75em\", \"0.75em\", \"0em\", \"0.75em\"] }}\r\n                    transition={{\r\n                        duration: 3,\r\n                        times: [0, 0.92, 0.96, 1],\r\n                        repeat: Infinity,\r\n                        ease: \"linear\",\r\n                    }}\r\n                >\r\n                    <span\r\n                        className=\"absolute top-1/2 left-1/2 w-[0.375em] h-[0.375em] bg-black rounded-full transition-transform duration-75 ease-out\"\r\n                        style={pupilStyle}\r\n                    />\r\n                </motion.span>\r\n                {/* Right Eye */}\r\n                <motion.span\r\n                    className=\"relative w-[0.75em] bg-white rounded-full overflow-hidden\"\r\n                    animate={{ height: [\"0.75em\", \"0.75em\", \"0em\", \"0.75em\"] }}\r\n                    transition={{\r\n                        duration: 3,\r\n                        times: [0, 0.92, 0.96, 1],\r\n                        repeat: Infinity,\r\n                        ease: \"linear\",\r\n                    }}\r\n                >\r\n                    <span\r\n                        className=\"absolute top-1/2 left-1/2 w-[0.375em] h-[0.375em] bg-black rounded-full transition-transform duration-75 ease-out\"\r\n                        style={pupilStyle}\r\n                    />\r\n                </motion.span>\r\n            </span>\r\n\r\n            {/* Button Cover */}\r\n            <motion.span\r\n                className={cn(\r\n                    \"absolute inset-0 block rounded-xl bg-blue-500 text-white font-bold tracking-wider\",\r\n                    \"shadow-[inset_0_0_0_0.125em_rgba(0,0,0,1)]\",\r\n                    \"flex items-center justify-center px-4 py-2\",\r\n                    \"origin-[1.25em_50%]\",\r\n                    coverClassName\r\n                )}\r\n                animate={{\r\n                    rotate: isHovered ? -12 : 0,\r\n                }}\r\n                transition={{\r\n                    type: \"spring\",\r\n                    stiffness: 300,\r\n                    damping: 20,\r\n                    mass: 0.8,\r\n                }}\r\n            >\r\n                {children}\r\n            </motion.span>\r\n\r\n            {/* Invisible placeholder to maintain size since cover is absolute */}\r\n            <span className=\"block opacity-0 px-4 py-2 font-bold tracking-wider min-w-[9em]\">\r\n                {children}\r\n            </span>\r\n        </button>\r\n    );\r\n};\r\n\r\nexport default CreepyButton;\r\n",
      "type": "registry:ui",
      "target": "components/ui/creepy-button.tsx"
    }
  ]
}