brand-xai-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandXaiIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  ({ size = 24, color = "currentColor", className = "" }, ref) => {
7    const [scope, animate] = useAnimate();
8 
9    const start = useCallback(() => {
10      // Explode: all 4 parts move outward in different directions
11      animate(
12        ".xai-part-1",
13        { x: -4, y: -2 },
14        { duration: 0.25, ease: "easeOut" },
15      );
16      animate(
17        ".xai-part-2",
18        { x: -3, y: 3 },
19        { duration: 0.25, ease: "easeOut" },
20      );
21      animate(
22        ".xai-part-3",
23        { x: 4, y: -3 },
24        { duration: 0.25, ease: "easeOut" },
25      );
26      animate(
27        ".xai-part-4",
28        { x: 3, y: 2 },
29        { duration: 0.25, ease: "easeOut" },
30      );
31 
32      // Then merge back
33      setTimeout(() => {
34        animate(
35          ".xai-part-1",
36          { x: 0, y: 0 },
37          { duration: 0.3, ease: "easeInOut" },
38        );
39        animate(
40          ".xai-part-2",
41          { x: 0, y: 0 },
42          { duration: 0.3, ease: "easeInOut" },
43        );
44        animate(
45          ".xai-part-3",
46          { x: 0, y: 0 },
47          { duration: 0.3, ease: "easeInOut" },
48        );
49        animate(
50          ".xai-part-4",
51          { x: 0, y: 0 },
52          { duration: 0.3, ease: "easeInOut" },
53        );
54      }, 250);
55    }, [animate]);
56 
57    const stop = useCallback(() => {
58      animate(".xai-part-1", { x: 0, y: 0 }, { duration: 0.2 });
59      animate(".xai-part-2", { x: 0, y: 0 }, { duration: 0.2 });
60      animate(".xai-part-3", { x: 0, y: 0 }, { duration: 0.2 });
61      animate(".xai-part-4", { x: 0, y: 0 }, { duration: 0.2 });
62    }, [animate]);
63 
64    useImperativeHandle(
65      ref,
66      () => ({
67        startAnimation: start,
68        stopAnimation: stop,
69      }),
70      [start, stop],
71    );
72 
73    return (
74      <motion.svg
75        ref={scope}
76        width={size}
77        height={size}
78        viewBox="0 0 24 24"
79        fill={color}
80        xmlns="http://www.w3.org/2000/svg"
81        className={className}
82        onHoverStart={start}
83        onHoverEnd={stop}
84      >
85        <title>xAI</title>
86 
87        {/* Part 1: Top-left diagonal */}
88        <motion.path
89          className="xai-part-1"
90          style={{ transformBox: "fill-box", transformOrigin: "center" }}
91// … truncated