Interactive 3D Globe

Key Features

• 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

Customization Controls

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

Ideal Use Cases

• 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

Performance Notes

• Automatically adapts quality for desktop vs mobile

• WebGL-based (Three.js) for smooth real-time interaction

• Designed for modern browsers

Requirements / Limitations

• 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)

Why This Component

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!