brain-circuit-icon

1"use strict";
2 
3import { forwardRef, useImperativeHandle, useCallback } from "react";
4import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
5import { motion, useAnimate } from "motion/react";
6 
7const BrainCircuitIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
8  (
9    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
10    ref,
11  ) => {
12    const [scope, animate] = useAnimate();
13 
14    const startAnimation = useCallback(() => {
15      // Brain outline subtle pulse
16      animate(
17        ".brain-outline",
18        { opacity: [1, 0.7, 1] },
19        { duration: 2, repeat: Infinity, ease: "easeInOut" },
20      );
21 
22      // Circuit lines drawing
23      animate(
24        ".circuit-line",
25        { pathLength: [0, 1], opacity: [0, 1] },
26        { duration: 0.6, ease: "easeOut" },
27      );
28 
29      // Synaptic terminals pulsing in sequence
30      const terminals = [
31        ".terminal-1",
32        ".terminal-2",
33        ".terminal-3",
34        ".terminal-4",
35      ];
36      terminals.forEach((selector, index) => {
37        animate(
38          selector,
39          { scale: [1, 1.5, 1], opacity: [0.5, 1, 0.5] },
40          {
41            duration: 0.8,
42            delay: 0.2 + index * 0.15,
43            repeat: Infinity,
44            repeatDelay: 1,
45            ease: "easeInOut",
46          },
47        );
48      });
49    }, [animate]);
50 
51    const stopAnimation = useCallback(() => {
52      animate(".brain-outline", { opacity: 1 }, { duration: 0.3 });
53      animate(
54        ".circuit-line",
55        { pathLength: 1, opacity: 1 },
56        { duration: 0.3 },
57      );
58      animate(".terminal", { scale: 1, opacity: 1 }, { duration: 0.3 });
59    }, [animate]);
60 
61    useImperativeHandle(ref, () => ({
62      startAnimation,
63      stopAnimation,
64    }));
65 
66    return (
67      <div
68        className={`relative flex items-center justify-center ${className}`}
69        onMouseEnter={startAnimation}
70        onMouseLeave={stopAnimation}
71      >
72        <motion.svg
73          ref={scope}
74          xmlns="http://www.w3.org/2000/svg"
75          width={size}
76          height={size}
77          viewBox="0 0 24 24"
78          fill="none"
79          stroke={color}
80          strokeWidth={strokeWidth}
81          strokeLinecap="round"
82          strokeLinejoin="round"
83        >
84          <motion.path
85            className="brain-outline"
86            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"
87          />
88// … truncated