{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "3d-card",
  "title": "3D Card Effect",
  "description": "A card perspective effect, hover over the card to elevate card elements.",
  "files": [
    {
      "path": "registry/ui/3d-card.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport React, {\n  createContext,\n  useState,\n  useContext,\n  useRef,\n  useEffect,\n} from \"react\"\n\nconst MouseEnterContext = createContext<\n  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined\n>(undefined)\n\nexport const CardContainer = ({\n  children,\n  className,\n  containerClassName,\n}: {\n  children?: React.ReactNode\n  className?: string\n  containerClassName?: string\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [isMouseEntered, setIsMouseEntered] = useState(false)\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return\n    const { left, top, width, height } =\n      containerRef.current.getBoundingClientRect()\n    const x = (e.clientX - left - width / 2) / 25\n    const y = (e.clientY - top - height / 2) / 25\n    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`\n  }\n\n  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n    setIsMouseEntered(true)\n    if (!containerRef.current) return\n  }\n\n  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return\n    setIsMouseEntered(false)\n    containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`\n  }\n  return (\n    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>\n      <div\n        className={cn(\n          \"flex items-center justify-center py-20\",\n          containerClassName,\n        )}\n        style={{\n          perspective: \"1000px\",\n        }}\n      >\n        <div\n          ref={containerRef}\n          onMouseEnter={handleMouseEnter}\n          onMouseMove={handleMouseMove}\n          onMouseLeave={handleMouseLeave}\n          className={cn(\n            \"relative flex items-center justify-center transition-all duration-200 ease-linear\",\n            className,\n          )}\n          style={{\n            transformStyle: \"preserve-3d\",\n          }}\n        >\n          {children}\n        </div>\n      </div>\n    </MouseEnterContext.Provider>\n  )\n}\n\nexport const CardBody = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) => {\n  return (\n    <div\n      className={cn(\n        \"h-96 w-96 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d]\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport const CardItem = ({\n  as: Tag = \"div\",\n  children,\n  className,\n  translateX = 0,\n  translateY = 0,\n  translateZ = 0,\n  rotateX = 0,\n  rotateY = 0,\n  rotateZ = 0,\n  ...rest\n}: {\n  as?: React.ElementType\n  children: React.ReactNode\n  className?: string\n  translateX?: number | string\n  translateY?: number | string\n  translateZ?: number | string\n  rotateX?: number | string\n  rotateY?: number | string\n  rotateZ?: number | string\n  [key: string]: any\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [isMouseEntered] = useMouseEnter()\n\n  useEffect(() => {\n    handleAnimations()\n  }, [isMouseEntered])\n\n  const handleAnimations = () => {\n    if (!ref.current) return\n    if (isMouseEntered) {\n      ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`\n    } else {\n      ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)`\n    }\n  }\n\n  return (\n    <Tag\n      ref={ref}\n      className={cn(\"w-fit transition duration-200 ease-linear\", className)}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  )\n}\n\n// Create a hook to use the context\nexport const useMouseEnter = () => {\n  const context = useContext(MouseEnterContext)\n  if (context === undefined) {\n    throw new Error(\"useMouseEnter must be used within a MouseEnterProvider\")\n  }\n  return context\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}