import { forwardRef, useImperativeHandle } from "react"; import { motion, useAnimate } from "motion/react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; const BrandReactIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = async () => { await animate( ".center-dot", { scale: [1, 1.4, 1.2] }, { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] }, ); animate(".orbit-1", { rotate: 360 }, { duration: 1, ease: "linear" }); animate(".orbit-2", { rotate: -360 }, { duration: 2, ease: "linear" }); animate(".orbit-3", { rotate: 360 }, { duration: 4, ease: "linear" }); // Pulsing center dot animate( ".center-dot", { scale: [1.2, 1.35, 1.2], opacity: [1, 0.8, 1], }, { duration: 2, ease: "easeInOut" }, ); // Subtle breathing effect on all orbits animate( ".orbit-1", { scale: [1, 1.02, 1] }, { duration: 3, ease: "easeInOut" }, ); animate( ".orbit-2", { scale: [1, 1.03, 1] }, { duration: 3.5, ease: "easeInOut", delay: 0.5 }, ); animate( ".orbit-3", { scale: [1, 1.02, 1] }, { duration: 4, ease: "easeInOut", delay: 1 }, ); }; const stop = async () => { // Smooth deceleration await animate( ".orbit-1", { rotate: 0, scale: 1 }, { duration: 0.8, ease: [0.22, 1, 0.36, 1] }, ); await animate( ".orbit-2", { rotate: 0, scale: 1 }, { duration: 0.8, ease: [0.22, 1, 0.36, 1] }, ); await animate( ".orbit-3", { rotate: 0, scale: 1 }, { duration: 0.8, ease: [0.22, 1, 0.36, 1] }, ); // Center dot settles back await animate( ".center-dot", { scale: 1, opacity: 1 }, { duration: 0.5, ease: "easeOut" }, ); }; useImperativeHandle(ref, () => { return { startAnimation: start, stopAnimation: stop, }; }); return ( ); }, ); BrandReactIcon.displayName = "BrandReactIcon"; export default BrandReactIcon;

brand-react-icon

Installation