```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1200; const HEIGHT = 700; const CENTER_X = WIDTH / 2; const CENTER_Y = HEIGHT / 2; const NODE_RADIUS = 220; // Helper to calculate distance const dist = (x1, y1, x2, y2) => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2); // Easing function for smooth movement const easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; export default function SciFiSwitchAnimation() { // Animation frame state const [frame, setFrame] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // Initialize static data (Nodes configuration) const nodes = useMemo(() => { const nodeCount = 6; return Array.from({ length: nodeCount }).map((_, i) => { const angle = (i / nodeCount) * Math.PI * 2; return { id: i, x: CENTER_X + Math.cos(angle) * NODE_RADIUS, y: CENTER_Y + Math.sin(angle) * NODE_RADIUS, label: `NODE-${String(i + 1).padStart(2, '0')}`, type: i % 2 === 0 ? 'SERVER' : 'DATABASE', color: i % 2 === 0 ? '#38bdf8' : '#a855f7', // Sky blue or Purple }; }); }, []); // Animation Loop useEffect(() => { const animate = () => { const now = Date.now(); // Use a derived time value for smooth animation (seconds) const time = (now - startTimeRef.current) / 1000; setFrame(time); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Calculate packet positions based on current frame (Deterministic) const packets = useMemo(() => { const activePackets = []; // Generate multiple packet streams per node nodes.forEach((node, i) => { // Inbound packets (Node -> Switch) const inboundSpeed = 0.5; const inboundOffset = i * 0.8; const tIn = (frame * inboundSpeed + inboundOffset) % 2; // Cycle duration 2s if (tIn >= 0 && tIn <= 1) { const progress = easeInOutQuad(tIn); activePackets.push({ id: `in-${i}`, x: node.x + (CENTER_X - node.x) * progress, y: node.y + (CENTER_Y - node.y) * progress, color: node.color, size: 4, type: 'in' }); } // Outbound packets (Switch -> Node) const outboundSpeed = 0.6; const outboundOffset = i * 0.8 + 1.0; // Offset to stagger const tOut = (frame * outboundSpeed + outboundOffset) % 2; if (tOut >= 0 && tOut <= 1) { const progress = easeInOutQuad(tOut); activePackets.push({ id: `out-${i}`, x: CENTER_X + (node.x - CENTER_X) * progress, y: CENTER_Y + (node.y - CENTER_Y) * progress, color: '#ffffff', // Outbound usually generic or white size: 3, type: 'out' }); } }); return activePackets; }, [frame, nodes]); // Derived stats for UI const throughput = useMemo(() => { const base = 840; const noise = Math.sin(frame * 5) * 50 + Math.cos(frame * 2) * 30; return Math.floor(base + noise); }, [frame]); return (

); } ```