---
title: "Interactive 3D Globe — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Dalton Taylor · Backgrounds. Map your world in motion"
canonical: "https://framer.elliotli.dev/component/interactive-3d-globe"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Interactive 3D Globe

# Interactive 3D Globe

Map your world in motion

[View on Framer](https://framer.com/marketplace/components/interactive-3d-globe/?via=elliot-li)

![Interactive 3D Globe preview image 1](https://framer.elliotli.dev/og/component/interactive-3d-globe/c64828a654d5589b/1600x1200.jpg)

## Summary

Map your world in motion

## Description

## 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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-rfuvt337-W6zICCOY2A5PPE25cUUrRZKLu5Rh8V)

## 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!

## Rank history [How rankings work →](/terms#rankings)

-   All · #8787

## Details

- **Author**: Dalton Taylor
- **Price**: $12.00
- **Published**: 2026-01-24
- **Updated**: 2026-01-24
- **Added**: 2026-01-12
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background