import React, { useState, useEffect, useRef } from 'react'; import './BrainAnimation.css'; const BrainAnimation = () => { const [pulseCount, setPulseCount] = useState(0); const [sequenceIndex, setSequenceIndex] = useState(0); const [painSignals, setPainSignals] = useState([]); const [blockedSignals, setBlockedSignals] = useState([]); const animationRef = useRef(); const sequence = [5, 5, 5, 1, 5]; const sequenceRef = useRef(sequence); useEffect(() => { const animate = () => { // Generate pain signals randomly if (Math.random() < 0.1) { const newSignal = { id: Date.now(), x: Math.random() * 100, y: Math.random() * 100, size: Math.random() * 10 + 5, opacity: 1 }; setPainSignals(prev => [...prev, newSignal]); } // Update existing pain signals setPainSignals(prev => prev.map(signal => ({ ...signal, y: signal.y + 0.5, opacity: signal.opacity - 0.01 })).filter(signal => signal.opacity > 0) ); // Check for blocking if (pulseCount > 0 && pulseCount % sequenceRef.current[sequenceIndex] === 0) { const blockingRadius = 30; setPainSignals(prev => { const blocked = prev.filter(signal => signal.y > 50 - blockingRadius/2 && signal.y < 50 + blockingRadius/2 ); if (blocked.length > 0) { setBlockedSignals(prevBlocked => [ ...prevBlocked, ...blocked.map(s => ({ ...s, color: 'green' })) ]); } return prev.filter(signal => !(signal.y > 50 - blockingRadius/2 && signal.y < 50 + blockingRadius/2) ); }); setSequenceIndex((prev) => (prev + 1) % sequenceRef.current.length); } animationRef.current = requestAnimationFrame(animate); }; animationRef.current = requestAnimationFrame(animate); return () => { cancelAnimationFrame(animationRef.current); }; }, [pulseCount, sequenceIndex]); useEffect(() => { const pulseInterval = setInterval(() => { setPulseCount(prev => prev + 1); }, 500); return () => clearInterval(pulseInterval); }, []); return (

{/* Brain lobes */}

{/* Neurons */} {Array.from({ length: 15 }).map((_, i) => (

))} {/* Pain signals */} {painSignals.map(signal => (

))} {/* Blocked signals */} {blockedSignals.map((signal, i) => (

))} {/* Sequence display */}

{sequence.map((num, i) => ( {num} ))}

); }; export default BrainAnimation; .brain-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #0a0a1a; overflow: hidden; } .brain { position: relative; width: 400px; height: 400px; } .lobe { position: absolute; border-radius: 50%; background: rgba(100, 150, 255, 0.2); border: 2px solid rgba(100, 150, 255, 0.5); filter: drop-shadow(0 0 5px rgba(100, 150, 255, 0.7)); transform: scale(calc(1 + 0.05 * var(--pulse))); transition: transform 0.3s ease; } .left-frontal { width: 120px; height: 150px; top: 50px; left: 80px; } .right-frontal { width: 120px; height: 150px; top: 50px; right: 80px; } .left-parietal { width: 100px; height: 120px; top: 120px; left: 90px; } .right-parietal { width: 100px; height: 120px; top: 120px; right: 90px; } .left-temporal { width: 80px; height: 100px; top: 200px; left: 100px; } .right-temporal { width: 80px; height: 100px; top: 200px; right: 100px; } .occipital { width: 140px; height: 100px; top: 250px; left: 130px; } .neuron { position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7)); transform: scale(calc(1 + 0.2 * sin(var(--pulse) + var(--delay)))); opacity: calc(0.7 + 0.3 * sin(var(--pulse) + var(--delay))); transition: all 0.3s ease; } .pain-signal, .blocked-signal { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); } .sequence-display { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 20px; font-size: 24px; color: white; font-family: monospace; } .sequence-display span { opacity: 0.7; transition: all 0.3s ease; } .sequence-display span.active { color: #4caf50; opacity: 1; transform: scale(1.5); text-shadow: 0 0 10px #4caf50; } .sequence-display span { animation: pulse calc(0.5s * var(--pulse)) infinite alternate; } @keyframes pulse { 0% { transform: scale(1); text-shadow: 0 0 0px currentColor; } 100% { transform: scale(1.2); text-shadow: 0 0 10px currentColor; } } import React from 'react'; import BrainAnimation from './components/BrainAnimation'; import './App.css'; function App() { return (

); } export default App; .app { text-align: center; height: 100vh; overflow: hidden; } import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );