{
  "name": "lens",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/lens.tsx",
      "content": "\"use client\";\n\nimport React, { useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\ninterface LensProps {\n  children: React.ReactNode;\n  zoomFactor?: number;\n  lensSize?: number;\n  position?: {\n    x: number;\n    y: number;\n  };\n  isStatic?: boolean;\n  isFocusing?: () => void;\n  hovering?: boolean;\n  setHovering?: (hovering: boolean) => void;\n}\n\nexport const Lens: React.FC<LensProps> = ({\n  children,\n  zoomFactor = 1.5,\n  lensSize = 170,\n  isStatic = false,\n  position = { x: 200, y: 150 },\n  hovering,\n  setHovering,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [localIsHovering, setLocalIsHovering] = useState(false);\n\n  const isHovering = hovering !== undefined ? hovering : localIsHovering;\n  const setIsHovering = setHovering || setLocalIsHovering;\n\n  // const [isHovering, setIsHovering] = useState(false);\n  const [mousePosition, setMousePosition] = useState({ x: 100, y: 100 });\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    setMousePosition({ x, y });\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"relative overflow-hidden rounded-lg z-20\"\n      onMouseEnter={() => {\n        setIsHovering(true);\n      }}\n      onMouseLeave={() => setIsHovering(false)}\n      onMouseMove={handleMouseMove}\n    >\n      {children}\n\n      {isStatic ? (\n        <div>\n          <motion.div\n            initial={{ opacity: 0, scale: 0.58 }}\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.8 }}\n            transition={{ duration: 0.3, ease: \"easeOut\" }}\n            className=\"absolute inset-0 overflow-hidden\"\n            style={{\n              maskImage: `radial-gradient(circle ${lensSize / 2}px at ${\n                position.x\n              }px ${position.y}px, black 100%, transparent 100%)`,\n              WebkitMaskImage: `radial-gradient(circle ${lensSize / 2}px at ${\n                position.x\n              }px ${position.y}px, black 100%, transparent 100%)`,\n              transformOrigin: `${position.x}px ${position.y}px`,\n            }}\n          >\n            <div\n              className=\"absolute inset-0\"\n              style={{\n                transform: `scale(${zoomFactor})`,\n                transformOrigin: `${position.x}px ${position.y}px`,\n              }}\n            >\n              {children}\n            </div>\n          </motion.div>\n        </div>\n      ) : (\n        <AnimatePresence>\n          {isHovering && (\n            <div>\n              <motion.div\n                initial={{ opacity: 0, scale: 0.58 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.8 }}\n                transition={{ duration: 0.3, ease: \"easeOut\" }}\n                className=\"absolute inset-0 overflow-hidden\"\n                style={{\n                  maskImage: `radial-gradient(circle ${lensSize / 2}px at ${\n                    mousePosition.x\n                  }px ${mousePosition.y}px, black 100%, transparent 100%)`,\n                  WebkitMaskImage: `radial-gradient(circle ${\n                    lensSize / 2\n                  }px at ${mousePosition.x}px ${\n                    mousePosition.y\n                  }px, black 100%, transparent 100%)`,\n                  transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`,\n                  zIndex: 50,\n                }}\n              >\n                <div\n                  className=\"absolute inset-0\"\n                  style={{\n                    transform: `scale(${zoomFactor})`,\n                    transformOrigin: `${mousePosition.x}px ${mousePosition.y}px`,\n                  }}\n                >\n                  {children}\n                </div>\n              </motion.div>\n            </div>\n          )}\n        </AnimatePresence>\n      )}\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/lens.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Lens"
}