annoyed

1"use client";
2 
3import type { Variants } from "motion/react";
4import { motion, useAnimation } from "motion/react";
5import type { HTMLAttributes } from "react";
6import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
7 
8import { cn } from "@/lib/utils";
9 
10export interface AnnoyedIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface AnnoyedIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const AnnoyedIcon = forwardRef<AnnoyedIconHandle, AnnoyedIconProps>(
20  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
21    const controls = useAnimation();
22    const isControlledRef = useRef(false);
23 
24    useImperativeHandle(ref, () => {
25      isControlledRef.current = true;
26      return {
27        startAnimation: () => controls.start("animate"),
28        stopAnimation: () => controls.start("normal"),
29      };
30    });
31 
32    const handleMouseEnter = useCallback(
33      (e: React.MouseEvent<HTMLDivElement>) => {
34        if (!isControlledRef.current) controls.start("animate");
35        onMouseEnter?.(e);
36      },
37      [controls, onMouseEnter]
38    );
39 
40    const handleMouseLeave = useCallback(
41      (e: React.MouseEvent<HTMLDivElement>) => {
42        if (!isControlledRef.current) controls.start("normal");
43        onMouseLeave?.(e);
44      },
45      [controls, onMouseLeave]
46    );
47 
48    const faceVariants: Variants = {
49      normal: {
50        scale: 1,
51        transition: { duration: 0.2, ease: "easeOut" },
52      },
53      animate: {
54        scale: 1.05,
55        transition: {
56          duration: 0.3,
57          ease: "easeOut",
58        },
59      },
60    };
61 
62    const mouthVariants: Variants = {
63      normal: {
64        scaleX: 1,
65        y: 0,
66        transition: { duration: 0.2, ease: "easeOut" },
67      },
68      animate: {
69        scaleX: 0.8,
70        y: 1,
71        transition: {
72          duration: 0.3,
73          ease: "easeOut",
74        },
75      },
76    };
77 
78    const leftEyebrowVariants: Variants = {
79      normal: {
80        rotate: 0,
81        y: 0,
82        x: 0,
83        transition: { duration: 0.2, ease: "easeOut" },
84      },
85      animate: {
86        rotate: 15,
87        y: -1,
88        x: -0.5,
89        transition: {
90          duration: 0.25,
91          ease: "easeOut",
92        },
93      },
94    };
95 
96    const rightEyebrowVariants: Variants = {
97      normal: {
98        rotate: 0,
99        y: 0,
100        x: 0,
101        transition: { duration: 0.2, ease: "easeOut" },
102      },
103      animate: {
104// … truncated