brand-grok-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandGrokIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  ({ size = 24, color = "currentColor", className = "" }, ref) => {
7    const [scope, animate] = useAnimate();
8 
9    const start = useCallback(() => {
10      // Subtle container pulse
11      animate(
12        scope.current,
13        { scale: 1.05 },
14        { duration: 0.25, ease: "easeOut" },
15      );
16 
17      // Upper flows up-right
18      animate(
19        ".grok-upper",
20        { x: 3, y: -3, opacity: 0.85 },
21        { duration: 0.35, ease: "easeOut" },
22      );
23 
24      // Lower flows down-left
25      animate(
26        ".grok-lower",
27        { x: -3, y: 3, opacity: 0.85 },
28        { duration: 0.35, ease: "easeOut" },
29      );
30    }, [animate, scope]);
31 
32    const stop = useCallback(() => {
33      animate(scope.current, { scale: 1 }, { duration: 0.2 });
34 
35      animate(
36        ".grok-upper",
37        { x: 0, y: 0, opacity: 1 },
38        { duration: 0.25, ease: "easeInOut" },
39      );
40 
41      animate(
42        ".grok-lower",
43        { x: 0, y: 0, opacity: 1 },
44        { duration: 0.25, ease: "easeInOut" },
45      );
46    }, [animate, scope]);
47 
48    useImperativeHandle(ref, () => ({
49      startAnimation: start,
50      stopAnimation: stop,
51    }));
52 
53    return (
54      <motion.svg
55        ref={scope}
56        onHoverStart={start}
57        onHoverEnd={stop}
58        fill={color}
59        viewBox="0 0 24 24"
60        width={size}
61        height={size}
62        className={`grok-icon cursor-pointer ${className}`}
63        style={{ flex: "none", lineHeight: 1 }}
64      >
65        <title>Grok</title>
66 
67        {/* Upper shard */}
68        <motion.path
69          className="grok-upper"
70          d="M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292"
71        />
72 
73        {/* Lower shard */}
74        <motion.path
75          className="grok-lower"
76// … truncated