{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "glare-hologram-card",
  "type": "registry:ui",
  "title": "Chromatic Glare Hologram Card",
  "description": "Foil collector card with dynamic rainbow holographic reflection and specular light gleam following cursor movement.",
  "category": "cards",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/cards/glare-hologram-card/glare-hologram-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/glare-hologram-card.tsx",
      "content": "import React, { useState, useRef } from 'react';\nimport { Star, ShieldCheck } from '@phosphor-icons/react';\n\nexport const GlareHologramCard: React.FC = () => {\n  const cardRef = useRef<HTMLDivElement>(null);\n  const [coords, setCoords] = useState({ x: 50, y: 50 });\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!cardRef.current) return;\n    const rect = cardRef.current.getBoundingClientRect();\n    const x = ((e.clientX - rect.left) / rect.width) * 100;\n    const y = ((e.clientY - rect.top) / rect.height) * 100;\n    setCoords({ x, y });\n  };\n\n  return (\n    <div\n      ref={cardRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className=\"relative w-64 h-88 rounded-2xl overflow-hidden border border-zinc-200 dark:border-white/20 bg-zinc-950 p-5 shadow-2xl select-none cursor-pointer text-white flex flex-col justify-between\"\n    >\n      {/* Dynamic Rainbow Glare Layer */}\n      {isHovered && (\n        <div\n          className=\"absolute inset-0 pointer-events-none mix-blend-color-dodge transition-opacity duration-200\"\n          style={{\n            background: `radial-gradient(circle at ${coords.x}% ${coords.y}%, rgba(255, 255, 255, 0.4) 0%, rgba(99, 102, 241, 0.3) 30%, rgba(6, 182, 212, 0.25) 50%, rgba(244, 63, 94, 0.2) 75%, transparent 100%)`,\n          }}\n        />\n      )}\n\n      {/* Hologram Sheen Diagonal Bar */}\n      <div\n        className=\"absolute inset-0 pointer-events-none opacity-20\"\n        style={{\n          background: 'linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.8) 50%, transparent 60%)',\n          transform: `translateX(${(coords.x - 50) * 1.5}%)`,\n        }}\n      />\n\n      <div className=\"relative z-10 flex justify-between items-center\">\n        <span className=\"text-[10px] font-mono px-2 py-0.5 rounded-full bg-white/10 border border-white/20\">EDITION #001</span>\n        <Star size={16} weight=\"fill\" className=\"text-amber-400\" />\n      </div>\n\n      <div className=\"relative z-10 text-center py-6\">\n        <div className=\"w-16 h-16 mx-auto rounded-full bg-gradient-to-tr from-indigo-500 to-cyan-400 p-0.5 shadow-xl flex items-center justify-center\">\n          <ShieldCheck size={32} className=\"text-white\" />\n        </div>\n        <h4 className=\"font-extrabold text-lg mt-3 tracking-wide\">QUANTUM CITADEL</h4>\n        <p className=\"text-[11px] text-zinc-400 mt-1 font-mono\">Founding Architect Member</p>\n      </div>\n\n      <div className=\"relative z-10 flex justify-between items-center text-[10px] font-mono text-zinc-400 border-t border-white/10 pt-3\">\n        <span>RARITY: MYTHIC</span>\n        <span>SHA-256 VERIFIED</span>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}