nfx-ui 0.20.0 → 0.22.0

package/src/animations/bookmark-icon.tsx

@@ -0,0 +1,87 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { scaledStrokeWidth } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const BookmarkIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".bookmark-body",
+        {
+          scaleY: 0.9,
+          y: 2,
+        },
+        {
+          duration: 0.18,
+          ease: "easeOut",
+        },
+      );
+    };
+
+    const stop = async () => {
+      await animate(
+        ".bookmark-body",
+        {
+          scaleY: 1,
+          y: 0,
+        },
+        {
+          duration: 0.18,
+          ease: "easeInOut",
+        },
+      );
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    const handleHoverStart = () => {
+      start();
+    };
+
+    const handleHoverEnd = () => {
+      stop();
+    };
+
+    return (
+      <motion.div
+        ref={scope}
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        className={`inline-flex cursor-pointer ${className}`}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 48 48"
+          fill="none"
+          stroke={color}
+          strokeWidth={scaledStrokeWidth(strokeWidth, 48)}
+          strokeMiterlimit="10"
+          strokeLinecap="square"
+        >
+          <motion.path
+            className="bookmark-body"
+            style={{ transformOrigin: "50% 20%" }}
+            d="M24 34L41 44V8C41 5.23858 38.7614 3 36 3H12C9.23858 3 7 5.23858 7 8V44L24 34Z"
+          />
+        </svg>
+      </motion.div>
+    );
+  },
+);
+
+BookmarkIcon.displayName = "BookmarkIcon";
+
+export default BookmarkIcon;

package/src/animations/brain-circuit-icon.tsx

@@ -0,0 +1,137 @@
+"use strict";
+
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const BrainCircuitIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const startAnimation = useCallback(() => {
+      // Brain outline subtle pulse
+      animate(
+        ".brain-outline",
+        { opacity: [1, 0.7, 1] },
+        { duration: 2, repeat: Infinity, ease: "easeInOut" },
+      );
+
+      // Circuit lines drawing
+      animate(
+        ".circuit-line",
+        { pathLength: [0, 1], opacity: [0, 1] },
+        { duration: 0.6, ease: "easeOut" },
+      );
+
+      // Synaptic terminals pulsing in sequence
+      const terminals = [
+        ".terminal-1",
+        ".terminal-2",
+        ".terminal-3",
+        ".terminal-4",
+      ];
+      terminals.forEach((selector, index) => {
+        animate(
+          selector,
+          { scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] },
+          {
+            duration: 0.8,
+            delay: 0.2 + index * 0.15,
+            repeat: Infinity,
+            repeatDelay: 1,
+            ease: "easeInOut",
+          },
+        );
+      });
+    }, [animate]);
+
+    const stopAnimation = useCallback(() => {
+      animate(".brain-outline", { opacity: 1 }, { duration: 0.3 });
+      animate(
+        ".circuit-line",
+        { pathLength: 1, opacity: 1 },
+        { duration: 0.3 },
+      );
+      animate(".terminal", { scale: 1, opacity: 1 }, { duration: 0.3 });
+    }, [animate]);
+
+    useImperativeHandle(ref, () => ({
+      startAnimation,
+      stopAnimation,
+    }));
+
+    return (
+      <div
+        className={`relative flex items-center justify-center ${className}`}
+        onMouseEnter={startAnimation}
+        onMouseLeave={stopAnimation}
+      >
+        <motion.svg
+          ref={scope}
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <motion.path
+            className="brain-outline"
+            d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"
+          />
+          <motion.path className="circuit-line" d="M9 13a4.5 4.5 0 0 0 3-4" />
+          <motion.path
+            className="brain-outline"
+            d="M6.003 5.125A3 3 0 0 0 6.401 6.5"
+          />
+          <motion.path
+            className="brain-outline"
+            d="M3.477 10.896a4 4 0 0 1 .585-.396"
+          />
+          <motion.path
+            className="brain-outline"
+            d="M6 18a4 4 0 0 1-1.967-.516"
+          />
+          <motion.path className="circuit-line" d="M12 13h4" />
+          <motion.path className="circuit-line" d="M12 18h6a2 2 0 0 1 2 2v1" />
+          <motion.path className="circuit-line" d="M12 8h8" />
+          <motion.path className="circuit-line" d="M16 8V5a2 2 0 0 1 2-2" />
+          <motion.circle
+            className="terminal terminal-1"
+            cx="16"
+            cy="13"
+            r=".5"
+          />
+          <motion.circle
+            className="terminal terminal-2"
+            cx="18"
+            cy="3"
+            r=".5"
+          />
+          <motion.circle
+            className="terminal terminal-3"
+            cx="20"
+            cy="21"
+            r=".5"
+          />
+          <motion.circle
+            className="terminal terminal-4"
+            cx="20"
+            cy="8"
+            r=".5"
+          />
+        </motion.svg>
+      </div>
+    );
+  },
+);
+
+BrainCircuitIcon.displayName = "BrainCircuitIcon";
+
+export default BrainCircuitIcon;

