Eye Tracking

1"use client"
2 
3import * as React from "react"
4import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
5import { cn } from "@/lib/utils"
6 
7interface EyeTrackingProps {
8  /** Additional CSS classes */
9  className?: string
10  /** Size of each eye in pixels */
11  eyeSize?: number
12  /** Gap between eyes in pixels */
13  gap?: number
14  /** Color of the iris */
15  irisColor?: string
16  /** Secondary iris color for gradient */
17  irisColorSecondary?: string
18  /** Pupil color */
19  pupilColor?: string
20  /** Sclera (white) color */
21  scleraColor?: string
22  /** How far the pupil can travel (0-1) */
23  pupilRange?: number
24  /** Enable the reflection/glint effect */
25  showReflection?: boolean
26  /** Enable iris detail pattern */
27  showIrisDetail?: boolean
28  /** Enable subtle idle animation when cursor is away */
29  idleAnimation?: boolean
30  /** Blink interval in milliseconds (0 to disable) */
31  blinkInterval?: number
32  /** Number of eyes */
33  eyeCount?: number
34  /** Variant style */
35  variant?: "realistic" | "cartoon" | "minimal" | "cyber"
36  /** Enable reactive pupil dilation */
37  reactivePupil?: boolean
38  /** Eyelid visibility */
39  showEyelids?: boolean
40}
41 
42interface EyeProps {
43  eyeSize: number
44  irisColor: string
45  irisColorSecondary: string
46  pupilColor: string
47  scleraColor: string
48  pupilRange: number
49  showReflection: boolean
50  showIrisDetail: boolean
51  blinkInterval: number
52  variant: "realistic" | "cartoon" | "minimal" | "cyber"
53  reactivePupil: boolean
54  showEyelids: boolean
55  mouseX: React.MutableRefObject<number>
56  mouseY: React.MutableRefObject<number>
57  index: number
58}
59 
60function Eye({
61  eyeSize,
62  irisColor,
63  irisColorSecondary,
64  pupilColor,
65  scleraColor,
66  pupilRange,
67  showReflection,
68  showIrisDetail,
69  blinkInterval,
70  variant,
71  reactivePupil,
72  showEyelids,
73  mouseX,
74  mouseY,
75  index,
76}: EyeProps) {
77  const eyeRef = React.useRef<HTMLDivElement>(null)
78  const [isBlinking, setIsBlinking] = React.useState(false)
79  const [pupilScale, setPupilScale] = React.useState(1)
80 
81  const x = useMotionValue(0)
82  const y = useMotionValue(0)
83  const springX = useSpring(x, { stiffness: 300, damping: 25, mass: 0.5 })
84  const springY = useSpring(y, { stiffness: 300, damping: 25, mass: 0.5 })
85 
86  const irisSize = eyeSize * 0.45
87  const pupilSize = irisSize * 0.5
88  const maxOffset = (eyeSize / 2 - irisSize / 2) * pupilRange
89 
90  // Blink animation
91  React.useEffect(() => {
92    if (blinkInterval <= 0) return
93 
94    const blink = () => {
95      setIsBlinking(true)
96// … truncated