brand-zoom-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandZoomIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      await animate(
14        scope.current,
15        {
16          scale: [1, 0.7],
17          opacity: [1, 0.6],
18        },
19        {
20          duration: 0.2,
21          ease: "easeIn",
22        },
23      );
24      await animate(
25        scope.current,
26        {
27          scale: [0.7, 1.3, 1.15],
28          opacity: [0.6, 1],
29          rotateY: [0, 360],
30          rotateX: [0, 15, 0],
31        },
32        {
33          duration: 0.6,
34          ease: [0.34, 1.56, 0.64, 1],
35        },
36      );
37 
38      animate(
39        "motion\\:nth-of-type(1)",
40        {
41          x: [0, 3, 0],
42          opacity: [1, 0.7, 1],
43        },
44        {
45          duration: 0.3,
46          repeat: 2,
47          ease: "easeInOut",
48        },
49      );
50 
51      await animate(
52        "motion\\:nth-of-type(2)",
53        {
54          scale: [1, 1.08, 1.05, 1],
55          fill: ["none", "rgba(59, 130, 246, 0.1)", "none"],
56        },
57        {
58          duration: 0.5,
59          ease: "easeOut",
60        },
61      );
62 
63      animate(
64        scope.current,
65        {
66          y: [0, -2, 0],
67          scale: [1.15, 1.05, 1],
68        },
69        {
70          duration: 0.4,
71          ease: "easeOut",
72        },
73      );
74    };
75 
76    const stop = () => {
77      animate(
78        scope.current,
79        {
80          scale: 1,
81          rotateY: 0,
82          rotateX: 0,
83          y: 0,
84          opacity: 1,
85        },
86        {
87          duration: 0.3,
88          ease: "easeOut",
89        },
90      );
91    };
92 
93    useImperativeHandle(ref, () => {
94      return {
95        startAnimation: start,
96        stopAnimation: stop,
97      };
98    });
99 
100    const handleHoverStart = () => {
101      start();
102    };
103 
104    const handleHoverEnd = () => {
105      stop();
106    };
107 
108    return (
109      <motion.svg
110        ref={scope}
111        onHoverStart={handleHoverStart}
112        onHoverEnd={handleHoverEnd}
113        xmlns="http://www.w3.org/2000/svg"
114        width={size}
115        height={size}
116        viewBox="0 0 24 24"
117        fill="none"
118        stroke={color}
119        strokeWidth={strokeWidth}
120        strokeLinecap="round"
121// … truncated