brand-wordpress-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandWordPressIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = useCallback(() => {
13      // 1. Orbit Group Rotation: Rotate all internal elements together
14      animate(
15        ".wp-orbit-group",
16        { rotate: 360 },
17        { duration: 1, ease: "easeInOut" },
18      );
19 
20      // 2. Subtle pulse for the whole icon to feel alive
21      animate(
22        scope.current,
23        { scale: 1.02 },
24        { duration: 0.3, ease: "easeOut" },
25      );
26    }, [animate, scope]);
27 
28    const stop = useCallback(() => {
29      animate(
30        ".wp-orbit-group",
31        { rotate: 0 },
32        { duration: 0.5, ease: "easeInOut" },
33      );
34      animate(scope.current, { scale: 1 }, { duration: 0.3, ease: "easeOut" });
35    }, [animate, scope]);
36 
37    useImperativeHandle(
38      ref,
39      () => ({
40        startAnimation: start,
41        stopAnimation: stop,
42      }),
43      [start, stop],
44    );
45 
46    return (
47      <motion.svg
48        ref={scope}
49        onHoverStart={start}
50        onHoverEnd={stop}
51        xmlns="http://www.w3.org/2000/svg"
52        width={size}
53        height={size}
54        viewBox="0 0 24 24"
55        fill="none"
56        stroke={color}
57        strokeWidth={strokeWidth}
58        strokeLinecap="round"
59        strokeLinejoin="round"
60        className={`cursor-pointer ${className}`}
61        style={{ overflow: "visible" }}
62      >
63        {/* Orbit Group: Everything except the circle */}
64        <motion.g
65          className="wp-orbit-group"
66          style={{ originX: "7px", originY: "7px" }}
67        >
68          {/* Horizontal Bars */}
69          <path d="M9.5 9h3" />
70          <path d="M4 9h2.5" />
71 
72          {/* W Segments */}
73          <path d="M11 9l3 11l4 -9" />
74          <path d="M5.5 9l3.5 11l3 -7" />
75 
76          {/* Ink Flourish */}
77          <path d="M18 11c.177 -.528 1 -1.364 1 -2.5c0 -1.78 -.776 -2.5 -1.875 -2.5c-.898 0 -1.125 .812 -1.125 1.429c0 1.83 2 2.058 2 3.571" />
78        </motion.g>
79 
80        {/* Outer Circle (Static Orbit Path) */}
81        <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
82      </motion.svg>
83    );
84  },
85);
86 
87BrandWordPressIcon.displayName = "BrandWordPressIcon";
88// … truncated