62:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 63:T8c9,

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.

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-0e53d96f-dc6d-479c-920d-a87b9724e623-all:/unified/creator/0e53d96f-dc6d-479c-920d-a87b9724e623/activity/":[{"data":[{"id":"019fdc7c-4faf-706c-a0b8-450e4d045e86","type":"component.liked","target":{"type":"component","id":"RtRSAQv7OmTuRDAPwh0U","preview":"Button Group Pro","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/996ba54f-9068-4ef0-a8a2-fc806efd2006/019fd7b6-ee22-76e3-b0ed-101abe3a193b.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","slug":"aevor-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-07T13:49:22.219Z","latestAt":"2026-08-07T13:49:22.219Z"},{"id":"019fd984-7ce4-77fe-bf26-a128c69aa211","type":"component.created","target":{"type":"component","id":"eNSUBE56BZXRIbY88O4X","preview":"Dotted Globe Map","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0e53d96f-dc6d-479c-920d-a87b9724e623/019fdd6d-9baa-72ea-8f3e-a6a83f17ca26.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","slug":"aevor-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-06T23:59:26.436Z","latestAt":"2026-08-06T23:59:26.436Z"},{"id":"019fb87c-32fb-742a-9c71-45a30c336167","type":"component.liked","target":{"type":"component","id":"dyxx75nxgEZIC9QJ2aO8","preview":"Kinetic Slider Mask","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dyxx75nxgEZIC9QJ2aO8/kinetic-slider-mask-DqGKkKaIm4K7UrSpYMVfXCVk7tVas6","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","slug":"aevor-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-31T14:02:55.095Z","latestAt":"2026-07-31T14:02:55.095Z"},{"id":"019fb35e-2af4-7480-b162-4a60e105e38b","type":"creator.followed","target":{"type":"creator","id":"996ba54f-9068-4ef0-a8a2-fc806efd2006","preview":"Matheus Brandão","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/219391/avatar-WjsDKx2kaT18LqTTm1XO4nYSsVgAM5.jpg","slug":"mbrandao","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","slug":"aevor-studio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-30T14:12:00.872Z","latestAt":"2026-07-30T14:12:00.872Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:0e53d96f-dc6d-479c-920d-a87b9724e623:/unified/posts/?creator=0e53d96f-dc6d-479c-920d-a87b9724e623&with=reposts":[{"data":[{"id":"019fd984-7b30-75f7-ae8e-9734733d434c","title":null,"body":"

Just published Dotted Globe Map.

An interactive dotted globe for Framer. Pick your countries, connect them with animated arcs, drag to spin.

Rendered on canvas, so it holds 60fps and pauses when it scrolls out of view.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just published Dotted Globe Map."}]},{"type":"paragraph","content":[{"type":"text","text":"An interactive dotted globe for Framer. Pick your countries, connect them with animated arcs, drag to spin."}]},{"type":"paragraph","content":[{"type":"text","text":"Rendered on canvas, so it holds 60fps and pauses when it scrolls out of view."}]}]},"author":{"framerUserId":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","slug":"aevor-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"eNSUBE56BZXRIbY88O4X","resolved":true,"title":"Dotted Globe Map","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Live demo: "},{"type":"text","text":"https://dottedglobemap.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://dottedglobemap.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Feature Highlights","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas-Rendered Globe: depth-shaded dots, soft fade at the limb. Density, size, and colors are yours."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connection Arcs: connect all countries or define exact pairs. Each arc carries a traveling signal and fades smoothly as it wraps behind the sphere."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"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."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bundled Flags: all 53 flags ship inside the component. No CDN, no network requests, identical on every OS."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"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."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for agency sites, SaaS global infrastructure sections, consulting office maps, and distributed team pages."}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your countries. Pick from 53, each with its own flag. Override any label with your own text."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the look. Six grouped panels: Globe, Highlights, Labels, Connections, Motion, Advanced."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview and publish. The globe stays still on the canvas by design, so your editor stays fast."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Rotating globe with country labels","slug":"dotted-globe-map","author":{"framerUserId":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","slug":"aevor-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0e53d96f-dc6d-479c-920d-a87b9724e623/019fdd6d-9baa-72ea-8f3e-a6a83f17ca26.jpg","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-06T23:59:25.620Z","updatedAt":"2026-08-07T18:13:12.967Z","publishedAt":"2026-08-06T23:59:25.617Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dottedglobemap.framer.website/","price":"12","paymentUrl":"https://contra.com/payment-link/z67XkZ3O-dotted-globe-map-for-framer","workshop":false,"categories":[{"id":"8ee0cfdd-bc84-44cf-aa9c-54c86b5c56e0","name":"Maps","slug":"maps"}],"lastSaveId":"8jkFXnc8FvR2ZdlKCjVi","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-06T23:59:26.001Z","updatedAt":"2026-08-06T23:59:26.001Z"},{"id":"01951aaf-80ee-7056-9ad4-ef378f7b74a7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","slug":"aevor-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"2179","resolved":true,"title":"Cyber Genios ","body":null,"bodyJson":null,"introduction":"CyberGênios is a Brazilian edtech that simplifies computing curriculum compliance in schools. Present in 60+ cities across 4 countries, it delivers curriculum, teacher training, and an animated learning platform for 30,000+ students.","slug":"cyber-genios","author":{"framerUserId":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","slug":"aevor-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/sites/2179/thumbnail-jsMMDP4vX31l9FWaFZZb0vaWXRUOUT.jpg","metadata":{"tint":{"h":283,"s":58,"l":19},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-02-18T20:11:04.300Z","updatedAt":"2026-04-22T14:55:16.477Z","publishedAt":"2025-02-18T20:11:04.302Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://cybergenios.com.br/","categories":[{"id":"4deaf317-a648-4f8b-ae2a-f9a4cf1a35da","name":"Education","slug":"education"}],"mainCategory":null,"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-02-18T20:11:04.302Z","updatedAt":"2025-02-18T20:11:04.302Z"},{"id":"01951aaf-7366-7ad6-b4fd-df14ac34b00b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","slug":"aevor-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"2177","resolved":true,"title":"Portão 3","body":null,"bodyJson":null,"introduction":"Portão 3 is a Brazilian fintech with 400K+ users and R$10B+ processed, offering corporate cards, ad spend management, fuel control, and automated billing — all in one platform for businesses of every size.","slug":"port-o-3","author":{"framerUserId":"0e53d96f-dc6d-479c-920d-a87b9724e623","name":"Aevor Studio","slug":"aevor-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/165291/avatar-B0Hd2uqavb8xFrYBKqGjogVhoHWGD7.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/sites/2177/thumbnail-PxkURZIomuyKtZH6rE6eoC5s3xZdAY.jpg","metadata":{"tint":{"h":240,"s":30,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-02-18T20:11:00.837Z","updatedAt":"2026-04-22T15:44:01.856Z","publishedAt":"2025-02-18T20:11:00.838Z","featuredAt":null,"approvedAt":null,"type":"site","attributes":{"url":"https://portao3.com.br/","categories":[{"id":"1fec15c2-ca4a-4d52-bf3a-c04e6d002202","name":"SaaS","slug":"saas"},{"id":"ddd39099-5b17-42e0-b333-7b7c480a114f","name":"Business","slug":"business"}],"mainCategory":null,"tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-02-18T20:11:00.838Z","updatedAt":"2025-02-18T20:11:00.838Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L64"}]