{
  "name": "comet-card",
  "type": "registry:ui",
  "files": [
    {
      "path": "components/ui/comet-card.tsx",
      "content": "\"use client\";\nimport React, { useRef } from \"react\";\nimport {\n  motion,\n  useMotionValue,\n  useSpring,\n  useTransform,\n  useMotionTemplate,\n} from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport const CometCard = ({\n  rotateDepth = 17.5,\n  translateDepth = 20,\n  className,\n  children,\n}: {\n  rotateDepth?: number;\n  translateDepth?: number;\n  className?: string;\n  children: React.ReactNode;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const mouseXSpring = useSpring(x);\n  const mouseYSpring = useSpring(y);\n\n  const rotateX = useTransform(\n    mouseYSpring,\n    [-0.5, 0.5],\n    [`-${rotateDepth}deg`, `${rotateDepth}deg`],\n  );\n  const rotateY = useTransform(\n    mouseXSpring,\n    [-0.5, 0.5],\n    [`${rotateDepth}deg`, `-${rotateDepth}deg`],\n  );\n\n  const translateX = useTransform(\n    mouseXSpring,\n    [-0.5, 0.5],\n    [`-${translateDepth}px`, `${translateDepth}px`],\n  );\n  const translateY = useTransform(\n    mouseYSpring,\n    [-0.5, 0.5],\n    [`${translateDepth}px`, `-${translateDepth}px`],\n  );\n\n  const glareX = useTransform(mouseXSpring, [-0.5, 0.5], [0, 100]);\n  const glareY = useTransform(mouseYSpring, [-0.5, 0.5], [0, 100]);\n\n  const glareBackground = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0) 80%)`;\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!ref.current) return;\n\n    const rect = ref.current.getBoundingClientRect();\n\n    const width = rect.width;\n    const height = rect.height;\n\n    const mouseX = e.clientX - rect.left;\n    const mouseY = e.clientY - rect.top;\n\n    const xPct = mouseX / width - 0.5;\n    const yPct = mouseY / height - 0.5;\n\n    x.set(xPct);\n    y.set(yPct);\n  };\n\n  const handleMouseLeave = () => {\n    x.set(0);\n    y.set(0);\n  };\n\n  return (\n    <div className={cn(\"perspective-distant transform-3d\", className)}>\n      <motion.div\n        ref={ref}\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        style={{\n          rotateX,\n          rotateY,\n          translateX,\n          translateY,\n          boxShadow:\n            \"rgba(0, 0, 0, 0.01) 0px 520px 146px 0px, rgba(0, 0, 0, 0.04) 0px 333px 133px 0px, rgba(0, 0, 0, 0.26) 0px 83px 83px 0px, rgba(0, 0, 0, 0.29) 0px 21px 46px 0px\",\n        }}\n        initial={{ scale: 1, z: 0 }}\n        whileHover={{\n          scale: 1.05,\n          z: 50,\n          transition: { duration: 0.2 },\n        }}\n        className=\"relative rounded-2xl\"\n      >\n        {children}\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 z-50 h-full w-full rounded-[16px] mix-blend-overlay\"\n          style={{\n            background: glareBackground,\n            opacity: 0.6,\n          }}\n          transition={{ duration: 0.2 }}\n        />\n      </motion.div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/comet-card.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Comet Card"
}