"use strict"; import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const BrainCircuitIcon = forwardRef( ( { 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 (

); }, ); BrainCircuitIcon.displayName = "BrainCircuitIcon"; export default BrainCircuitIcon;

brain-circuit-icon

Installation