{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tilt-card",
  "type": "registry:ui",
  "title": "Tilt Card",
  "description": "3D parallax tilt effect following mouse cursor.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/ui/hover/tilt-card.tsx",
      "type": "registry:ui",
      "target": "components/amicro/tilt-card.tsx",
      "content": "import React, { useRef, useState } from 'react';\r\nimport { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';\r\n\r\ninterface TiltCardProps {\r\n  children: React.ReactNode;\r\n  maxTilt?: number;\r\n  className?: string;\r\n  cardClassName?: string;\r\n}\r\n\r\nexport function TiltCard({\r\n  children,\r\n  maxTilt = 15,\r\n  className = '',\r\n  cardClassName = '',\r\n}: TiltCardProps) {\r\n  const cardRef = useRef<HTMLDivElement>(null);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n\r\n  // Motion values for x/y mouse offset relative to card center (-0.5 to 0.5)\r\n  const x = useMotionValue(0);\r\n  const y = useMotionValue(0);\r\n\r\n  // Springs for smooth movement\r\n  const springConfig = { damping: 20, stiffness: 200, mass: 0.5 };\r\n  const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [maxTilt, -maxTilt]), springConfig);\r\n  const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-maxTilt, maxTilt]), springConfig);\r\n\r\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!cardRef.current) return;\r\n    const rect = cardRef.current.getBoundingClientRect();\r\n    \r\n    // Calculate normalized position relative to center (-0.5 to 0.5)\r\n    const relativeX = (event.clientX - rect.left) / rect.width - 0.5;\r\n    const relativeY = (event.clientY - rect.top) / rect.height - 0.5;\r\n\r\n    x.set(relativeX);\r\n    y.set(relativeY);\r\n  };\r\n\r\n  const handleMouseLeave = () => {\r\n    setIsHovered(false);\r\n    x.set(0);\r\n    y.set(0);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      ref={cardRef}\r\n      onMouseMove={handleMouseMove}\r\n      onMouseEnter={() => setIsHovered(true)}\r\n      onMouseLeave={handleMouseLeave}\r\n      className={`relative w-full aspect-[4/3] max-w-[320px] cursor-pointer ${className}`}\r\n      style={{ perspective: '800px' }}\r\n    >\r\n      <motion.div\r\n        style={{\r\n          rotateX,\r\n          rotateY,\r\n          transformStyle: 'preserve-3d',\r\n        }}\r\n        className={`w-full h-full rounded-2xl bg-gradient-to-br from-neutral-100 to-neutral-250 dark:from-neutral-850 dark:to-neutral-900 border border-neutral-200/20 shadow-lg flex items-center justify-center p-6 select-none ${cardClassName}`}\r\n      >\r\n        <div style={{ transform: 'translateZ(40px)', transformStyle: 'preserve-3d' }} className=\"w-full h-full flex flex-col justify-center items-center\">\r\n          {children}\r\n        </div>\r\n      </motion.div>\r\n    </div>\r\n  );\r\n}\r\n"
    }
  ]
}