hu-eye

1"use client";
2 
3import { cn } from "@/lib/utils";
4import type { Variants } from "motion/react";
5import {
6 LazyMotion,
7 domMin,
8 m,
9 useAnimation,
10 useReducedMotion,
11} from "motion/react";
12import {
13 forwardRef,
14 useCallback,
15 useImperativeHandle,
16 useRef,
17 type HTMLAttributes,
18} from "react";
19export interface EyeIconHandle {
20 startAnimation: () => void;
21 stopAnimation: () => void;
22}
23 
24interface EyeIconProps extends Omit<
25 HTMLAttributes<HTMLDivElement>,
26 | "color"
27 | "onDrag"
28 | "onDragStart"
29 | "onDragEnd"
30 | "onAnimationStart"
31 | "onAnimationEnd"
32 | "onAnimationIteration"
33> {
34 size?: number;
35 duration?: number;
36 isAnimated?: boolean;
37 color?: string;
38}
39 
40const EyeIcon = forwardRef<EyeIconHandle, EyeIconProps>(
41 (
42  {
43   onMouseEnter,
44   onMouseLeave,
45   className,
46   size = 24,
47   duration = 1,
48   isAnimated = true,
49   color,
50   ...props
51  },
52  ref,
53 ) => {
54  const eyeControls = useAnimation();
55  const pupilControls = useAnimation();
56  const reduced = useReducedMotion();
57  const isControlled = useRef(false);
58 
59  useImperativeHandle(ref, () => {
60   isControlled.current = true;
61   return {
62    startAnimation: () => {
63     if (reduced) {
64      eyeControls.start("open");
65      pupilControls.start("center");
66     } else {
67      eyeControls.start("blink");
68      pupilControls.start("scan");
69     }
70    },
71    stopAnimation: () => {
72     eyeControls.start("open");
73     pupilControls.start("center");
74    },
75   };
76  });
77 
78  const handleEnter = useCallback(
79   (e?: React.MouseEvent<HTMLDivElement>) => {
80    if (!isAnimated || reduced) return;
81    if (!isControlled.current) {
82     eyeControls.start("blink");
83     pupilControls.start("scan");
84    } else {
85     onMouseEnter?.(e as any);
86    }
87   },
88   [eyeControls, pupilControls, onMouseEnter, reduced, isAnimated],
89  );
90 
91  const handleLeave = useCallback(
92   (e: React.MouseEvent<HTMLDivElement>) => {
93    if (!isControlled.current) {
94     eyeControls.start("open");
95     pupilControls.start("center");
96    } else {
97     onMouseLeave?.(e as any);
98    }
99   },
100   [eyeControls, pupilControls, onMouseLeave],
101  );
102 
103  const eyeVariants: Variants = {
104   open: { scaleY: 1 },
105   blink: {
106    scaleY: [1, 0.1, 1],
107    transition: {
108     duration: 0.25 * duration,
109     ease: "easeInOut",
110    },
111   },
112  };
113 
114  const pupilVariants: Variants = {
115   center: { x: 0 },
116   scan: {
117    x: [-2, 2, -1, 1, 0],
118    transition: {
119     duration: 1.6 * duration,
120     ease: "easeInOut",
121    },
122   },
123  };
124 
125  return (
126// … truncated