"use client"; import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"; import { motion, useAnimate } from "motion/react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; const BrainCircuitIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const isAnimatingRef = useRef(false); const startAnimation = useCallback(async () => { if (isAnimatingRef.current) return; isAnimatingRef.current = true; // Reset for a clean replay every hover. await animate( ".brain-outline, .circuit-line, .terminal", { opacity: 0, pathLength: 0, filter: "blur(0.8px)" }, { duration: 0 }, ); await animate( ".brain-group", { scale: 0.985, rotate: 0 }, { duration: 0 }, ); await animate(".terminal", { scale: 0.75 }, { duration: 0 }); // 1) Brain shell fades in first. await animate( ".brain-outline", { opacity: [0.18, 1], pathLength: [0, 1], filter: ["blur(0.8px)", "blur(0px)"], }, { duration: 0.55, ease: [0.22, 1, 0.36, 1] }, ); // 2) Circuit traces draw with light stagger. await animate( ".circuit-line", { opacity: [0, 1], pathLength: [0, 1], filter: ["blur(0.8px)", "blur(0px)"], }, { duration: 0.42, ease: "easeOut", delay: (i) => i * 0.05, }, ); // 3) Terminals pop in sequence. await animate( ".terminal", { scale: [0.75, 1.18, 1], opacity: [0, 1], filter: ["blur(0.8px)", "blur(0px)"], }, { duration: 0.3, ease: "easeOut", delay: (i) => i * 0.08, }, ); // Final settle. animate( ".brain-group", { scale: [0.985, 1.02, 1] }, { duration: 0.28, ease: "easeOut" }, ); // Hover loop: subtle neural pulse + terminal activity. while (isAnimatingRef.current) { await animate( ".brain-outline", { opacity: [1, 0.72, 1] }, { duration: 1.2, ease: "easeInOut" }, ); if (!isAnimatingRef.current) break; await animate( ".terminal", { scale: [1, 1.35, 1], opacity: [1, 0.65, 1] }, { duration: 0.7, ease: "easeInOut", delay: (i: number) => i * 0.08, }, ); if (!isAnimatingRef.current) break; await new Promise((resolve) => setTimeout(resolve, 420)); } }, [animate]); const stopAnimation = useCallback(() => { isAnimatingRef.current = false; animate( ".brain-group", { scale: 1, rotate: 0 }, { duration: 0.22, ease: "easeOut" }, ); animate( ".brain-outline, .circuit-line, .terminal", { opacity: 1, pathLength: 1, filter: "blur(0px)" }, { duration: 0.22, ease: "easeOut" }, ); animate(".terminal", { scale: 1 }, { duration: 0.22, ease: "easeOut" }); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation, stopAnimation, })); return ( ); }, ); BrainCircuitIcon.displayName = "BrainCircuitIcon"; export default BrainCircuitIcon;

Brain Circuit Icon

Installation