Interactive 3D Earth
Drag to rotate with natural inertia
Smooth auto-rotation with adjustable speed
Mobile-optimized rendering and controls
Cities & Pins
Add cities with a simple comma-separated list
Built-in city database with automatic geocoding fallback
Glowing pins with optional pulsing activity rings
Animated Connection Arcs
Multiple modes: Custom, Hub, Sequential, or All-to-All
Stylized animated routes with editable colors
Perfect for visualizing networks, routes, or reach
Cinematic Visual Layers
Realistic day/night lighting cycle
Terrain displacement for surface detail
Moving cloud layers and atmospheric glow
Aurora effects near the poles
Procedural starfield background
City Lightbox (Optional)
Click a city label to zoom through clouds
Reveal a polished info popup with:
City name
Subtitle / role
Coordinates
Optional city image
Smooth transitions designed for storytelling
All customization is available directly in Framer—no code required:
Toggle labels, pins, arcs, pulses, clouds, aurora
Adjust zoom, rotation speed, cloud speed, atmosphere strength
Change arc colors and label scale
Define hub cities or custom city-to-city routes
Assign images and subtitles per city
SaaS or startup “Global Presence” sections
Logistics, travel, telecom, or infrastructure pages
Company locations, regional hubs, expansion timelines
Investor decks and pitch pages
High-impact portfolio hero sections
Automatically adapts quality for desktop vs mobile
WebGL-based (Three.js) for smooth real-time interaction
Designed for modern browsers
Requires WebGL support (standard on modern devices)
Best experienced on desktop, fully supported on mobile
City geocoding uses OpenStreetMap when needed (no API key required)
Most globes are static videos or shallow animations. This component is interactive, data-driven, and cinematic, built to instantly elevate perceived quality and credibility.
Email support available!
Dalton Taylor
