lu-angry

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 AngryIconHandle {
20 startAnimation: () => void;
21 stopAnimation: () => void;
22}
23 
24interface AngryIconProps 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 AngryIcon = forwardRef<AngryIconHandle, AngryIconProps>(
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: async () => {
62     if (reduced) {
63      controls.start("normal");
64      return;
65     }
66     await controls.start("tense");
67     await controls.start("shake");
68     await controls.start("flash");
69     await controls.start("calm");
70    },
71    stopAnimation: () => controls.start("normal"),
72   };
73  });
74 
75  const handleEnter = useCallback(
76   async (e?: React.MouseEvent<HTMLDivElement>) => {
77    if (!isAnimated || reduced) return;
78    if (!isControlled.current) {
79     await controls.start("tense");
80     await controls.start("shake");
81     await controls.start("flash");
82     await controls.start("calm");
83    } else onMouseEnter?.(e as any);
84   },
85   [controls, reduced, isAnimated, onMouseEnter],
86  );
87 
88  const handleLeave = useCallback(
89   (e?: React.MouseEvent<HTMLDivElement>) => {
90    if (!isControlled.current) controls.start("normal");
91    else onMouseLeave?.(e as any);
92   },
93   [controls, onMouseLeave],
94  );
95 
96  const container: Variants = {
97   normal: { rotate: 0, scale: 1 },
98   tense: {
99    scale: 0.95,
100    transition: {
101     duration: 0.2 * duration,
102     ease: [0.4, 0, 0.6, 1],
103    },
104   },
105   shake: {
106    rotate: [0, -4, 4, -3, 3, -2, 2, 0],
107    scale: 1,
108    transition: {
109     duration: 0.5 * duration,
110     ease: "linear",
111    },
112   },
113   flash: {
114    scale: [1, 1.1, 1],
115    transition: {
116     duration: 0.3 * duration,
117     ease: [0.34, 1.56, 0.64, 1],
118    },
119   },
120   calm: {
121// … truncated