Google AI Studio

import { forwardRef, useImperativeHandle, useCallback, useRef } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const BrandAiStudioIcon = forwardRef( ({ size = 24, color = "currentColor", className = "" }, ref) => { const [scope, animate] = useAnimate(); const frameRef = useRef(null); const sparkRef = useRef(null); const getSparkCenterOffset = () => { if (!frameRef.current || !sparkRef.current) return { x: 0, y: 0 }; const frame = frameRef.current.getBBox(); const spark = sparkRef.current.getBBox(); const frameCenterX = frame.x + frame.width / 2; const frameCenterY = frame.y + frame.height / 2; const sparkCenterX = spark.x + spark.width / 2; const sparkCenterY = spark.y + spark.height / 2; return { x: frameCenterX - sparkCenterX, y: frameCenterY - sparkCenterY, }; }; const start = useCallback(() => { const { x, y } = getSparkCenterOffset(); // Move Gemini into the IDE animate( ".google-spark", { x, y, scale: 0.9 }, { duration: 0.35, ease: "easeInOut" }, ); // Pull the frame inward slightly so it "closes" animate( ".google-frame", { scale: 0.94 }, { duration: 0.35, ease: "easeInOut" }, ); }, [animate]); const stop = useCallback(() => { animate( ".google-spark", { x: 0, y: 0, scale: 1 }, { duration: 0.3, ease: "easeInOut" }, ); animate( ".google-frame", { scale: 1 }, { duration: 0.3, ease: "easeInOut" }, ); }, [animate]); useImperativeHandle( ref, () => ({ startAnimation: start, stopAnimation: stop, }), [start, stop], ); return ( Google AI Studio {/* Frame */} {/* Gemini sparkle */} ); }, ); BrandAiStudioIcon.displayName = "BrandAiStudioIcon"; export default BrandAiStudioIcon;

brand-aistudio-icon

Installation