import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1200; const HEIGHT = 700; const COLOR_BG = '#0f172a'; const COLOR_PRIMARY = '#06b6d4'; // Cyan const COLOR_SECONDARY = '#8b5cf6'; // Violet const COLOR_SUCCESS = '#10b981'; // Emerald const COLOR_TEXT = '#e2e8f0'; // Slate 200 const COLOR_CONSOLE = '#1e293b'; // Slate 800 const COMMAND = "curl -X POST https://api.nexus-core.io/v1/uplink --data-binary @payload.bin"; export default function RadarConsoleAnimation() { // Animation State // We use a single state object to minimize re-renders, // or refs for values that don't need immediate re-renders (though here we want smooth 60fps updates). // For React SVG animation, driving everything via a single 'tick' state is often cleanest for synchronization. const [tick, setTick] = useState(0); // Refs for animation loop management const requestRef = useRef(); const startTimeRef = useRef(0); // Logic State (Refs to avoid dependency cycles in useEffect) const phaseRef = useRef('typing'); // typing -> sending -> connected -> success -> reset const textIndexRef = useRef(0); // Random particles for background const particles = useMemo(() => { return Array.from({ length: 30 }).map(() => ({ x: Math.random() * WIDTH, y: Math.random() * HEIGHT, r: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.1, speed: Math.random() * 0.5 + 0.1 })); }, []); const animate = (time: number) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; // Global tick for pulsing/rotating effects setTick(elapsed); // State Machine Logic // 1. Typing Phase if (phaseRef.current === 'typing') { const typeSpeed = 50; // ms per char const charCount = Math.floor(elapsed / typeSpeed); if (charCount <= COMMAND.length) { textIndexRef.current = charCount; } else { // Finished typing, wait a bit then send if (elapsed > (COMMAND.length * typeSpeed) + 800) { phaseRef.current = 'sending'; startTimeRef.current = time; // Reset timer for next phase } } } // 2. Sending Phase (Arrow shooting up) else if (phaseRef.current === 'sending') { if (elapsed > 1500) { phaseRef.current = 'connected'; startTimeRef.current = time; } } // 3. Connected Phase (Data transfer) else if (phaseRef.current === 'connected') { if (elapsed > 4000) { phaseRef.current = 'success'; startTimeRef.current = time; } } // 4. Success Phase else if (phaseRef.current === 'success') { if (elapsed > 2000) { phaseRef.current = 'reset'; startTimeRef.current = time; } } // 5. Reset Phase else if (phaseRef.current === 'reset') { // Quick fade out or simply reset variables if (elapsed > 500) { phaseRef.current = 'typing'; textIndexRef.current = 0; startTimeRef.current = time; } } requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // --- DERIVED RENDER VALUES --- // Radar logic const radarCx = WIDTH / 2; const radarCy = 250; const isConnected = phaseRef.current === 'connected' || phaseRef.current === 'success'; const radarColor = isConnected ? COLOR_SUCCESS : COLOR_PRIMARY; // Console logic const displayedText = COMMAND.substring(0, textIndexRef.current); const showCursor = (Math.floor(tick / 500) % 2 === 0) && phaseRef.current === 'typing'; // Connection Beam logic let beamHeight = 0; let beamOpacity = 0; let arrowY = 500; // Start at console top if (phaseRef.current === 'sending') { const progress = Math.min(tick / 1000, 1); // 1 second to reach top // Ease out cubic const ease = 1 - Math.pow(1 - progress, 3); beamHeight = ease * 250; // Distance from 500 to 250 arrowY = 500 - beamHeight; beamOpacity = 1; } else if (isConnected) { beamHeight = 250; arrowY = 250; beamOpacity = 1; } else if (phaseRef.current === 'reset') { beamOpacity = 1 - (tick / 500); beamHeight = 250; arrowY = 250; } // Data Packets (only during connected) const packets = []; if (isConnected) { const packetCount = 5; for (let i = 0; i < packetCount; i++) { const offset = (tick / 1500 + i / packetCount) % 1; // Packets move from Target (250) to Console (500) and vice versa // Let's make them go Up and Down const yPos = 500 - (offset * 250); packets.push( ); } } return (

); }