---
title: "Dotted Globe Map — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Aevor Studio · Maps. About this Component Dotted Globe Map turns the tired \"we work worldwide\" section into something people stop and drag."
canonical: "https://framer.elliotli.dev/component/dotted-globe-map"
---

[Home](/)/[Components](/components)/[Maps](/components/category/maps)/Dotted Globe Map

# Dotted Globe Map

Rotating globe with country labels

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

![Dotted Globe Map preview image 1](https://framer.elliotli.dev/og/component/dotted-globe-map/1527979afbd05d1b/1600x1200.jpg)

## Summary

About this Component Dotted Globe Map turns the tired "we work worldwide" section into something people stop and drag.

## Description

**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/](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**

1.  Add your countries. Pick from 53, each with its own flag. Override any label with your own text.
    
2.  Set the look. Six grouped panels: Globe, Highlights, Labels, Connections, Motion, Advanced.
    
3.  Preview and publish. The globe stays still on the canvas by design, so your editor stays fast.
    

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

-   All · #2705

## Details

- **Author**: Aevor Studio
- **Price**: $12.00
- **Published**: 2026-08-06
- **Updated**: 2026-08-07
- **Added**: 2026-08-06
- **Categories**: Maps

## More like this

-   [Waypoint](/component/waypoint) — Dev Ahsan · $9 — Photo-first locations map
-   [No-key Store Locator](/component/no-key-store-locator) — Sean Weekes · $15 — UK store finder, no Google API key
-   [Geo Office Location](/component/geo-office-location) — Design Foundry · Free — Interactive Global Office Showcase
-   [Map Locator CMS](/component/map-locator-cms) — sherwin · $15 — Map Locator CMS is a flexible, interactive map component for Framer that helps you showcase stores, offices, properties, venues, service…