import React, { useState, useEffect, useRef, useMemo } from 'react'; import * as d3 from 'd3'; import { Globe, Cpu, Radio, Shield, Zap, Activity } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; const GLOBE_RADIUS = 260; const CENTER = { x: WIDTH / 2, y: HEIGHT / 2 }; // Simplified land polygons to keep code compact and self-contained const LAND_DATA = [ // Eurasia [[0, 0], [20, 10], [40, 0], [60, 20], [80, 50], [140, 60], [180, 40], [180, 80], [0, 80], [-20, 40]], // Africa [[-20, 35], [20, 35], [50, 0], [20, -35], [-10, -35], [-20, 0]], // Americas [[-100, 80], [-60, 80], [-30, 50], [-40, 0], [-80, -60], [-40, -60], [-30, -20], [-100, 20]], // Australia [[110, -10], [150, -10], [150, -40], [110, -40]], // Antarctica [[-180, -60], [180, -60], [180, -90], [-180, -90]] ]; export default function TechGlobeAnimation() { const [rotation, setRotation] = useState([0, -20]); const frameRef = useRef(0); const containerRef = useRef(null); // 1. Initialized static assets const stars = useMemo(() => { return Array.from({ length: 150 }).map((_, i) => ({ id: i, x: Math.random() * WIDTH, y: Math.random() * HEIGHT, size: Math.random() * 2 + 1, opacity: Math.random() * 0.7 + 0.3, speed: Math.random() * 0.02 + 0.01 })); }, []); const graticule = useMemo(() => d3.geoGraticule().step([15, 15])(), []); // 2. Animation loop useEffect(() => { let rafId; const update = () => { frameRef.current += 0.4; // We only update rotation state to trigger re-render // The logic is light enough for React's reconciliation at 60fps setRotation([frameRef.current, -25]); rafId = requestAnimationFrame(update); }; rafId = requestAnimationFrame(update); return () => cancelAnimationFrame(rafId); }, []); // 3. Projection calculations const projection = d3.geoOrthographic() .scale(GLOBE_RADIUS) .translate([CENTER.x, CENTER.y]) .rotate(rotation as [number, number]); const pathGenerator = d3.geoPath(projection); // 4. Generate visual elements const globePath = pathGenerator({ type: 'Sphere' }); const graticulePath = pathGenerator(graticule); // Create "digital" land effect using a grid of points const points = useMemo(() => { const pts = []; for (let lat = -90; lat <= 90; lat += 3) { for (let lon = -180; lon <= 180; lon += 3) { // Simple hit-test for land-like shapes const isLand = LAND_DATA.some(poly => { let inside = false; for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) { const xi = poly[i][0], yi = poly[i][1]; const xj = poly[j][0], yj = poly[j][1]; const intersect = ((yi > lat) !== (yj > lat)) && (lon < (xj - xi) * (lat - yi) / (yj - yi) + xi); if (intersect) inside = !inside; } return inside; }); if (isLand) pts.push([lon, lat]); } } return pts; }, []); const visiblePoints = points.map(p => { const coord = projection(p as [number, number]); if (!coord) return null; // Check if the point is on the front side of the globe const geoPoint = p as [number, number]; const r = d3.geoDistance(geoPoint, [-rotation[0], -rotation[1]]); if (r > Math.PI / 2) return null; return { x: coord[0], y: coord[1] }; }).filter(Boolean); return (

{/* Overlay Icons for Tech Feel */}

{/* Vertical Scanning Text */}

ESTABLISHING SECURE UPLINK ... DATA STREAM ENCRYPTED ... PACKET LOSS 0% ...

); }