{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "interactive-hud-cursor",
  "type": "registry:ui",
  "title": "Interactive HUD Cursor",
  "description": "Sci-fi tactical targeting reticle cursor with spring-damped tracking, coordinate readouts, lock-on brackets, and interactive pulse click physics.",
  "category": "cursors",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/cursors/interactive-hud-cursor/interactive-hud-cursor.tsx",
      "type": "registry:ui",
      "target": "components/ui/interactive-hud-cursor.tsx",
      "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, useMotionValue, useSpring } from 'framer-motion';\nimport { Target, Crosshair, Compass } from '@phosphor-icons/react';\n\nexport interface InteractiveHudCursorProps {\n  colorTheme?: 'cyan' | 'emerald' | 'amber' | 'rose';\n  showCoordinates?: boolean;\n  reticleSize?: number;\n  className?: string;\n}\n\nexport const InteractiveHudCursor: React.FC<InteractiveHudCursorProps> = ({\n  colorTheme = 'cyan',\n  showCoordinates = true,\n  reticleSize = 56,\n  className = '',\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [coords, setCoords] = useState({ x: 0, y: 0 });\n  const [isInside, setIsInside] = useState(false);\n  const [isLocked, setIsLocked] = useState(false);\n\n  // Smooth spring motion values for lagging reticle\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n\n  const springConfig = { damping: 25, stiffness: 350 };\n  const smoothX = useSpring(mouseX, springConfig);\n  const smoothY = useSpring(mouseY, springConfig);\n\n  const themeConfig = {\n    cyan: {\n      accent: 'text-cyan-400',\n      border: 'border-cyan-400/80',\n      glow: 'shadow-[0_0_15px_rgba(34,211,238,0.4)]',\n      bg: 'bg-cyan-500/10',\n      dot: 'bg-cyan-400',\n    },\n    emerald: {\n      accent: 'text-emerald-400',\n      border: 'border-emerald-400/80',\n      glow: 'shadow-[0_0_15px_rgba(52,211,153,0.4)]',\n      bg: 'bg-emerald-500/10',\n      dot: 'bg-emerald-400',\n    },\n    amber: {\n      accent: 'text-amber-400',\n      border: 'border-amber-400/80',\n      glow: 'shadow-[0_0_15px_rgba(251,191,36,0.4)]',\n      bg: 'bg-amber-500/10',\n      dot: 'bg-amber-400',\n    },\n    rose: {\n      accent: 'text-rose-400',\n      border: 'border-rose-400/80',\n      glow: 'shadow-[0_0_15px_rgba(251,113,133,0.4)]',\n      bg: 'bg-rose-500/10',\n      dot: 'bg-rose-400',\n    },\n  }[colorTheme];\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = Math.round(e.clientX - rect.left);\n    const y = Math.round(e.clientY - rect.top);\n    \n    setCoords({ x, y });\n    mouseX.set(x);\n    mouseY.set(y);\n    if (!isInside) setIsInside(true);\n  };\n\n  const handleMouseDown = () => {\n    setIsLocked(true);\n  };\n\n  const handleMouseUp = () => {\n    setTimeout(() => setIsLocked(false), 300);\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsInside(true)}\n      onMouseLeave={() => setIsInside(false)}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      className={`relative w-full h-80 rounded-3xl overflow-hidden bg-[#07080c] border border-white/10 select-none cursor-none flex items-center justify-center ${className}`}\n    >\n      {/* Sci-fi HUD Background Grid */}\n      <div className=\"absolute inset-0 bg-[linear-gradient(to_right,#1f293718_1px,transparent_1px),linear-gradient(to_bottom,#1f293718_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none\" />\n      <div className=\"absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_40%,#07080c_90%)] pointer-events-none\" />\n\n      {/* Target Dummy Nodes inside container for interaction */}\n      <div className=\"absolute inset-0 pointer-events-none flex items-center justify-around px-8\">\n        {[\n          { label: 'ALPHA-01', dist: '124m' },\n          { label: 'BEACON-09', dist: '480m' },\n          { label: 'PROXY-77', dist: '210m' },\n        ].map((node, i) => (\n          <div key={i} className=\"flex flex-col items-center gap-1.5 opacity-60\">\n            <div className=\"h-2 w-2 rounded-full border border-cyan-400/80 bg-cyan-500/20\" />\n            <span className=\"text-[10px] font-mono text-zinc-500\">{node.label}</span>\n            <span className=\"text-[9px] font-mono text-zinc-600\">{node.dist}</span>\n          </div>\n        ))}\n      </div>\n\n      {/* Instructions when idle */}\n      {!isInside && (\n        <div className=\"flex flex-col items-center gap-2 pointer-events-none z-10 text-center px-4\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-zinc-400\">\n            <Crosshair size={20} weight=\"bold\" />\n          </div>\n          <span className=\"text-xs font-mono uppercase tracking-widest text-zinc-400 font-semibold\">\n            Move pointer inside arena to engage HUD\n          </span>\n          <span className=\"text-[11px] font-mono text-zinc-600\">\n            Click anywhere to trigger active lock-on reticle\n          </span>\n        </div>\n      )}\n\n      {/* Trailing Spring-Damped Reticle Cursor */}\n      {isInside && (\n        <motion.div\n          style={{\n            x: smoothX,\n            y: smoothY,\n            translateX: '-50%',\n            translateY: '-50%',\n          }}\n          className=\"absolute top-0 left-0 pointer-events-none z-30\"\n        >\n          {/* Main Reticle Outer Frame */}\n          <div\n            style={{ width: `${reticleSize}px`, height: `${reticleSize}px` }}\n            className={`relative flex items-center justify-center transition-transform duration-150 ${\n              isLocked ? 'scale-75' : 'scale-100'\n            }`}\n          >\n            {/* Top-Left Bracket */}\n            <div className={`absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2 ${themeConfig.border} ${themeConfig.glow}`} />\n            {/* Top-Right Bracket */}\n            <div className={`absolute top-0 right-0 w-3 h-3 border-t-2 border-r-2 ${themeConfig.border} ${themeConfig.glow}`} />\n            {/* Bottom-Left Bracket */}\n            <div className={`absolute bottom-0 left-0 w-3 h-3 border-b-2 border-l-2 ${themeConfig.border} ${themeConfig.glow}`} />\n            {/* Bottom-Right Bracket */}\n            <div className={`absolute bottom-0 right-0 w-3 h-3 border-b-2 border-r-2 ${themeConfig.border} ${themeConfig.glow}`} />\n\n            {/* Rotating Outer Dashed Aim Ring */}\n            <div className={`absolute inset-1 rounded-full border border-dashed ${themeConfig.border} animate-[spin_10s_linear_infinite] opacity-60`} />\n\n            {/* Inner Lock Target */}\n            <div className={`h-2.5 w-2.5 rounded-full ${themeConfig.dot} transition-transform ${isLocked ? 'scale-150 animate-ping' : 'scale-100'}`} />\n\n            {/* Locking State Ring Pulse */}\n            {isLocked && (\n              <div className={`absolute -inset-2 rounded-full border-2 ${themeConfig.border} animate-ping opacity-80`} />\n            )}\n\n            {/* Telemetry Coordinate Label */}\n            {showCoordinates && (\n              <div className=\"absolute left-full top-0 ml-3.5 whitespace-nowrap font-mono text-[10px] flex flex-col gap-0.5 pointer-events-none\">\n                <span className={`font-bold ${themeConfig.accent}`}>\n                  LOC: X {coords.x.toString().padStart(3, '0')} / Y {coords.y.toString().padStart(3, '0')}\n                </span>\n                <span className=\"text-zinc-500 uppercase text-[9px]\">\n                  {isLocked ? 'STATUS: [LOCKED]' : 'STATUS: [TRACKING]'}\n                </span>\n              </div>\n            )}\n          </div>\n        </motion.div>\n      )}\n\n      {/* Immediate Hardware Pinpoint Dot */}\n      {isInside && (\n        <div\n          style={{\n            transform: `translate(${coords.x}px, ${coords.y}px)`,\n          }}\n          className=\"absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 pointer-events-none z-40\"\n        >\n          <div className=\"h-1.5 w-1.5 rounded-full bg-white shadow-[0_0_8px_#ffffff]\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"
    }
  ]
}