{
    "name": "tilt-card",
    "title": "Tilt Card",
    "description": "Interactive 3D tilt card that responds to cursor, adds depth and motion",
    "type": "registry:ui",
    "dependencies": ["gsap", "@gsap/react"],
    "files": [
        {
            "path": "components/gsap/tilt-card.tsx",
            "type": "registry:ui",
            "target": "~/components/gsap/tilt-card.tsx",
            "content": "\"use client\";\n\nimport { ComponentProps, useRef } from \"react\";\n\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype TiltCardProps = {\n    maxTilt?: number;\n    highlightClassName?: string;\n    wrapperClassName?: string;\n} & ComponentProps<\"div\">;\n\nexport const TiltCard = ({\n    children,\n    highlightClassName,\n    className,\n    wrapperClassName,\n    maxTilt = 10,\n    ...props\n}: TiltCardProps) => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const cardRef = useRef<HTMLDivElement | null>(null);\n    const highlightRef = useRef<HTMLDivElement | null>(null);\n\n    useGSAP(\n        () => {\n            const container = containerRef.current;\n            const card = cardRef.current;\n            const highlight = highlightRef.current;\n            if (!container || !card || !highlight) return;\n\n            const handleMouseLeave = () => {\n                gsap.to(card, {\n                    rotateX: 0,\n                    rotateY: 0,\n                    duration: 0.6,\n                    ease: \"power3.out\",\n                });\n            };\n\n            const handleMouseMove = (e: MouseEvent) => {\n                const bounds = card.getBoundingClientRect();\n                const offsetX = e.clientX - bounds.left;\n                const offsetY = e.clientY - bounds.top;\n                const centerX = bounds.width / 2;\n                const centerY = bounds.height / 2;\n                const percentX = (offsetX - centerX) / centerX;\n                const percentY = (offsetY - centerY) / centerY;\n\n                gsap.to(card, {\n                    rotateY: percentX * maxTilt,\n                    rotateX: -percentY * maxTilt,\n                    duration: 0.3,\n                    ease: \"power3.out\",\n                });\n                gsap.to(highlight, {\n                    left: bounds.width - offsetX + \"px\",\n                    top: bounds.height - offsetY + \"px\",\n                    duration: 0.3,\n                    ease: \"power3.out\",\n                });\n            };\n\n            container.addEventListener(\"mousemove\", handleMouseMove);\n            container.addEventListener(\"mouseleave\", handleMouseLeave);\n\n            return () => {\n                container.removeEventListener(\"mousemove\", handleMouseMove);\n                container.removeEventListener(\"mouseleave\", handleMouseLeave);\n            };\n        },\n        { scope: containerRef },\n    );\n\n    return (\n        <div {...props} ref={containerRef} className={cn(\"relative perspective-[1000px]\", wrapperClassName)}>\n            <div ref={cardRef} className={className}>\n                {children}\n            </div>\n            <div\n                ref={highlightRef}\n                className={cn(\n                    \"absolute top-0 h-full w-full -translate-x-1/2 -translate-y-1/2 rounded-full blur-[28px] select-none\",\n                    highlightClassName,\n                )}\n            />\n        </div>\n    );\n};\n"
        }
    ]
}