{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tilt-card",
  "title": "Tilt Card",
  "description": "A card that tilts toward the cursor with a 3D perspective effect.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/wise-ui/components/tilt-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  motion,\n  useMotionValue,\n  useSpring,\n  useTransform,\n} from \"motion/react\"\nimport { cn } from \"@/registry/wise-ui/lib/utils\"\n\ninterface TiltCardProps {\n  tiltMax?: number\n  glare?: boolean\n  glareOpacity?: number\n  scale?: number\n  perspective?: number\n  children: React.ReactNode\n  className?: string\n}\n\nconst springConfig = { stiffness: 300, damping: 20, mass: 0.5 }\n\nfunction TiltCard({\n  tiltMax = 15,\n  glare = true,\n  glareOpacity = 0.15,\n  scale = 1.02,\n  perspective = 1000,\n  children,\n  className,\n}: TiltCardProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  const rawX = useMotionValue(0)\n  const rawY = useMotionValue(0)\n  const rawScale = useMotionValue(1)\n\n  const rotateX = useSpring(rawX, springConfig)\n  const rotateY = useSpring(rawY, springConfig)\n  const springScale = useSpring(rawScale, springConfig)\n\n  const glareX = useMotionValue(50)\n  const glareY = useMotionValue(50)\n\n  const glareBackground = useTransform(\n    [glareX, glareY],\n    ([x, y]) =>\n      `radial-gradient(circle at ${x}% ${y}%, rgba(255,255,255,${glareOpacity}), transparent 60%)`\n  )\n\n  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {\n    const el = ref.current\n    if (!el) return\n    const rect = el.getBoundingClientRect()\n    const centerX = rect.left + rect.width / 2\n    const centerY = rect.top + rect.height / 2\n    const offsetX = (e.clientX - centerX) / (rect.width / 2)\n    const offsetY = (e.clientY - centerY) / (rect.height / 2)\n\n    rawX.set(offsetY * tiltMax)\n    rawY.set(-offsetX * tiltMax)\n\n    // Glare follows mouse position as percentage\n    glareX.set(((e.clientX - rect.left) / rect.width) * 100)\n    glareY.set(((e.clientY - rect.top) / rect.height) * 100)\n  }\n\n  function handleMouseEnter() {\n    rawScale.set(scale)\n  }\n\n  function handleMouseLeave() {\n    rawX.set(0)\n    rawY.set(0)\n    rawScale.set(1)\n    glareX.set(50)\n    glareY.set(50)\n  }\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn(\"relative\", className)}\n      style={{\n        perspective,\n        transformStyle: \"preserve-3d\",\n        rotateX,\n        rotateY,\n        scale: springScale,\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {children}\n      {glare && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 rounded-[inherit] z-10\"\n          style={{ background: glareBackground }}\n        />\n      )}\n    </motion.div>\n  )\n}\nTiltCard.displayName = \"TiltCard\"\n\nexport { TiltCard }\nexport type { TiltCardProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}