{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-morph-card",
  "title": "Glass Morph Card",
  "description": "A card component with a morphing glass effect, suitable for displaying content in a visually appealing way.",
  "files": [
    {
      "path": "registry/innovative/glass-morph-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface GlassMorphCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  intensity?: number\n  glowColor?: \"cyan\" | \"purple\" | \"blue\" | \"pink\" | \"green\"\n  disabled?: boolean\n}\n\nconst glowColors = {\n  cyan: \"from-cyan-500/40 to-blue-500/40\",\n  purple: \"from-purple-500/40 to-pink-500/40\",\n  blue: \"from-blue-500/40 to-indigo-500/40\",\n  pink: \"from-pink-500/40 to-rose-500/40\",\n  green: \"from-emerald-500/40 to-teal-500/40\",\n}\n\nconst GlassMorphCard = React.forwardRef<HTMLDivElement, GlassMorphCardProps>(\n  ({ className, children, intensity = 15, glowColor = \"cyan\", disabled = false, ...props }, ref) => {\n    const cardRef = React.useRef<HTMLDivElement>(null)\n    const [transform, setTransform] = React.useState({ rotateX: 0, rotateY: 0 })\n    const [lightPosition, setLightPosition] = React.useState({ x: 50, y: 50 })\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const handleMouseMove = React.useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled || !cardRef.current) return\n\n        const rect = cardRef.current.getBoundingClientRect()\n        const x = e.clientX - rect.left\n        const y = e.clientY - rect.top\n        const centerX = rect.width / 2\n        const centerY = rect.height / 2\n\n        const rotateX = ((y - centerY) / centerY) * -intensity\n        const rotateY = ((x - centerX) / centerX) * intensity\n\n        setTransform({ rotateX, rotateY })\n        setLightPosition({\n          x: (x / rect.width) * 100,\n          y: (y / rect.height) * 100,\n        })\n      },\n      [intensity, disabled],\n    )\n\n    const handleMouseLeave = React.useCallback(() => {\n      setTransform({ rotateX: 0, rotateY: 0 })\n      setLightPosition({ x: 50, y: 50 })\n      setIsHovered(false)\n    }, [])\n\n    const handleMouseEnter = React.useCallback(() => {\n      setIsHovered(true)\n    }, [])\n\n    return (\n      <div ref={ref} className={cn(\"relative\", className)} style={{ perspective: \"1000px\" }} {...props}>\n        {/* Glow effect */}\n        <div\n          className={cn(\n            \"absolute -inset-2 rounded-2xl bg-linear-to-r blur-xl transition-opacity duration-300\",\n            glowColors[glowColor],\n            isHovered ? \"opacity-80\" : \"opacity-40\",\n          )}\n        />\n\n        {/* Card container */}\n        <div\n          ref={cardRef}\n          onMouseMove={handleMouseMove}\n          onMouseLeave={handleMouseLeave}\n          onMouseEnter={handleMouseEnter}\n          className={cn(\n            \"relative rounded-2xl border border-white/20\",\n            \"bg-white/10 backdrop-blur-xl\",\n            \"shadow-[0_8px_32px_rgba(0,0,0,0.37)]\",\n            \"overflow-hidden transition-transform duration-200 ease-out\",\n            !disabled && \"cursor-pointer\",\n          )}\n          style={{\n            transform: `rotateX(${transform.rotateX}deg) rotateY(${transform.rotateY}deg)`,\n            transformStyle: \"preserve-3d\",\n          }}\n        >\n          {/* Dynamic light reflection */}\n          <div\n            className=\"absolute inset-0 pointer-events-none transition-opacity duration-300\"\n            style={{\n              background: `radial-gradient(circle at ${lightPosition.x}% ${lightPosition.y}%, rgba(255,255,255,0.3) 0%, transparent 50%)`,\n              opacity: isHovered ? 1 : 0,\n            }}\n          />\n\n          {/* Glass highlight */}\n          <div className=\"absolute inset-0 rounded-2xl bg-linear-to-b from-white/20 to-transparent pointer-events-none\" />\n\n          {/* Edge highlight */}\n          <div\n            className=\"absolute inset-0 rounded-2xl pointer-events-none transition-opacity duration-300\"\n            style={{\n              boxShadow: isHovered\n                ? `inset 2px 2px 10px rgba(255,255,255,0.2), inset -2px -2px 10px rgba(0,0,0,0.1)`\n                : `inset 1px 1px 2px rgba(255,255,255,0.1)`,\n            }}\n          />\n\n          {/* Content */}\n          <div className=\"relative z-10\" style={{ transform: \"translateZ(20px)\" }}>\n            {children}\n          </div>\n        </div>\n      </div>\n    )\n  },\n)\nGlassMorphCard.displayName = \"GlassMorphCard\"\n\nexport { GlassMorphCard }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}