Most globe components you find for Framer are either static images dressed up as interactive, or basic canvas hacks that break on resize and crawl on complex pages.
This component is engineered from scratch. It renders a fully interactive orthographic 3D globe inside Framer using pure SVG and real sphere mathematics, with Natural Earth 110m geographic data for accurate country borders, smooth drag-to-rotate controls, animated map markers, country hover detection, and an atmospheric lighting system.
No external dependencies. No third-party mapping libraries. No canvas performance traps. Just clean, production-ready SVG rendering that works reliably inside any Framer project.
Built by Zlatko Marjanović, Framer developer and Webflow Certified Partner.
The component uses an orthographic projection calculated with real 3D sphere mathematics. Every country border is derived from the Natural Earth 110m geographic dataset, loaded from a public CDN and decoded on the client. A requestAnimationFrame animation loop drives all per-frame updates imperatively, bypassing React reconciliation entirely so rendering stays smooth even inside complex Framer pages.
The drag system maps pointer delta to longitude and latitude rotation, with clamped tilt and inertia-style idle recovery. Markers are projected onto the sphere surface using the same rotation math, hidden automatically when they cross to the back hemisphere, and fade smoothly at the limb. Country hover hit-testing uses a bounding-box pre-filter followed by a ray-cast point-in-polygon check in geographic coordinates.
This is not a wrapper around D3, Leaflet, or Mapbox. The entire rendering and interaction system is custom-built for Framer.
Real interactive 3D globe with orthographic projection and accurate sphere math
Drag to rotate — grab and spin the globe on mouse or touch
Auto-rotation when idle with configurable speed and smooth resume after drag
Natural Earth 110m dataset — real country borders loaded from a public CDN
Country hover detection with accurate geographic ray-casting and hover color
Country enable/disable system — visually dim specific countries from the property panel
Custom map markers with latitude/longitude coordinates, pulse animation, label, description, and color
Markers auto-hide when on the back face of the globe and fade at the limb
Hover tooltips on both markers and countries with customizable colors and blur background
Optional latitude/longitude graticule grid with configurable color and opacity
Atmospheric glow and radial lighting overlay for depth and visual realism
Subtle starfield background that avoids overlapping the globe disc
Fully configurable axis rotation — independent X, Y, Z controls in the property panel
Drag sensitivity control for fine-tuning interaction feel
ResizeObserver responsiveness — adapts to any container size automatically
Zero external dependencies — no D3, no Mapbox, no Leaflet, no canvas libraries
Pure SVG rendering with hardware-accelerated compositing hints
Interaction: auto-rotate on/off, spin speed in degrees per second, X/Y/Z axis rotation, drag on/off, drag sensitivity, atmosphere color, atmosphere intensity, starfield on/off, marker labels on/off
Map Style: ocean color, land fill color, border color, border width, hover highlight color, disabled country color
Countries: add any country by ISO code, toggle each country enabled or disabled to control its fill color
Markers: add unlimited markers with heading, subtext, latitude, longitude, and color per marker
Tooltip: show/hide tooltips, background color, text color, border color
Grid: show/hide the graticule, line color, opacity
Layout: corner radius, padding, optional border with color control
Most interactive globe implementations for web use D3's geographic projection system, which re-renders to canvas or SVG on every frame using JavaScript-driven DOM updates. That approach creates heavy layout thrashing and fails inside React trees where update batching adds latency.
This component separates the rendering loop entirely from React. SVG path elements are stored in ref maps and updated directly via setAttribute in the animation loop. React state is used only for hover tooltip visibility, which fires outside the rAF loop. This means the globe animates at full 60fps even when the surrounding Framer page re-renders.
The geographic clipping system resolves a common bug found in many SVG globe implementations: country polygons that cross the visible hemisphere boundary generate incorrect straight-line chords. This component uses a proper limb intersection algorithm that clips each ring precisely at the horizon, eliminating the artifact entirely.
SaaS dashboards showing infrastructure or server locations
AI platform landing pages visualizing global deployment
Logistics and supply chain tracking interfaces
Cybersecurity dashboards with global threat visualization
Satellite network and telecommunications company websites
Startup landing pages demonstrating worldwide presence
Defense and mission-control style interfaces
Data storytelling websites and interactive editorial
Agency portfolio pieces requiring strong visual impact
Product demos for globally distributed software
Most globe visualizations in the Framer Marketplace are either static SVG exports, embedded iframes loading external map services, or canvas elements that break responsiveness and become unmaintainable inside a Framer project.
This component is a native Framer code component written in TypeScript with full property controls. It loads no external scripts, has no API key dependencies, renders entirely in-browser, and exposes every visual and behavioral parameter directly in the Framer panel. You can add it to a page, resize it, place markers, and configure colors without touching a line of code.
It is the only orthographic 3D globe component in the Framer ecosystem built with a custom clipping algorithm, imperative rAF rendering, and geographic hit-testing that works correctly at the hemisphere boundary.
Server and data center locations
Global office and team locations
Logistics nodes and delivery hubs
Satellite tracking and orbital ground stations
Mission or operations control interfaces
Sales territory and regional presence maps
Event or conference location maps
Rendering: SVG with orthographic projection
Geographic data: Natural Earth 110m via cdn.jsdelivr.net/npm/world-atlas
Animation: requestAnimationFrame with imperative DOM updates
Responsiveness: ResizeObserver, adapts to any container
Dependencies: none beyond Framer runtime
Country coverage: 170+ countries with ISO numeric to ISO3 mapping
Marker visibility: automatic back-face culling with limb fade
Hit testing: bounding box pre-filter plus point-in-polygon ray cast in geographic coordinates
Drag: pointer capture API with clamped latitude and inertia-style idle recovery
Built by Zlatko Marjanović — Webflow Certified Partner and Framer developer with 120+ client projects across SaaS, logistics, agency, and startup verticals.
Need custom data integration, API-driven markers, real-time network visualization, or a modified version of this globe for a specific project? Reach out and let's build exactly what you need.
This component runs entirely in the browser with no external service dependencies, no API keys, and no usage limits. Add it once, configure it visually, and it works on any published Framer site.
Zlatko Marjanović
