{"name":"tilt-card","type":"registry:component","files":[{"path":"tilt-card.tsx","type":"registry:component","target":"components/animated/tilt-card.tsx","content":"\"use client\";\n\nimport { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring } from \"motion/react\";\nimport { useRef, type ReactNode } from \"react\";\nimport { SPRING_MOUSE } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/hooks/use-hover-capable\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface TiltCardProps {\n  children: ReactNode;\n  max?: number;\n  glare?: boolean;\n  className?: string;\n}\n\nexport function TiltCard({ children, max = 12, glare = true, className }: TiltCardProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const reduce = useReducedMotion();\n  const canHover = useHoverCapable();\n  // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion.\n  const enabled = !reduce && canHover;\n  const rx = useMotionValue(0);\n  const ry = useMotionValue(0);\n  const gx = useMotionValue(50);\n  const gy = useMotionValue(50);\n\n  const srx = useSpring(rx, SPRING_MOUSE);\n  const sry = useSpring(ry, SPRING_MOUSE);\n\n  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const el = ref.current;\n    if (!el || !enabled) return;\n    const rect = el.getBoundingClientRect();\n    const px = (e.clientX - rect.left) / rect.width;\n    const py = (e.clientY - rect.top) / rect.height;\n    ry.set((px - 0.5) * max);\n    rx.set((0.5 - py) * max);\n    gx.set(px * 100);\n    gy.set(py * 100);\n  };\n\n  const onLeave = () => {\n    rx.set(0);\n    ry.set(0);\n  };\n\n  const transform = useMotionTemplate`perspective(1000px) rotateX(${srx}deg) rotateY(${sry}deg)`;\n  const glareBg = useMotionTemplate`radial-gradient(circle at ${gx}% ${gy}%, var(--foreground), transparent 50%)`;\n\n  return (\n    <motion.div\n      ref={ref}\n      onMouseMove={onMove}\n      onMouseLeave={onLeave}\n      style={{ transform, transformStyle: \"preserve-3d\" }}\n      className={cn(\"relative overflow-hidden rounded-2xl will-change-transform\", className)}\n    >\n      {children}\n      {glare && enabled ? (\n        <motion.div\n          aria-hidden\n          style={{ background: glareBg }}\n          className=\"pointer-events-none absolute inset-0 opacity-15\"\n        />\n      ) : null}\n    </motion.div>\n  );\n}\n"}],"dependencies":["motion"],"registryDependencies":["https://www.honestui.com/r/ease.json","https://www.honestui.com/r/use-hover-capable.json"]}