About this Component
Dotted Globe Map turns the tired "we work worldwide" section into something people stop and drag. Landmasses render as fields of depth-shaded dots, your countries pulse as markers, and great-circle arcs carry animated signals between them. Labels appear with flags, resolve their own collisions as the globe turns, and fade out past the horizon.
The engineering is what separates it. The whole globe draws to a single canvas, not hundreds of SVG nodes, and rotation never triggers a React re-render. Point positions are precomputed into typed arrays, so a spinning frame costs multiplication, not trigonometry. It holds 60fps on a mid-range phone and stops costing anything the moment it scrolls out of view.
Live demo: https://dottedglobemap.framer.website/
Feature Highlights
Canvas-Rendered Globe: depth-shaded dots, soft fade at the limb. Density, size, and colors are yours.
Connection Arcs: connect all countries or define exact pairs. Each arc carries a traveling signal and fades smoothly as it wraps behind the sphere.
Collision-Aware Labels: always visible, on hover, or an automatic focus loop. Overlapping labels are dropped instead of jumping, and stay locked inside the component bounds.
Bundled Flags: all 53 flags ship inside the component. No CDN, no network requests, identical on every OS.
Built to Behave: pauses off screen and on hidden tabs, respects prefers-reduced-motion, lowers density on small screens, fully static on the canvas and in exports.
Perfect for agency sites, SaaS global infrastructure sections, consulting office maps, and distributed team pages.
How to Use
Add your countries. Pick from 53, each with its own flag. Override any label with your own text.
Set the look. Six grouped panels: Globe, Highlights, Labels, Connections, Motion, Advanced.
Preview and publish. The globe stays still on the canvas by design, so your editor stays fast.
About this Component
Dotted Globe Map turns the tired "we work worldwide" section into something people stop and drag. Landmasses render as fields of depth-shaded dots, your countries pulse as markers, and great-circle arcs carry animated signals between them. Labels appear with flags, resolve their own collisions as the globe turns, and fade out past the horizon.
The engineering is what separates it. The whole globe draws to a single canvas, not hundreds of SVG nodes, and rotation never triggers a React re-render. Point positions are precomputed into typed arrays, so a spinning frame costs multiplication, not trigonometry. It holds 60fps on a mid-range phone and stops costing anything the moment it scrolls out of view.
Live demo: https://dottedglobemap.framer.website/
Feature Highlights
Canvas-Rendered Globe: depth-shaded dots, soft fade at the limb. Density, size, and colors are yours.
Connection Arcs: connect all countries or define exact pairs. Each arc carries a traveling signal and fades smoothly as it wraps behind the sphere.
Collision-Aware Labels: always visible, on hover, or an automatic focus loop. Overlapping labels are dropped instead of jumping, and stay locked inside the component bounds.
Bundled Flags: all 53 flags ship inside the component. No CDN, no network requests, identical on every OS.
Built to Behave: pauses off screen and on hidden tabs, respects prefers-reduced-motion, lowers density on small screens, fully static on the canvas and in exports.
Perfect for agency sites, SaaS global infrastructure sections, consulting office maps, and distributed team pages.
How to Use
Add your countries. Pick from 53, each with its own flag. Override any label with your own text.
Set the look. Six grouped panels: Globe, Highlights, Labels, Connections, Motion, Advanced.
Preview and publish. The globe stays still on the canvas by design, so your editor stays fast.
Aevor Studio
