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 WebGLRenderer with 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 densifyRing algorithm 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 via startTransition.
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 WebGLRenderer with 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 densifyRing algorithm 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 via startTransition.
Slava I