lu-annoyed

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 AnnoyedIconHandle {
20 startAnimation: () => void;
21 stopAnimation: () => void;
22}
23 
24interface AnnoyedIconProps 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 AnnoyedIcon = forwardRef<AnnoyedIconHandle, AnnoyedIconProps>(
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 controls = useAnimation();
55  const reduced = useReducedMotion();
56  const isControlled = useRef(false);
57 
58  useImperativeHandle(ref, () => {
59   isControlled.current = true;
60   return {
61    startAnimation: () =>
62     reduced ? controls.start("normal") : controls.start("animate"),
63    stopAnimation: () => controls.start("normal"),
64   };
65  });
66 
67  const handleEnter = useCallback(
68   (e?: React.MouseEvent<HTMLDivElement>) => {
69    if (!isAnimated || reduced) return;
70    if (!isControlled.current) controls.start("animate");
71    else onMouseEnter?.(e as any);
72   },
73   [controls, reduced, isAnimated, onMouseEnter],
74  );
75 
76  const handleLeave = useCallback(
77   (e?: React.MouseEvent<HTMLDivElement>) => {
78    if (!isControlled.current) controls.start("normal");
79    else onMouseLeave?.(e as any);
80   },
81   [controls, onMouseLeave],
82  );
83 
84  const container: Variants = {
85   normal: { rotate: 0, x: 0 },
86   animate: {
87    rotate: [0, -2, 2, 0],
88    x: [0, -0.5, 0.5, 0],
89    transition: {
90     duration: 0.45 * duration,
91     ease: "easeOut",
92    },
93   },
94  };
95 
96  const face: Variants = {
97   normal: { y: 0 },
98   animate: {
99    y: [0, 0.5, 0],
100    transition: {
101     duration: 0.3 * duration,
102     ease: "easeOut",
103    },
104   },
105  };
106 
107  const eye = (dir: number): Variants => ({
108   normal: { x: 0 },
109   animate: {
110    x: [0, dir, 0],
111    transition: {
112     duration: 0.25 * duration,
113     ease: "easeOut",
114    },
115   },
116  });
117 
118  const mouth: Variants = {
119   normal: { scaleX: 1 },
120   animate: {
121    scaleX: [1, 0.9, 1],
122    transition: {
123     duration: 0.3 * duration,
124     ease: "easeOut",
125    },
126   },
127  };
128 
129// … truncated