package/src/animations/brand-aistudio-icon.tsx

@@ -0,0 +1,120 @@
+import { forwardRef, useImperativeHandle, useCallback, useRef } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const BrandAiStudioIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  ({ size = 24, color = "currentColor", className = "" }, ref) => {
+    const [scope, animate] = useAnimate();
+
+    const frameRef = useRef<SVGGElement | null>(null);
+    const sparkRef = useRef<SVGGElement | null>(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 (
+      <motion.svg
+        ref={scope}
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill={color}
+        className={className}
+        xmlns="http://www.w3.org/2000/svg"
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <title>Google AI Studio</title>
+
+        {/* Frame */}
+        <motion.g
+          ref={frameRef}
+          className="google-frame"
+          style={{
+            transformBox: "fill-box",
+            transformOrigin: "center",
+          }}
+        >
+          <path
+            fillRule="evenodd"
+            d="M9.921 4.196H6.328A2.705 2.705 0 003.623 6.9v11.362a2.705 2.705 0 002.705 2.705h11.363a2.705 2.705 0 002.705-2.705v-4.756l1.623-1.113v5.87a4.329 4.329 0 01-4.328 4.328H6.328A4.329 4.329 0 012 18.263V6.901a4.328 4.328 0 014.328-4.329h4.545l-.952 1.624z"
+          />
+        </motion.g>
+
+        {/* Gemini sparkle */}
+        <motion.g
+          ref={sparkRef}
+          className="google-spark"
+          style={{
+            transformBox: "fill-box",
+            transformOrigin: "center",
+          }}
+        >
+          <path
+            fillRule="evenodd"
+            d="M17.82 0c.145 0 .268.104.299.246a7 7 0 001.9 3.484 7 7 0 003.485 1.901c.142.031.246.154.246.3a.308.308 0 01-.246.298A7 7 0 0020.02 8.13a7 7 0 00-1.912 3.535.297.297 0 01-.288.238.297.297 0 01-.288-.238A7 7 0 0015.62 8.13a7 7 0 00-3.535-1.912.297.297 0 01-.238-.288c0-.14.1-.26.238-.288A7 7 0 0015.62 3.73 7.001 7.001 0 0017.521.246.308.308 0 0117.82 0z"
+          />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+BrandAiStudioIcon.displayName = "BrandAiStudioIcon";
+export default BrandAiStudioIcon;

package/src/animations/brand-anthropic-icon.tsx

@@ -0,0 +1,70 @@
+import { forwardRef, useImperativeHandle, useCallback } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const BrandAnthropicIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  ({ size = 24, color = "currentColor", className = "" }, ref) => {
+    const [scope, animate] = useAnimate();
+
+    const start = useCallback(() => {
+      // Simple scale pulse on the slash
+      animate(
+        ".anthropic-i",
+        { rotateX: 22, skewX: -22, scaleY: 1.09 },
+        { duration: 0.2, ease: "easeInOut" },
+      );
+    }, [animate]);
+
+    const stop = useCallback(() => {
+      animate(
+        ".anthropic-i",
+        { rotateX: 0, skewX: 0, scaleY: 1 },
+        { duration: 0.2 },
+      );
+    }, [animate]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        startAnimation: start,
+        stopAnimation: stop,
+      }),
+      [start, stop],
+    );
+
+    return (
+      <motion.svg
+        ref={scope}
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill={color}
+        className={className}
+        xmlns="http://www.w3.org/2000/svg"
+        onHoverStart={start}
+        onHoverEnd={stop}
+      >
+        <title>Anthropic</title>
+
+        {/* A */}
+        <motion.g
+          className="anthropic-a"
+          style={{ transformBox: "fill-box", transformOrigin: "center" }}
+        >
+          <path d="M6.57 3.52h3.767L16.906 20h-3.674l-1.343-3.461H5.017L3.673 20H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z" />
+        </motion.g>
+
+        {/* Backslash */}
+        <motion.g
+          className="anthropic-i"
+          style={{ transformBox: "fill-box", transformOrigin: "center" }}
+        >
+          <path d="M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48z" />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+BrandAnthropicIcon.displayName = "BrandAnthropicIcon";
+export default BrandAnthropicIcon;

package/src/animations/brand-aws-icon.tsx

@@ -0,0 +1,88 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const BrandAwsIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".smile",
+        {
+          pathOffset: 1,
+          opacity: [0, 1],
+          pathLength: 1,
+        },
+        {
+          duration: 0.1,
+          ease: "easeInOut",
+        },
+      );
+
+      await animate(
+        ".smile",
+        { pathOffset: 0 },
+        { duration: 0.45, ease: "easeInOut" },
+      );
+
+      await animate(
+        ".arrowhead",
+        { scale: [0.8, 1.15, 1], opacity: [0, 1] },
+        { duration: 0.4, ease: "easeOut" },
+      );
+    };
+
+    const stop = () => {};
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`cursor-pointer select-none ${className}`}
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+
+        {/* Smile + Arrow */}
+        <motion.g className="smile-group">
+          <motion.path
+            className="smile"
+            d="M17 18.5a15.198 15.198 0 0 1 -7.37 1.44a14.62 14.62 0 0 1 -6.63 -2.94"
+          />
+          <motion.path
+            className="arrowhead"
+            d="M19.5 21c.907 -1.411 1.451 -3.323 1.5 -5c-1.197 -.773 -2.577 -.935 -4 -1"
+          />
+        </motion.g>
+
+        <motion.g className="text">
+          <path d="M3 11v-4.5a1.5 1.5 0 0 1 3 0v4.5" />
+          <path d="M3 9h3" />
+          <path d="M9 5l1.2 6l1.8 -4l1.8 4l1.2 -6" />
+          <path d="M18 10.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75" />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+BrandAwsIcon.displayName = "BrandAwsIcon";
+export default BrandAwsIcon;

