brand-aistudio-icon

1import { forwardRef, useImperativeHandle, useCallback, useRef } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandAiStudioIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  ({ size = 24, color = "currentColor", className = "" }, ref) => {
7    const [scope, animate] = useAnimate();
8 
9    const frameRef = useRef<SVGGElement | null>(null);
10    const sparkRef = useRef<SVGGElement | null>(null);
11 
12    const getSparkCenterOffset = () => {
13      if (!frameRef.current || !sparkRef.current) return { x: 0, y: 0 };
14 
15      const frame = frameRef.current.getBBox();
16      const spark = sparkRef.current.getBBox();
17 
18      const frameCenterX = frame.x + frame.width / 2;
19      const frameCenterY = frame.y + frame.height / 2;
20 
21      const sparkCenterX = spark.x + spark.width / 2;
22      const sparkCenterY = spark.y + spark.height / 2;
23 
24      return {
25        x: frameCenterX - sparkCenterX,
26        y: frameCenterY - sparkCenterY,
27      };
28    };
29 
30    const start = useCallback(() => {
31      const { x, y } = getSparkCenterOffset();
32 
33      // Move Gemini into the IDE
34      animate(
35        ".google-spark",
36        { x, y, scale: 0.9 },
37        { duration: 0.35, ease: "easeInOut" },
38      );
39 
40      // Pull the frame inward slightly so it "closes"
41      animate(
42        ".google-frame",
43        { scale: 0.94 },
44        { duration: 0.35, ease: "easeInOut" },
45      );
46    }, [animate]);
47 
48    const stop = useCallback(() => {
49      animate(
50        ".google-spark",
51        { x: 0, y: 0, scale: 1 },
52        { duration: 0.3, ease: "easeInOut" },
53      );
54 
55      animate(
56        ".google-frame",
57        { scale: 1 },
58        { duration: 0.3, ease: "easeInOut" },
59      );
60    }, [animate]);
61 
62    useImperativeHandle(
63      ref,
64      () => ({
65        startAnimation: start,
66        stopAnimation: stop,
67      }),
68      [start, stop],
69    );
70 
71    return (
72      <motion.svg
73        ref={scope}
74        width={size}
75        height={size}
76        viewBox="0 0 24 24"
77        fill={color}
78        className={className}
79        xmlns="http://www.w3.org/2000/svg"
80        onHoverStart={start}
81        onHoverEnd={stop}
82      >
83        <title>Google AI Studio</title>
84 
85        {/* Frame */}
86        <motion.g
87          ref={frameRef}
88          className="google-frame"
89          style={{
90            transformBox: "fill-box",
91            transformOrigin: "center",
92          }}
93        >
94          <path
95// … truncated