brand-react-icon

1import { forwardRef, useImperativeHandle } from "react";
2import { motion, useAnimate } from "motion/react";
3import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
4 
5const BrandReactIcon = 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        ".center-dot",
15        { scale: [1, 1.4, 1.2] },
16        { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] },
17      );
18 
19      animate(".orbit-1", { rotate: 360 }, { duration: 1, ease: "linear" });
20      animate(".orbit-2", { rotate: -360 }, { duration: 2, ease: "linear" });
21      animate(".orbit-3", { rotate: 360 }, { duration: 4, ease: "linear" });
22 
23      // Pulsing center dot
24      animate(
25        ".center-dot",
26        {
27          scale: [1.2, 1.35, 1.2],
28          opacity: [1, 0.8, 1],
29        },
30        { duration: 2, ease: "easeInOut" },
31      );
32 
33      // Subtle breathing effect on all orbits
34      animate(
35        ".orbit-1",
36        { scale: [1, 1.02, 1] },
37        { duration: 3, ease: "easeInOut" },
38      );
39      animate(
40        ".orbit-2",
41        { scale: [1, 1.03, 1] },
42        { duration: 3.5, ease: "easeInOut", delay: 0.5 },
43      );
44      animate(
45        ".orbit-3",
46        { scale: [1, 1.02, 1] },
47        { duration: 4, ease: "easeInOut", delay: 1 },
48      );
49    };
50 
51    const stop = async () => {
52      // Smooth deceleration
53      await animate(
54        ".orbit-1",
55        { rotate: 0, scale: 1 },
56        { duration: 0.8, ease: [0.22, 1, 0.36, 1] },
57      );
58      await animate(
59        ".orbit-2",
60        { rotate: 0, scale: 1 },
61        { duration: 0.8, ease: [0.22, 1, 0.36, 1] },
62      );
63      await animate(
64        ".orbit-3",
65        { rotate: 0, scale: 1 },
66        { duration: 0.8, ease: [0.22, 1, 0.36, 1] },
67      );
68 
69      // Center dot settles back
70      await animate(
71        ".center-dot",
72        { scale: 1, opacity: 1 },
73        { duration: 0.5, ease: "easeOut" },
74      );
75    };
76 
77    useImperativeHandle(ref, () => {
78      return {
79        startAnimation: start,
80        stopAnimation: stop,
81      };
82    });
83 
84    return (
85      <motion.svg
86        ref={scope}
87        onHoverStart={start}
88        onHoverEnd={stop}
89        xmlns="http://www.w3.org/2000/svg"
90        width={size}
91        height={size}
92        viewBox="0 0 24 24"
93        fill="none"
94        stroke={color}
95// … truncated