package/src/animations/brand-bags-fm-icon.tsx

@@ -0,0 +1,63 @@
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const BrandBagsFmIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = async () => {
+      await animate(
+        ".bag",
+        {
+          rotate: [0, -8, 8, -6, 6, -3, 3, 0],
+          y: [0, -5, 0, -3, 0, -2, 0],
+        },
+        { duration: 0.6, ease: "easeInOut" },
+      );
+    };
+
+    const stop = () => {
+      animate(".bag", { rotate: 0, y: 0 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        startAnimation: start,
+        stopAnimation: stop,
+      };
+    });
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 1024 1024"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`cursor-pointer ${className}`}
+      >
+        <motion.g className="bag" style={{ originX: "50%", originY: "100%" }}>
+          <motion.path
+            d="M 561.64 1018.00 C541.03,1019.15 482.25,1019.09 461.00,1017.88 C428.17,1016.02 384.57,1010.43 359.50,1004.88 C276.24,986.43 221.60,959.81 176.15,915.53 C130.14,870.72 104.87,814.62 98.92,744.08 C97.58,728.12 98.21,685.69 99.98,673.00 C100.56,668.88 101.74,660.33 102.61,654.00 C112.42,582.33 148.13,492.03 190.38,432.09 C218.55,392.11 255.44,354.21 296.61,322.93 C307.25,314.85 311.79,313.00 321.00,313.00 C329.04,313.00 333.32,314.38 342.31,319.88 C359.36,330.32 385.72,341.87 407.76,348.57 C432.77,356.17 453.66,360.10 482.00,362.55 C553.43,368.72 624.89,353.61 682.14,320.22 C693.80,313.42 696.44,312.53 705.00,312.57 C714.85,312.61 718.38,314.30 734.00,326.45 C797.73,376.03 845.64,435.94 877.67,506.14 C903.33,562.37 919.23,617.23 925.67,671.74 C928.13,692.55 928.10,740.24 925.61,758.50 C921.88,785.96 914.99,811.78 905.35,834.43 C891.92,866.01 874.02,892.03 848.86,916.54 C835.25,929.80 824.91,938.14 809.00,948.70 C748.01,989.18 666.12,1012.12 561.64,1018.00 ZM 536.19 826.97 C540.81,825.68 545.00,820.86 545.00,816.82 C545.00,812.50 547.56,807.69 550.92,805.71 C553.43,804.22 557.01,804.00 578.26,804.00 C615.47,804.00 633.30,802.14 651.41,796.38 C673.82,789.25 686.65,776.74 691.55,757.22 C692.87,752.00 693.07,745.89 692.76,721.22 C692.35,689.59 691.82,685.50 686.70,675.01 C681.23,663.80 665.70,653.24 646.15,647.43 C641.39,646.02 631.88,643.14 625.00,641.03 C606.42,635.34 582.75,628.19 572.00,625.02 C547.05,617.65 508.45,605.77 504.70,604.29 C498.82,601.98 493.27,598.38 492.04,596.08 C491.47,595.01 491.00,592.36 491.00,590.20 C491.00,582.30 497.66,577.84 509.50,577.82 C522.74,577.81 528.73,582.58 530.47,594.50 C530.87,597.25 531.71,599.83 532.35,600.23 C532.98,600.64 563.97,600.98 601.21,600.98 C666.27,601.00 669.13,600.92 674.21,599.02 C681.74,596.20 686.42,591.92 690.06,584.53 C693.16,578.23 693.20,577.94 692.85,565.76 C692.51,553.79 692.38,553.15 688.72,545.75 C683.93,536.06 676.81,529.50 664.50,523.44 C645.31,513.99 626.50,511.02 585.20,510.94 C565.67,510.91 555.41,510.51 553.09,509.69 C548.74,508.17 546.24,504.73 545.14,498.78 C544.01,492.65 541.66,489.17 537.45,487.42 C532.52,485.36 487.43,485.38 482.49,487.44 C478.47,489.12 475.01,494.22 475.00,498.50 C474.99,502.15 471.94,507.40 468.80,509.17 C467.11,510.13 457.40,510.64 432.00,511.12 C406.48,511.60 395.22,512.20 388.74,513.42 C358.34,519.14 340.06,529.78 331.91,546.50 L 328.50 553.50 L 328.19 578.78 C327.93,599.97 328.14,604.97 329.53,609.74 C335.16,629.13 346.66,638.38 379.50,649.96 C384.45,651.71 390.75,653.74 393.50,654.47 C396.25,655.20 408.85,658.81 421.50,662.49 C449.39,670.59 469.49,676.41 494.00,683.46 C524.12,692.13 528.85,695.08 531.01,706.53 C531.93,711.45 531.93,714.46 531.00,719.97 C529.70,727.74 527.09,731.84 521.63,734.73 C517.07,737.14 505.64,737.00 500.56,734.46 C494.61,731.49 493.04,728.63 492.03,718.81 C490.65,705.44 486.14,698.82 476.50,696.04 C473.62,695.21 455.29,694.97 411.00,695.19 L 349.50 695.50 L 344.64 697.89 C338.22,701.06 333.29,706.13 330.30,712.66 C327.92,717.87 327.87,718.49 328.18,739.30 L 328.50 760.61 L 332.27 768.24 C342.28,788.48 366.04,799.76 405.50,802.99 C412.10,803.53 428.38,803.98 441.68,803.98 C454.99,803.99 467.02,804.44 468.43,804.98 C471.68,806.21 474.99,811.57 475.00,815.60 C475.00,819.92 478.87,825.26 483.03,826.69 C487.42,828.20 530.93,828.43 536.19,826.97 ZM 538.50 289.97 C496.13,293.54 448.71,287.35 418.42,274.29 C400.92,266.74 395.55,263.15 374.23,244.71 C335.15,210.90 308.78,179.14 298.10,153.00 C294.86,145.06 294.63,143.75 294.57,133.00 C294.51,122.90 294.78,120.98 296.76,117.28 C300.36,110.53 304.53,106.44 318.44,96.01 C343.30,77.37 350.32,70.84 389.50,29.94 C408.14,10.48 415.56,6.96 439.53,6.23 C452.01,5.85 456.43,6.13 465.56,7.87 C476.52,9.97 479.33,10.84 509.50,21.49 C533.06,29.80 540.92,31.28 562.00,31.37 C573.44,31.41 582.10,30.94 587.00,29.99 C597.54,27.96 620.67,28.11 628.72,30.27 C635.91,32.20 646.41,37.33 653.28,42.26 C655.91,44.15 665.14,52.63 673.79,61.10 C693.45,80.36 701.04,86.89 714.89,96.47 C726.70,104.63 730.32,108.22 733.07,114.50 C744.54,140.60 718.47,183.79 657.88,239.05 C629.95,264.53 617.87,271.89 589.75,280.53 C576.65,284.56 554.66,288.61 538.50,289.97 Z"
+            fill={color}
+          />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+BrandBagsFmIcon.displayName = "BrandBagsFmIcon";
+
+export default BrandBagsFmIcon;

