import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const BG_COLOR = '#0f172a'; // Helper to calculate gear path const createGearPath = (cx, cy, radius, teeth, toothDepth) => { let d = ""; const angleStep = (Math.PI * 2) / teeth; for (let i = 0; i < teeth; i++) { const angle = i * angleStep; const nextAngle = (i + 1) * angleStep; // Tooth dimensions const outerR = radius + toothDepth; const innerR = radius - toothDepth; // Points const p1x = cx + Math.cos(angle) * outerR; const p1y = cy + Math.sin(angle) * outerR; const p2x = cx + Math.cos(angle + angleStep * 0.4) * outerR; const p2y = cy + Math.sin(angle + angleStep * 0.4) * outerR; const p3x = cx + Math.cos(angle + angleStep * 0.5) * innerR; const p3y = cy + Math.sin(angle + angleStep * 0.5) * innerR; const p4x = cx + Math.cos(nextAngle - angleStep * 0.1) * innerR; const p4y = cy + Math.sin(nextAngle - angleStep * 0.1) * innerR; if (i === 0) d += `M ${p1x} ${p1y}`; else d += ` L ${p1x} ${p1y}`; d += ` L ${p2x} ${p2y} L ${p3x} ${p3y} L ${p4x} ${p4y}`; } d += " Z"; return d; }; export default function TeamworkAnimation() { // Animation state driven by RAF const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // Animation Loop useEffect(() => { const animate = () => { const now = Date.now(); // Slow down time factor for smooth rotation setTime((now - startTimeRef.current) * 0.001); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // Generate Gear Paths & Configurations (Memoized) const gears = useMemo(() => { const cX = VIEW_WIDTH / 2; const cY = VIEW_HEIGHT / 2 - 50; return [ // Center Top Gear (Blue - Trust) { id: 1, x: cX, y: cY - 60, r: 60, teeth: 12, color: '#3b82f6', speed: 1, path: createGearPath(0, 0, 60, 12, 8) }, // Left Bottom Gear (Green - Growth) { id: 2, x: cX - 105, y: cY + 45, r: 45, teeth: 10, color: '#10b981', speed: -1.2, // Opposite direction path: createGearPath(0, 0, 45, 10, 8) }, // Right Bottom Gear (Orange - Energy) { id: 3, x: cX + 105, y: cY + 45, r: 45, teeth: 10, color: '#f59e0b', speed: -1.2, // Opposite direction path: createGearPath(0, 0, 45, 10, 8) } ]; }, []); // Generate Background Tech Particles const particles = useMemo(() => { return Array.from({ length: 20 }).map((_, i) => ({ id: i, x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.1, speed: Math.random() * 0.5 + 0.2 })); }, []); return ( ); }