{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-tilt",
  "type": "registry:ui",
  "title": "Card Tilt",
  "description": "smooth card tilt that responds naturally to your cursor, giving the card a more polished, modern look.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion", "clsx", "tailwind-merge"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/card-tilt.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  motion,\n  useMotionValue,\n  useSpring,\n  useTransform,\n  MotionValue,\n} from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface CardTiltProps {\n  children: React.ReactNode;\n  className?: string;\n  tiltMaxAngle?: number;\n  tiltReverse?: boolean;\n  glareEnable?: boolean;\n  scale?: number;\n}\n\ninterface CardTiltContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst CardTiltContext = React.createContext<{\n  rotateX: MotionValue<number>;\n  rotateY: MotionValue<number>;\n  scale: MotionValue<number>;\n} | null>(null);\n\nconst CardTilt = React.forwardRef<HTMLDivElement, CardTiltProps>(\n  (\n    {\n      children,\n      className,\n      tiltMaxAngle = 15,\n      tiltReverse = false,\n      scale = 1.05,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n\n    const mouseXSpring = useSpring(x, { stiffness: 300, damping: 30 });\n    const mouseYSpring = useSpring(y, { stiffness: 300, damping: 30 });\n\n    const rotateX = useTransform(\n      mouseYSpring,\n      [-0.5, 0.5],\n      tiltReverse\n        ? [tiltMaxAngle, -tiltMaxAngle]\n        : [-tiltMaxAngle, tiltMaxAngle],\n    );\n    const rotateY = useTransform(\n      mouseXSpring,\n      [-0.5, 0.5],\n      tiltReverse\n        ? [-tiltMaxAngle, tiltMaxAngle]\n        : [tiltMaxAngle, -tiltMaxAngle],\n    );\n\n    const scaleValue = useSpring(1, { stiffness: 300, damping: 30 });\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      const width = rect.width;\n      const height = rect.height;\n      const mouseX = e.clientX - rect.left;\n      const mouseY = e.clientY - rect.top;\n      const xPct = mouseX / width - 0.5;\n      const yPct = mouseY / height - 0.5;\n\n      x.set(xPct);\n      y.set(yPct);\n      scaleValue.set(scale);\n    };\n\n    const handleMouseLeave = () => {\n      x.set(0);\n      y.set(0);\n      scaleValue.set(1);\n    };\n\n    React.useImperativeHandle(forwardedRef, () => containerRef.current!);\n\n    return (\n      <CardTiltContext.Provider value={{ rotateX, rotateY, scale: scaleValue }}>\n        <div\n          ref={containerRef}\n          onMouseMove={handleMouseMove}\n          onMouseLeave={handleMouseLeave}\n          className={cn('relative inline-block', className)}\n          style={{ perspective: '1000px' }}\n          {...props}\n        >\n          <div className='absolute inset-0 rounded-2xl border-2 border-dashed border-slate-300' />\n          {children}\n        </div>\n      </CardTiltContext.Provider>\n    );\n  },\n);\nCardTilt.displayName = 'CardTilt';\n\nconst CardTiltContent = React.forwardRef<HTMLDivElement, CardTiltContentProps>(\n  ({ children, className, ...props }, ref) => {\n    const context = React.useContext(CardTiltContext);\n\n    if (!context) {\n      throw new Error('CardTiltContent must be used within CardTilt');\n    }\n\n    const { rotateX, rotateY, scale } = context;\n\n    return (\n      <motion.div\n        ref={ref}\n        style={{\n          rotateX,\n          rotateY,\n          scale,\n          transformStyle: 'preserve-3d',\n        }}\n        className={cn('relative', className)}\n        {...props}\n      >\n        {children}\n      </motion.div>\n    );\n  },\n);\nCardTiltContent.displayName = 'CardTiltContent';\n\nexport { CardTilt, CardTiltContent };\n"
    },
    {
      "type": "registry:lib",
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}"
    }
  ]
}