brand-react-native-icon

1import { forwardRef, useImperativeHandle, useRef } from "react";
2import { motion, useAnimate } from "motion/react";
3import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
4 
5const BrandReactNativeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11    const animationControls = useRef<Array<ReturnType<typeof animate>>>([]);
12 
13    const start = async () => {
14      // Clear any existing animations
15      animationControls.current.forEach((control) => control.stop());
16      animationControls.current = [];
17 
18      // Smooth pop entrance
19      await animate(
20        ".orbit-system",
21        { scale: [0.95, 1.02, 1] },
22        { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] },
23      );
24 
25      // Center dot gentle pulse
26      animationControls.current.push(
27        animate(
28          ".center-dot",
29          {
30            scale: [1, 1.3, 1],
31            opacity: [1, 0.8, 1],
32          },
33          {
34            duration: 2.5,
35            ease: "easeInOut",
36            repeat: Infinity,
37          },
38        ),
39      );
40 
41      // Smooth continuous rotation
42      animationControls.current.push(
43        animate(
44          ".orbit-system",
45          { rotate: 360 },
46          {
47            duration: 20,
48            ease: "linear",
49            repeat: Infinity,
50          },
51        ),
52      );
53 
54      // Subtle wave through rings
55      const rings = [".ring-1", ".ring-2", ".ring-3"];
56      rings.forEach((ring, i) => {
57        animationControls.current.push(
58          animate(
59            ring,
60            {
61              opacity: [1, 0.7, 1],
62            },
63            {
64              duration: 3,
65              ease: "easeInOut",
66              repeat: Infinity,
67              delay: i * 1,
68            },
69          ),
70        );
71      });
72    };
73 
74    const stop = () => {
75      // Cancel all infinite animations
76      animationControls.current.forEach((control) => control.stop());
77      animationControls.current = [];
78 
79      animate(
80        ".orbit-system",
81        { rotate: 0, scale: 1 },
82        { duration: 0.6, ease: [0.34, 1.56, 0.64, 1] },
83      );
84 
85      animate(".ring-1, .ring-2, .ring-3", { opacity: 1 }, { duration: 0.3 });
86 
87      animate(".center-dot", { scale: 1, opacity: 1 }, { duration: 0.3 });
88    };
89 
90    useImperativeHandle(ref, () => ({
91      startAnimation: start,
92      stopAnimation: stop,
93    }));
94 
95// … truncated