angry

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 AngryIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface AngryIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const EYEBROW_ROTATION = 20;
20const DURATION = 0.6;
21 
22const PATH_VARIANTS_FACE: Variants = {
23  normal: { scale: 1, rotate: 0 },
24  animate: {
25    scale: [1, 1.2, 1.2, 1.2, 1],
26    rotate: [0, -3, 3, -1, 1, 0],
27    transition: {
28      duration: DURATION,
29      times: [0, 0.2, 0.4, 0.6, 1],
30      ease: "easeInOut",
31    },
32  },
33};
34 
35const PATH_VARIANTS_LEFT_EYEBROW: Variants = {
36  normal: { rotate: 0 },
37  animate: {
38    rotate: [0, EYEBROW_ROTATION, 0],
39    transition: {
40      duration: DURATION + 0.2,
41    },
42  },
43};
44 
45const PATH_VARIANTS_RIGHT_EYEBROW: Variants = {
46  normal: { rotate: 0 },
47  animate: {
48    rotate: [0, -EYEBROW_ROTATION, 0],
49    transition: {
50      duration: DURATION + 0.2,
51    },
52  },
53};
54 
55const PATH_VARIANTS_EYE: Variants = {
56  normal: { scale: 1 },
57  animate: {
58    scale: [1, 1.2, 1],
59    transition: {
60      duration: DURATION,
61    },
62  },
63};
64 
65const PATH_VARIANTS_MOUTH: Variants = {
66  normal: { translateY: 0 },
67  animate: {
68    translateY: [0, -0.5, 0],
69    transition: {
70      duration: DURATION,
71    },
72  },
73};
74 
75const AngryIcon = forwardRef<AngryIconHandle, AngryIconProps>(
76  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
77    const controls = useAnimation();
78    const isControlledRef = useRef(false);
79 
80    useImperativeHandle(ref, () => {
81      isControlledRef.current = true;
82 
83      return {
84        startAnimation: () => controls.start("animate"),
85        stopAnimation: () => controls.start("normal"),
86      };
87    });
88 
89    const handleMouseEnter = useCallback(
90      (e: React.MouseEvent<HTMLDivElement>) => {
91        if (isControlledRef.current) {
92          onMouseEnter?.(e);
93        } else {
94          controls.start("animate");
95        }
96      },
97      [controls, onMouseEnter]
98    );
99 
100    const handleMouseLeave = useCallback(
101      (e: React.MouseEvent<HTMLDivElement>) => {
102        if (isControlledRef.current) {
103          onMouseLeave?.(e);
104        } else {
105          controls.start("normal");
106        }
107      },
108      [controls, onMouseLeave]
109    );
110 
111    return (
112// … truncated