Globestudio

Why Globestudio?

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, thedeck slide that needs a globe but not a database.

Think of it as a Shader Lab for maps and globes — a designer-first canvaswith presets, effects, motion, and clean exports. Composable, web-native, andyours to remix.

Features

• 🌍 Maps for any scope — world, country, continent, subregion, US state
• 🔄 Flat ↔ 3D globe — same dot data, two views, smooth morph
• 🎨 12 dot shapes + custom upload — Circle · Hexagon · Triangle · Pentagon ·Square · Diamond · Star · Plus · Ring · Voxel · Particle Grid · ASCII glyphs ·your own SVG/PNG
• 🪄 21 shader looks — Halftone, Risograph, Newsprint, Aurora, Pixel,Bayer, Atkinson, Wireframe, CRT, Glitch, Bad TV, Bloom, Metal, Iridescent,Pencil, Corrupt, Toon, Threshold, Vapor, Topographic — plus the baseDefault. Stackable on any preset.
• 🌈 Gradients + alpha on dot color, land fill, and country stroke
• ✨ Live animations — rotation, twinkle, size jitter, network arcs,motion-aware (respects prefers-reduced-motion)
• 🎛️ 21 curated presets — every shader look is a one-click preset withmatching backgrounds, density, dot size, and globe chrome. ShareableURLs at /looks/:id.
• 💾 Real exports — PNG (high-res via WebGL re-render), SVG (with shadereffects baked in), WebM video (looped or one-shot), JSON config
• ⌨️ Full keyboard system — S shuffle, [/] cycle presets, D export,R reset, G toggle view, H toggle panel, ? help
• ♿ Accessibility — WCAG 2.2 AA conformant. Keyboard-first, screen-reader proxy DOM for canvas state, focus trap on modals, motionpreferences honored. See ACCESSIBILITY.md

Quickstart

Use it

The live tool runs entirely client-side:

→ globestudio.app

Pick a country, tweak the look, export.

Run it locally

Requires Node 20+ and npm.

git clone https://github.com/alevizio/globestudio
cd globestudio
npm install
npm run dev

Open http://127.0.0.1:5173/.

Build it

npm run build      # → dist/
npm run preview    # serve dist/ locally
npm test -- --run  # 152 tests across 24 files
npm run test:e2e   # browser smoke + accessibility checks

Embed it anywhere

Globestudio ships two embed paths — pick whichever fits the tool:

One-line script tag (Recommended)

<div data-globestudio data-look="halftone" data-density="50"
     style="width: 100%; height: 480px;"></div>
<script async src="https://globestudio.app/embed.js"></script>

~3kb gzipped, zero dependencies, works in Webflow / Squarespace / blogposts / anywhere HTML is allowed. Every embed param has a matchingdata-* attribute. Watches the DOM for later-added elements viaMutationObserver, so SPAs and dynamic content work too.

Plain iframe

<iframe
  src="https://globestudio.app/embed?look=halftone&density=70&autoSpin=1"
  width="100%"
  height="500"
  style="border:0"
  loading="lazy"
  title="Globestudio dotted globe"
></iframe>

Query parameters: look, density, dotSize, dotColor, worldFill,renderMode (dots/solid), selection (world, country:USA,continent:Europe, subregion:Western Europe), motion, tiltX,tiltY, autoSpin, view (flat/globe), static (freeze motion forstatic previews), transparent, background, source (analytics tag).

Resize-aware via postMessage — listen for{ type: "globestudio-resize", height } from the embed and resize theiframe to match. WebGL required; falls back to a still preview + a"how to enable WebGL" panel if the GL context can't be created.

Per-tool integration guides:Webflow ·Framer ·Figma ·Notion ·Plain HTML ·All integrations →

Reading material:How to make a dotted world map in 2026 ·All articles →

Use it from AI tools (MCP)

Globestudio ships a Model Context Protocolserver, so Claude, Cursor, and any MCP-compatible assistant can generateglobes, build share URLs, and grab embed snippets straight from a chat:

claude mcp add globestudio -- npx -y @globestudio/mcp

Full tool list and setup in packages/mcp/README.md.

What you can build with it

Runnable examples

The examples/ directory holds 7 reference projects withrunnable HTML and adaptation guides. Highlights:

• embed-snippet — the minimum-viable iframepattern. Copy into Webflow, Framer, Notion, plain HTML, anywhere.
• hero-globe — full-bleed animated globe behinda landing-page hero.
• shader-presets-showcase — all 16presets in one auto-fit gallery, perfect for picking a look.

Share what you make in Show & Tell.

Documentation

How it compares

There's no shortage of map and globe tools — Globestudio doesn't tryto replace any of them. It owns the aesthetic-asset shelf: stylizedoutput that ships to a landing page hero, deck slide, OG card, orlaunch teaser. Different tools for different jobs:

What Globestudio gives up: GIS-accurate data overlays, large datasetanalysis, real-time collaboration. If those are what you need, reachfor Mapbox / Felt / Kepler — they're great at them.

Built on the shoulders of: globe.gland COBE defined what a modern OSS3D globe library looks like. dotted-mapis the engine under the dot field. Stamen Mapswas the spiritual ancestor of "maps as visual aesthetic."

Tech stack

Built with:

• React 19 + Vite for the app shell
• Three.js for the WebGL globe, instanced dot rendering, shader effects, network arcs
• dotted-map for the source dot field
• d3-geo + d3-geo-projection + topojson-client for projections (Mercator, Equal Earth, Winkel Tripel, Robinson) and topology decoding
• world-countries + world-atlas + us-atlas for source geography
• satori + @resvg/resvg-js for the OG share card pipeline (JSX → SVG → PNG at build time)
• Pixelarticons by Gerrit Halfmann for the in-app icon set — 24×24 pixel-grid icons with currentColor fill so they theme cleanly
• Vitest + Testing Library + axe-core for tests and the WCAG 2.2 AA accessibility guard

No backend and no accounts. Privacy-respecting Vercel Analytics and SpeedInsights honor Do Not Track, Global Privacy Control, and the local opt-out in/privacy; everything else renders in your browser.

Contributing

We want contributions. Code, presets, example projects, screenshots, docsrewrites — all of it counts.

The shortest path:

1. Build something cool with the live tool → drop it inShow & Tell
2. Found a bug? → Bug report
3. Made a preset you love? → Preset submission
4. Have an idea? → Ideas discussion

Full guide in CONTRIBUTING.md.

License

MIT. Use it, remix it, ship it. If you use it commercially orprominently we'd love to hear about it (no obligation, just curious).

The included geography data comes fromworld-atlas,us-atlas, andworld-countries — all with permissivelicenses. If you build on top of derived map data outside this repo,double-check the source attributions.