package/src/animations/brand-chrome-icon.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { forwardRef, useImperativeHandle } from "react";
+import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
+import { motion, useAnimate } from "motion/react";
+
+const BrandChromeIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
+  (
+    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
+    ref,
+  ) => {
+    const [scope, animate] = useAnimate();
+
+    const start = () => {
+      animate(".chrome-center", { scale: [1, 1.15, 1] }, { duration: 0.3 });
+      animate(
+        ".chrome-rotator",
+        { rotate: 90 },
+        { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] },
+      );
+    };
+
+    const stop = () => {
+      animate(".chrome-rotator", { rotate: 0 }, { duration: 0.3 });
+      animate(".chrome-center", { scale: 1 }, { duration: 0.2 });
+    };
+
+    useImperativeHandle(ref, () => ({
+      startAnimation: start,
+      stopAnimation: stop,
+    }));
+
+    return (
+      <motion.svg
+        ref={scope}
+        onHoverStart={start}
+        onHoverEnd={stop}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={`cursor-pointer ${className}`}
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <motion.g
+          className="chrome-rotator"
+          style={{ transformOrigin: "center" }}
+        >
+          <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+          <path d="M12 9h8.4" />
+          <path d="M14.598 13.5l-4.2 7.275" />
+          <path d="M9.402 13.5l-4.2 -7.275" />
+          <circle
+            cx="12"
+            cy="12"
+            r="3"
+            stroke="none"
+            className="fill-background"
+          />
+          <motion.path
+            className="chrome-center"
+            d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"
+            style={{ transformOrigin: "center" }}
+          />
+        </motion.g>
+      </motion.svg>
+    );
+  },
+);
+
+BrandChromeIcon.displayName = "BrandChromeIcon";
+
+export default BrandChromeIcon;