{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "code-hover-cards",
  "type": "registry:ui",
  "title": "Code Matrix Hover Cards",
  "description": "Interactive cards with real-time character matrix decryption reveal and spotlight glow effects under cursor coordinates.",
  "category": "cards",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "card",
    "matrix",
    "code",
    "hover",
    "decrypt",
    "spotlight",
    "cursor-tracking",
    "interactive"
  ],
  "files": [
    {
      "path": "registry/cards/code-hover-cards/code-hover-cards.tsx",
      "type": "registry:ui",
      "target": "components/ui/code-hover-cards.tsx",
      "content": "import React, { useState, useRef } from 'react'\nimport { motion } from 'framer-motion'\nimport { Code2, Terminal, Cpu, ShieldCheck, ArrowUpRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface CodeHoverCardData {\n  id: string\n  icon: React.ComponentType<{ className?: string }>\n  title: string\n  description: string\n  tag?: string\n}\n\nexport interface CodeHoverCardsProps {\n  cards?: CodeHoverCardData[]\n  className?: string\n  maskRadius?: number\n  characterCount?: number\n  characterSet?: string\n  columns?: 1 | 2 | 3\n}\n\nconst DEFAULT_CARDS: CodeHoverCardData[] = [\n  {\n    id: 'runtime',\n    icon: Terminal,\n    title: 'CLI Orchestrator',\n    description: 'Dynamic terminal code generator with instant AST dependency resolving.',\n    tag: 'SYSTEM',\n  },\n  {\n    id: 'shaders',\n    icon: Cpu,\n    title: 'GLSL Quantum Shader',\n    description: 'Hardware-accelerated fragment pipelines compiling at 60 FPS in browser.',\n    tag: 'WEBGL',\n  },\n  {\n    id: 'crypto',\n    icon: ShieldCheck,\n    title: 'Zero-Lockin Core',\n    description: 'Isolated copy-paste TSX tree with zero proprietary runtime telemetry.',\n    tag: 'SECURE',\n  },\n]\n\nexport const CodeHoverCards: React.FC<CodeHoverCardsProps> = ({\n  cards = DEFAULT_CARDS,\n  className,\n  maskRadius = 260,\n  characterCount = 1400,\n  characterSet = '01010101abcdefABCDEF$#@{}[]()<>/*+=~',\n  columns = 3,\n}) => {\n  const [mousePositions, setMousePositions] = useState<{ [key: string]: { x: number; y: number } }>({})\n  const [randomTexts, setRandomTexts] = useState<{ [key: string]: string }>({})\n  const [activeCards, setActiveCards] = useState<{ [key: string]: boolean }>({})\n  const cardRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})\n\n  const generateRandomString = (length: number): string => {\n    return Array.from({ length }, () => characterSet[Math.floor(Math.random() * characterSet.length)]).join('')\n  }\n\n  const handleMouseMove = (e: React.MouseEvent, cardId: string) => {\n    const card = cardRefs.current[cardId]\n    if (!card) return\n    const rect = card.getBoundingClientRect()\n    const x = e.clientX - rect.left\n    const y = e.clientY - rect.top\n    setMousePositions((prev) => ({ ...prev, [cardId]: { x, y } }))\n    setActiveCards((prev) => ({ ...prev, [cardId]: true }))\n    setRandomTexts((prev) => ({ ...prev, [cardId]: generateRandomString(characterCount) }))\n  }\n\n  const handleMouseLeave = (cardId: string) => {\n    setActiveCards((prev) => ({ ...prev, [cardId]: false }))\n  }\n\n  return (\n    <div\n      className={cn(\n        'w-full grid gap-4 items-stretch',\n        columns === 1 ? 'grid-cols-1' : columns === 2 ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1 md:grid-cols-3',\n        className\n      )}\n    >\n      {cards.map((card) => {\n        const IconComponent = card.icon\n        const pos = mousePositions[card.id] || { x: 0, y: 0 }\n        const isActive = activeCards[card.id]\n        const text = randomTexts[card.id] || generateRandomString(characterCount)\n\n        return (\n          <div\n            key={card.id}\n            ref={(el) => {\n              cardRefs.current[card.id] = el\n            }}\n            onMouseMove={(e) => handleMouseMove(e, card.id)}\n            onMouseLeave={() => handleMouseLeave(card.id)}\n            className=\"group relative flex flex-col justify-between overflow-hidden rounded-2xl border border-zinc-200/90 dark:border-white/10 bg-white/90 dark:bg-zinc-950 p-5 shadow-sm transition-all duration-300 hover:border-zinc-300 dark:hover:border-white/25 hover:shadow-xl cursor-pointer\"\n          >\n            <div\n              className=\"pointer-events-none absolute inset-0 z-0 select-none overflow-hidden font-mono text-[9px] leading-[11px] tracking-widest text-indigo-500/80 dark:text-cyan-400/90 transition-opacity duration-200 break-all\"\n              style={{\n                opacity: isActive ? 1 : 0,\n                WebkitMaskImage: `radial-gradient(${maskRadius}px circle at ${pos.x}px ${pos.y}px, black 30%, transparent 80%)`,\n                maskImage: `radial-gradient(${maskRadius}px circle at ${pos.x}px ${pos.y}px, black 30%, transparent 80%)`,\n              }}\n            >\n              {text}\n            </div>\n\n            <div\n              className=\"pointer-events-none absolute inset-0 z-0 transition-opacity duration-300\"\n              style={{\n                opacity: isActive ? 0.35 : 0,\n                background: `radial-gradient(${maskRadius * 0.75}px circle at ${pos.x}px ${pos.y}px, rgba(99, 102, 241, 0.25), transparent 70%)`,\n              }}\n            />\n\n            <div className=\"relative z-10 flex items-start justify-between\">\n              <div className=\"flex h-10 w-10 items-center justify-center rounded-xl bg-zinc-100 dark:bg-white/5 border border-zinc-200/60 dark:border-white/10 text-zinc-900 dark:text-white group-hover:scale-105 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-300 shadow-xs\">\n                <IconComponent className=\"h-5 w-5\" />\n              </div>\n              {card.tag && (\n                <span className=\"font-mono text-[10px] font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-white/5 border border-zinc-200/60 dark:border-white/10\">\n                  {card.tag}\n                </span>\n              )}\n            </div>\n\n            <div className=\"relative z-10 mt-6 space-y-1.5\">\n              <div className=\"flex items-center justify-between\">\n                <h4 className=\"text-sm font-bold text-zinc-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-cyan-400 transition-colors\">\n                  {card.title}\n                </h4>\n                <ArrowUpRight className=\"h-3.5 w-3.5 text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity\" />\n              </div>\n              <p className=\"text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed\">\n                {card.description}\n              </p>\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default CodeHoverCards\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}