"use client"; import React, { useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; interface LensProps { children: React.ReactNode; zoomFactor?: number; lensSize?: number; position?: { x: number; y: number; }; isStatic?: boolean; isFocusing?: () => void; hovering?: boolean; setHovering?: (hovering: boolean) => void; } export const Lens: React.FC = ({ children, zoomFactor = 1.5, lensSize = 170, isStatic = false, position = { x: 200, y: 150 }, hovering, setHovering, }) => { const containerRef = useRef(null); const [localIsHovering, setLocalIsHovering] = useState(false); const isHovering = hovering !== undefined ? hovering : localIsHovering; const setIsHovering = setHovering || setLocalIsHovering; // const [isHovering, setIsHovering] = useState(false); const [mousePosition, setMousePosition] = useState({ x: 100, y: 100 }); const handleMouseMove = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; setMousePosition({ x, y }); }; return (

{ setIsHovering(true); }} onMouseLeave={() => setIsHovering(false)} onMouseMove={handleMouseMove} > {children} {isStatic ? (

{children}

) : ( {isHovering && (

{children}

)} )}

); };

Lens

Instalação

Dependências