Lens

1"use client"
2 
3import React, { useCallback, useMemo, useRef, useState } from "react"
4import { AnimatePresence, motion, useMotionTemplate } from "motion/react"
5 
6interface Position {
7  /** The x coordinate of the lens */
8  x: number
9  /** The y coordinate of the lens */
10  y: number
11}
12 
13interface LensProps {
14  /** The children of the lens */
15  children: React.ReactNode
16  /** The zoom factor of the lens */
17  zoomFactor?: number
18  /** The size of the lens */
19  lensSize?: number
20  /** The position of the lens */
21  position?: Position
22  /** The default position of the lens */
23  defaultPosition?: Position
24  /** Whether the lens is static */
25  isStatic?: boolean
26  /** The duration of the animation */
27  duration?: number
28  /** The color of the lens */
29  lensColor?: string
30  /** The aria label of the lens */
31  ariaLabel?: string
32}
33 
34export function Lens({
35  children,
36  zoomFactor = 1.3,
37  lensSize = 170,
38  isStatic = false,
39  position = { x: 0, y: 0 },
40  defaultPosition,
41  duration = 0.1,
42  lensColor = "black",
43  ariaLabel = "Zoom Area",
44}: LensProps) {
45  if (zoomFactor < 1) {
46    throw new Error("zoomFactor must be greater than 1")
47  }
48  if (lensSize < 0) {
49    throw new Error("lensSize must be greater than 0")
50  }
51 
52  const [isHovering, setIsHovering] = useState(false)
53  const [mousePosition, setMousePosition] = useState<Position>(position)
54  const containerRef = useRef<HTMLDivElement>(null)
55 
56  const currentPosition = useMemo(() => {
57    if (isStatic) return position
58    if (defaultPosition && !isHovering) return defaultPosition
59    return mousePosition
60  }, [isStatic, position, defaultPosition, isHovering, mousePosition])
61 
62  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
63    const rect = e.currentTarget.getBoundingClientRect()
64    setMousePosition({
65      x: e.clientX - rect.left,
66      y: e.clientY - rect.top,
67    })
68  }, [])
69 
70  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
71    if (e.key === "Escape") setIsHovering(false)
72  }, [])
73 
74  const maskImage = useMotionTemplate`radial-gradient(circle ${
75    lensSize / 2
76  }px at ${currentPosition.x}px ${
77    currentPosition.y
78  }px, ${lensColor} 100%, transparent 100%)`
79 
80  const LensContent = useMemo(() => {
81    const { x, y } = currentPosition
82 
83    return (
84      <motion.div
85        initial={{ opacity: 0, scale: 0.58 }}
86        animate={{ opacity: 1, scale: 1 }}
87        exit={{ opacity: 0, scale: 0.8 }}
88        transition={{ duration }}
89// … truncated