import { forwardRef, useImperativeHandle, useRef } from "react"; import { motion, useAnimate } from "motion/react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; const BrandReactNativeIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const animationControls = useRef>>([]); const start = async () => { // Clear any existing animations animationControls.current.forEach((control) => control.stop()); animationControls.current = []; // Smooth pop entrance await animate( ".orbit-system", { scale: [0.95, 1.02, 1] }, { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] }, ); // Center dot gentle pulse animationControls.current.push( animate( ".center-dot", { scale: [1, 1.3, 1], opacity: [1, 0.8, 1], }, { duration: 2.5, ease: "easeInOut", repeat: Infinity, }, ), ); // Smooth continuous rotation animationControls.current.push( animate( ".orbit-system", { rotate: 360 }, { duration: 20, ease: "linear", repeat: Infinity, }, ), ); // Subtle wave through rings const rings = [".ring-1", ".ring-2", ".ring-3"]; rings.forEach((ring, i) => { animationControls.current.push( animate( ring, { opacity: [1, 0.7, 1], }, { duration: 3, ease: "easeInOut", repeat: Infinity, delay: i * 1, }, ), ); }); }; const stop = () => { // Cancel all infinite animations animationControls.current.forEach((control) => control.stop()); animationControls.current = []; animate( ".orbit-system", { rotate: 0, scale: 1 }, { duration: 0.6, ease: [0.34, 1.56, 0.64, 1] }, ); animate(".ring-1, .ring-2, .ring-3", { opacity: 1 }, { duration: 0.3 }); animate(".center-dot", { scale: 1, opacity: 1 }, { duration: 0.3 }); }; useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); BrandReactNativeIcon.displayName = "BrandReactNativeIcon"; export default BrandReactNativeIcon;

brand-react-native-icon

Installation