About Global Threat
Global Threat Monitor is an interactive dashboard for travelers. The tool helps visually assess the epidemiological situation anywhere in the world before a trip and provides a specific action plan.
🎯 Key Features
Interactive 3D Globe: Navigation and country selection directly on a 3D model of the Earth.
Risk Summary: Instant output of location statistics — total active cases and disease spread dynamics.
Medical Recommendations: A traveler's checklist (required vaccines, protection against local viruses, insurance needs).
Threat Library: Detailed cards with specific disease information (symptoms, transmission zones, fatality rates).
⚙ Technical Implementation & WebGL Optimization The project doesn't just visualize data; it squeezes maximum performance out of the Framer + React stack.
Three.js in the Framer Ecosystem: A fully custom globe component rendered via a custom
WebGLRendererwith an orthographic camera.Adaptive Pixel Ratio (Smart FPS): A frame-monitoring algorithm runs under the hood. If a user is on a low-end device and FPS drops, the component dynamically reduces pixel density. Once the load decreases, it switches back to high-res.
Optimized Geometry: Country borders are built on the fly using TopoJSON. It uses a
densifyRingalgorithm with dynamic triangulation and point caching (midpointCache) to prevent browser memory overload.Math and Physics: Inertial drag control (
inertiaDamping), a precise Raycaster for country clicks, and smooth quaternion interpolation (Slerp) for camera focus on the selected point.Zero-Layout Shifts: The interface updates without DOM jumps. Text data and counters (
CountUp) change smoothly viastartTransition.