{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "holographic-card",
  "type": "registry:component",
  "title": "Holographic Card",
  "description": "CSS 3D holographic foil card, rainbow conic-gradient overlay shifts with mouse position",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/kraavon-ui/HolographicCard.tsx",
      "content": "\"use client\";\n\nimport React, { useRef, CSSProperties } from \"react\";\nimport {\n  motion,\n  useMotionValue,\n  useSpring,\n  useTransform,\n  MotionStyle,\n} from \"framer-motion\";\n\ninterface HolographicCardProps {\n  children?: React.ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function HolographicCard({\n  children,\n  className,\n  style,\n}: HolographicCardProps) {\n  const cardRef = useRef<HTMLDivElement>(null);\n\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n  const foilAngle = useMotionValue(0);\n\n  const springConfig = { stiffness: 200, damping: 25 };\n  const rotateX = useSpring(useTransform(mouseY, [-1, 1], [15, -15]), springConfig);\n  const rotateY = useSpring(useTransform(mouseX, [-1, 1], [-15, 15]), springConfig);\n  const springFoilAngle = useSpring(foilAngle, { stiffness: 150, damping: 20 });\n\n  const foilGradient = useTransform(\n    springFoilAngle,\n    (angle) =>\n      `conic-gradient(from ${angle}deg, #ff0080, #ff8c00, #40e0d0, #8000ff, #ff0080)`\n  );\n\n  const foilX = useTransform(mouseX, [-1, 1], [\"30%\", \"70%\"]);\n  const foilY = useTransform(mouseY, [-1, 1], [\"30%\", \"70%\"]);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const card = cardRef.current;\n    if (!card) return;\n    const rect = card.getBoundingClientRect();\n    const cx = rect.left + rect.width / 2;\n    const cy = rect.top + rect.height / 2;\n    const nx = (e.clientX - cx) / (rect.width / 2);\n    const ny = (e.clientY - cy) / (rect.height / 2);\n    mouseX.set(nx);\n    mouseY.set(ny);\n    foilAngle.set(nx * 180);\n  };\n\n  const handleMouseLeave = () => {\n    mouseX.set(0);\n    mouseY.set(0);\n    foilAngle.set(0);\n  };\n\n  const cardStyle: MotionStyle = {\n    rotateX,\n    rotateY,\n    transformStyle: \"preserve-3d\",\n    borderRadius: 16,\n    background: \"#0d0d14\",\n    border: \"1px solid rgba(255,255,255,0.08)\",\n    boxShadow:\n      \"0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset\",\n    position: \"relative\",\n    overflow: \"hidden\",\n    willChange: \"transform\",\n  };\n\n  return (\n    <div\n      style={{\n        perspective: \"1000px\",\n        display: \"inline-block\",\n        ...style,\n      }}\n      className={className}\n    >\n      <motion.div\n        ref={cardRef}\n        style={cardStyle}\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n      >\n        {/* Foil overlay */}\n        <motion.div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            mixBlendMode: \"color-dodge\",\n            background: foilGradient,\n            backgroundSize: \"200% 200%\",\n            backgroundPositionX: foilX,\n            backgroundPositionY: foilY,\n            opacity: 0.45,\n            borderRadius: \"inherit\",\n            pointerEvents: \"none\",\n          }}\n        />\n        {/* Shimmer edge */}\n        <motion.div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            background:\n              \"linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%, rgba(255,255,255,0.04) 100%)\",\n            borderRadius: \"inherit\",\n            pointerEvents: \"none\",\n          }}\n        />\n        {/* Content */}\n        <div style={{ position: \"relative\", zIndex: 1 }}>{children}</div>\n      </motion.div>\n    </div>\n  );\n}\n\nexport default HolographicCard;\n",
      "type": "registry:component"
    }
  ]
}