import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const BrandWordPressIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(() => { // 1. Orbit Group Rotation: Rotate all internal elements together animate( ".wp-orbit-group", { rotate: 360 }, { duration: 1, ease: "easeInOut" }, ); // 2. Subtle pulse for the whole icon to feel alive animate( scope.current, { scale: 1.02 }, { duration: 0.3, ease: "easeOut" }, ); }, [animate, scope]); const stop = useCallback(() => { animate( ".wp-orbit-group", { rotate: 0 }, { duration: 0.5, ease: "easeInOut" }, ); animate(scope.current, { scale: 1 }, { duration: 0.3, ease: "easeOut" }); }, [animate, scope]); useImperativeHandle( ref, () => ({ startAnimation: start, stopAnimation: stop, }), [start, stop], ); return ( {/* Orbit Group: Everything except the circle */} {/* Horizontal Bars */} {/* W Segments */} {/* Ink Flourish */} {/* Outer Circle (Static Orbit Path) */} ); }, ); BrandWordPressIcon.displayName = "BrandWordPressIcon"; export default BrandWordPressIcon;

brand-wordpress-icon

Installation