{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "spotlight-border-card",
  "type": "registry:ui",
  "title": "Spotlight Border Card",
  "description": "Interactive card with dynamic cursor-following illuminated rainbow perimeter border glow using mouse position geometry.",
  "category": "cards",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/cards/spotlight-border-card/spotlight-border-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/spotlight-border-card.tsx",
      "content": "import React, { useRef, useState } from 'react';\nimport { Cpu, ArrowUpRight } from '@phosphor-icons/react';\n\nexport interface SpotlightBorderCardProps {\n  title?: string;\n  description?: string;\n  className?: string;\n}\n\nexport const SpotlightBorderCard: React.FC<SpotlightBorderCardProps> = ({\n  title = 'Autonomous Agent Pipeline',\n  description = 'High-velocity distributed execution graph powered by continuous neural feedback and deterministic verification loops.',\n  className = '',\n}) => {\n  const cardRef = useRef<HTMLDivElement>(null);\n  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });\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    setMousePos({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    });\n  };\n\n  return (\n    <div\n      ref={cardRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={`relative w-full max-w-sm rounded-3xl p-[1.5px] overflow-hidden transition-all duration-300 group ${className}`}\n    >\n      {/* Dynamic Cursor Spotlight Border */}\n      <div\n        className=\"pointer-events-none absolute inset-0 transition-opacity duration-300\"\n        style={{\n          opacity: isHovered ? 1 : 0,\n          background: `radial-gradient(280px circle at ${mousePos.x}px ${mousePos.y}px, rgba(99, 102, 241, 0.8), rgba(236, 72, 153, 0.6), transparent 70%)`,\n        }}\n      />\n\n      {/* Card Body */}\n      <div className=\"relative z-10 w-full h-full rounded-[22px] bg-white dark:bg-zinc-950 p-6 flex flex-col justify-between border border-zinc-200/80 dark:border-white/10 shadow-xl\">\n        <div className=\"space-y-3\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-500/20\">\n              <Cpu size={18} weight=\"bold\" />\n            </span>\n            <span className=\"font-mono text-[10px] font-semibold text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full border border-emerald-500/20\">\n              ACTIVE\n            </span>\n          </div>\n\n          <h3 className=\"text-base font-bold text-zinc-900 dark:text-white tracking-tight group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors\">\n            {title}\n          </h3>\n          <p className=\"text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed\">\n            {description}\n          </p>\n        </div>\n\n        <div className=\"pt-4 mt-4 border-t border-zinc-100 dark:border-white/5 flex items-center justify-between text-xs font-mono\">\n          <span className=\"text-zinc-400\">99.98% Latency SLI</span>\n          <div className=\"flex items-center gap-1 text-indigo-600 dark:text-indigo-400 font-semibold group-hover:translate-x-0.5 transition-transform\">\n            <span>Inspect</span>\n            <ArrowUpRight size={13} weight=\"bold\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}