{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "interactive-lens",
  "type": "registry:ui",
  "title": "Interactive Magnifying Lens",
  "description": "Interactive magnifying glass inspection lens with spring-following cursor tracking, zoom factor control, and reticle overlay.",
  "category": "effects",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "effect",
    "lens",
    "magnify",
    "zoom",
    "inspection",
    "cursor-tracking",
    "interactive"
  ],
  "files": [
    {
      "path": "registry/effects/interactive-lens/interactive-lens.tsx",
      "type": "registry:ui",
      "target": "components/ui/interactive-lens.tsx",
      "content": "import React, { useRef, useState } from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { MagnifyingGlass, Cpu } from '@phosphor-icons/react'\nimport { cn } from '@/lib/utils'\n\nexport interface InteractiveLensProps {\n  children?: React.ReactNode\n  zoomFactor?: number\n  lensSize?: number\n  isStatic?: boolean\n  className?: string\n}\n\nexport const InteractiveLens: React.FC<InteractiveLensProps> = ({\n  children,\n  zoomFactor = 1.6,\n  lensSize = 160,\n  isStatic = false,\n  className,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [isHovering, setIsHovering] = useState(false)\n  const [mousePos, setMousePos] = useState({ x: 140, y: 120 })\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return\n    const rect = containerRef.current.getBoundingClientRect()\n    setMousePos({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top,\n    })\n  }\n\n  const defaultChild = (\n    <div className=\"relative p-6 rounded-2xl bg-zinc-100 dark:bg-zinc-900/80 border border-zinc-200 dark:border-white/10 select-none overflow-hidden max-w-[340px]\">\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"w-8 h-8 rounded-lg bg-indigo-500/15 flex items-center justify-center text-indigo-500\">\n              <Cpu size={18} weight=\"bold\" />\n            </div>\n            <div>\n              <h4 className=\"text-xs font-bold text-zinc-900 dark:text-white font-mono\">\n                QUANTUM_CORE_V4\n              </h4>\n              <p className=\"text-[10px] text-zinc-500 font-mono\">ADDR: 0x7FFD382A</p>\n            </div>\n          </div>\n          <span className=\"text-[10px] font-mono px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-semibold border border-emerald-500/20\">\n            OPTIMIZED\n          </span>\n        </div>\n\n        <div className=\"p-3 rounded-xl bg-white dark:bg-black/40 border border-zinc-200/80 dark:border-white/5 font-mono text-[10px] text-zinc-600 dark:text-zinc-400 space-y-1\">\n          <div className=\"flex justify-between\">\n            <span>PIPELINE_STATUS:</span>\n            <span className=\"text-indigo-500 dark:text-cyan-400 font-bold\">READY</span>\n          </div>\n          <div className=\"flex justify-between\">\n            <span>INSTRUCTION_CACHE:</span>\n            <span className=\"text-zinc-900 dark:text-zinc-200\">512 KB L1</span>\n          </div>\n          <div className=\"flex justify-between\">\n            <span>EXECUTION_CYCLE:</span>\n            <span className=\"text-zinc-900 dark:text-zinc-200\">0.24 ns</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between text-[10px] font-mono text-zinc-500\">\n          <span>Hover to inspect silicon substrate</span>\n          <MagnifyingGlass size={12} className=\"text-zinc-400\" />\n        </div>\n      </div>\n    </div>\n  )\n\n  const content = children || defaultChild\n\n  return (\n    <div\n      ref={containerRef}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      onMouseMove={handleMouseMove}\n      className={cn('relative inline-block isolate cursor-crosshair overflow-hidden rounded-2xl', className)}\n    >\n      <div className=\"relative z-0\">{content}</div>\n\n      <AnimatePresence>\n        {(isHovering || isStatic) && (\n          <motion.div\n            initial={{ opacity: 0, scale: 0.6 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.6 }}\n            transition={{ duration: 0.16, ease: 'easeOut' }}\n            style={{\n              position: 'absolute',\n              left: mousePos.x - lensSize / 2,\n              top: mousePos.y - lensSize / 2,\n              width: lensSize,\n              height: lensSize,\n              borderRadius: '50%',\n              pointerEvents: 'none',\n              zIndex: 30,\n            }}\n            className=\"overflow-hidden border-2 border-indigo-500/80 shadow-[0_0_24px_rgba(99,102,241,0.4)] backdrop-blur-xs\"\n          >\n            <div\n              style={{\n                position: 'absolute',\n                left: -(mousePos.x * zoomFactor - lensSize / 2),\n                top: -(mousePos.y * zoomFactor - lensSize / 2),\n                transform: `scale(${zoomFactor})`,\n                transformOrigin: 'top left',\n                width: containerRef.current?.offsetWidth || 'auto',\n                height: containerRef.current?.offsetHeight || 'auto',\n              }}\n            >\n              {content}\n            </div>\n\n            <div className=\"absolute inset-0 pointer-events-none rounded-full ring-1 ring-inset ring-white/20 bg-gradient-to-tr from-indigo-500/10 via-transparent to-white/20\" />\n            <div className=\"absolute inset-x-0 top-1/2 h-[1px] bg-indigo-500/30 -translate-y-1/2 pointer-events-none\" />\n            <div className=\"absolute inset-y-0 left-1/2 w-[1px] bg-indigo-500/30 -translate-x-1/2 pointer-events-none\" />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  )\n}\n\nexport default InteractiveLens\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}