{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cursor-card",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/ui/cursor-card.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { motion, useMotionValue, useSpring, AnimatePresence } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CursorCardProps {\n  children: React.ReactNode;\n  image: string;\n  description: string;\n  href?: string;\n  className?: string;\n}\n\nexport function CursorCard({ children, image, description, href = \"#\", className }: CursorCardProps) {\n  const [isHovered, setIsHovered] = useState(false);\n  const [mounted, setMounted] = useState(false);\n\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const springConfig = { damping: 25, stiffness: 300 };\n  const springX = useSpring(x, springConfig);\n  const springY = useSpring(y, springConfig);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    x.set(e.clientX - 120); // Center horizontally (width 240 / 2)\n    y.set(e.clientY + 20);  // Offset vertically slightly below cursor\n  };\n\n  return (\n    <>\n      <a\n        href={href}\n        className={cn(\n          \"relative inline-block font-bold text-neutral-900 dark:text-neutral-100 transition-colors\",\n          \"hover:bg-orange-100 dark:hover:bg-orange-900/40 rounded px-1 -mx-1\",\n          className\n        )}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onMouseMove={handleMouseMove}\n      >\n        {children}\n      </a>\n\n      {mounted && typeof document !== \"undefined\" && createPortal(\n        <AnimatePresence>\n          {isHovered && (\n            <motion.div\n              initial={{ opacity: 0, scale: 0.8 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.8 }}\n              transition={{ duration: 0.15, ease: \"easeOut\" }}\n              style={{\n                x: springX,\n                y: springY,\n              }}\n              className={cn(\n                \"fixed top-0 left-0 pointer-events-none z-50 w-[240px]\",\n                \"bg-white dark:bg-neutral-900 p-3 shadow-2xl rounded-xl border border-neutral-200 dark:border-neutral-800\"\n              )}\n            >\n              {/* eslint-disable-next-line @next/next/no-img-element */}\n              <img src={image} alt=\"hover preview\" className=\"w-full h-auto rounded-md mb-3 object-cover\" />\n              <p className=\"text-sm text-neutral-600 dark:text-neutral-400 m-0 leading-relaxed\">\n                {description}\n              </p>\n            </motion.div>\n          )}\n        </AnimatePresence>,\n        document.body\n      )}\n    </>\n  );\n}\n\nexport default CursorCard;\n",
      "type": "registry:ui",
      "target": "components/ui/cursor-card.tsx"
    }
  ]
}