The full upstream README, mirrored here for reference. Install config, tool schemas, adoption signals, and an original overview live on the Globestudio listing page.
Open-source dotted maps and animated 3D globes for designers, animators, and creative developers.
Pick a country or the whole world, customize dots and shapes, apply shader effects, and export PNG, SVG, WebM, MP4, or GIF. Built on React + Three.js.
Most open-source map tooling is built for engineers — tile servers, geocoding, GIS data pipelines. Globestudio is built for the other half of the stack: the landing-page hero shot, the launch teaser, the explainer scrollytell, the deck slide that needs a globe but not a database.
Think of it as a Shader Lab for maps and globes — a designer-first canvas with presets, effects, motion, and clean exports. Composable, web-native, and yours to remix.
prefers-reduced-motion)/looks/:id.S shuffle, [/] cycle presets, D export,
R reset, G toggle view, H toggle panel, ? helpACCESSIBILITY.mdThe live tool runs entirely client-side:
Pick a country, tweak the look, export.
Requires Node 20.19+ (or 22.12+) and npm.
Open http://127.0.0.1:5173/ and the studio loads. To preview the pre-launch
waitlist teaser instead, run VITE_TEASER=1 npm run dev; deploys set
VITE_TEASER=0 (1 = teaser).
Globestudio ships several embed paths; pick whichever fits the tool:
~3kb gzipped, zero dependencies, works in Webflow / Squarespace / blog
posts / anywhere HTML is allowed. Every embed param has a matching
data-* attribute. Watches the DOM for later-added elements via
MutationObserver, so SPAs and dynamic content work too.
Resize-aware via postMessage — listen for
{ type: "globestudio-resize", height } from the embed and resize the
iframe to match. WebGL required; falls back to a still preview + a
"how to enable WebGL" panel if the GL context can't be created.
Both are thin wrappers over the same /embed route, so every look works in
both. Setup and props: packages/react and
packages/web-component.
The canonical parameter table. Every query param the /embed route honors,
as parsed in src/components/embed-view.jsx:
| Param | Type / range | Default | What it does |
|---|---|---|---|
look | preset id (one of the 21 looks) | default | Base look preset — params below override it |
selection | world · country:<ISO3> · continent:<Name> · subregion:<Name> | world | What geography to draw |
density | number, 1–90 | 40 | Dot grid density (invalid values fall back to the preset's) |
dotSize | number, 0.1–25 | 10 | Dot size (invalid values fall back to the preset's) |
dotColor | hex, # optional | preset's | Dot color |
worldFill | hex, # optional | preset's | Land fill color |
renderMode | dots · solid | preset's | Dot field or solid landmass |
motion | number, 0–100 | 35 | Parsed but currently inert — reserved, no effect yet |
tiltX | number, −45 to 45 | 0 | Camera tilt, degrees |
tiltY | number, −45 to 45 | 0 | Camera tilt, degrees |
autoSpin | 1 · 0 | 1 | Auto-rotate the globe |
static | 1 · 0 | 0 | Freeze all motion (static previews in design-tool canvases) |
view | globe · flat | globe | 3D globe or flat map |
background | hex, # optional, or transparent | unset | Page background behind the canvas (only painted when set). transparent is the same as transparent=1 |
theme | dark · light | dark | Globe chrome palette — light reads cleanly on light host pages |
transparent | 1 · 0 | 0 | See-through document, composites onto the host page |
plugin | figma | unset | Figma plugin shell: Look, Country or region, Density and View (Globe or Flat) pickers above an Insert button. Globe inserts a PNG; Flat inserts editable vectors, or a PNG past 2,500 dots or with the solid Bloom look |
source | string | embed | Analytics tag, echoed in resize postMessages |
c | URL-encoded config JSON | unset | Full share-config payload (what the Share dialog produces) — overrides the preset and the params above |
A JSON Schema for the c payload lives at
/schema/config.json.
Per-tool integration guides live at globestudio.app/integrations: copy-paste setups for Webflow, Framer, Figma, Notion, plain HTML, React, and WordPress, where Globestudio works via a Custom HTML embed. In this repo: Figma plugin · WordPress block (manual install; the wordpress.org listing comes after launch) · Framer component · embed snippet
Reading material: How to make a dotted world map in 2026 · All articles →
Globestudio runs a hosted Model Context Protocol
server at https://globestudio.app/mcp (streamable HTTP, nothing to
install, no account). Claude, Codex, Cursor and any MCP client can list looks,
build share URLs, read a share link you paste (read_share_url) and grab embed
snippets straight from a chat.
| Client | Connect |
|---|---|
| Claude app (claude.ai, Desktop) | Customize, Connectors, then + and Add custom connector. Paste the URL. |
| Claude Code | claude mcp add --transport http globestudio https://globestudio.app/mcp |
| Codex | codex mcp add globestudio --url https://globestudio.app/mcp |
| Cursor | In ~/.cursor/mcp.json: { "mcpServers": { "globestudio": { "url": "https://globestudio.app/mcp" } } } |
The same tools run locally over stdio:
claude mcp add globestudio -- npx -y @globestudio/mcp.
No MCP client? The Share tab of the export dialog has Copy for AI: a prompt with your share link, its settings and what an agent can do with it, ready to paste into any chat. The same tab has the connect line for each client.
Full tool list and setup in packages/mcp/README.md.
| Use case | What it gives you |
|---|---|
| Landing page hero | A live animated globe behind your headline. Export PNG for a still, MP4 or WebM for video. |
| Launch teaser | Animated dot map of where your users are. MP4 or GIF ready for X/LinkedIn. |
| Deck visuals | Per-country SVGs that drop straight into Keynote, Figma, or print layouts. |
| Data story | Hand-picked region + dot palette for a feature, blog post, or report. |
| Brand system | A consistent dotted-globe mark across your site, app, and docs. |
| Stream / podcast graphic | Looping WebM background with the CRT or Glitch preset. |
The examples/ directory holds 9 reference projects —
runnable HTML, drop-in components, and adaptation guides. Highlights:
embed-snippet — the minimum-viable iframe
pattern. Copy into Webflow, Framer, plain HTML, anywhere.hero-globe — full-bleed animated globe behind
a landing-page hero.shader-presets-showcase — the
shader presets in one auto-fit gallery, perfect for picking a look.Share what you make in Show & Tell.
| CONTRIBUTING | Local setup, project shape, design rules, how to submit presets/examples |
| ROADMAP | What's shipped, what's next, what's parked |
| CHANGELOG | What changed and when |
| GOVERNANCE | How decisions get made |
| CODE_OF_CONDUCT | Community standards |
| SECURITY | Reporting vulnerabilities |
| SUPPORT | Where to ask questions |
There's no shortage of map and globe tools — Globestudio doesn't try to replace any of them. It owns the aesthetic-asset shelf: stylized output that ships to a landing page hero, deck slide, OG card, or launch teaser. Different tools for different jobs:
| Globestudio | globe.gl | Mapbox Studio | Felt | Haikei | |
|---|---|---|---|---|---|
| 3D globe out of box | ✅ | ✅ | ❌ | ❌ | ❌ |
| Dotted maps | ✅ 12 shapes | partial | ❌ | ❌ | ❌ |
| Shader aesthetic looks | ✅ 21 | ❌ | custom WebGL only | ❌ | ❌ |
| Multiple projections | 5 flat (solid maps; dotted maps use Mercator) | sphere only | many | many | n/a |
| No-code GUI | ✅ | ❌ library | ✅ | ✅ | ✅ |
| PNG / SVG / video export | ✅ PNG, SVG, WebM, MP4, GIF | manual | print / PDF | ✅ | PNG / SVG |
| Embed iframe | ✅ /embed | DIY | ✅ | ✅ | DIY |
| Framer / Webflow | ✅ Framer code component (copy-paste), Webflow embed | ❌ | plugins | ❌ | ❌ |
| No signup / no API key | ✅ | n/a | ❌ | ❌ | ✅ |
| Free + MIT | ✅ | ✅ (library) | freemium | paid | free, closed |
What Globestudio gives up: GIS-accurate data overlays, large dataset analysis, real-time collaboration. If those are what you need, reach for Mapbox / Felt / Kepler — they're great at them.
Built on the shoulders of: globe.gl and COBE defined what a modern OSS 3D globe library looks like. dotted-map is the engine under the dot field. Stamen Maps was the spiritual ancestor of "maps as visual aesthetic."
Built with:
currentColor fill so they theme cleanlyNo backend and no accounts. Privacy-respecting Vercel Analytics and Speed
Insights honor Do Not Track, Global Privacy Control, and the local opt-out in
/privacy; everything else renders in your browser.
We want contributions. Code, presets, example projects, screenshots, docs rewrites — all of it counts.
The shortest path:
Full guide in CONTRIBUTING.md.
MIT. Use it, remix it, ship it. If you use it commercially or prominently we'd love to hear about it (no obligation, just curious).
The included geography data comes from world-atlas, us-atlas, and world-countries — all with permissive licenses. If you build on top of derived map data outside this repo, double-check the source attributions.
Made by @alevizio · alevizio.com · twitter.com/alevizio