Globestudio

Globestudio

Open-source dotted maps and animated 3D globes for designers, animators, and creative developers.

Pick a country or the whole world, choose a look, change the dots and colors, and export PNG, SVG, GLB, WebM, MP4, or GIF. Built with React and Three.js.

**globestudio.app** · All 21 looks · Roadmap · Discussions

Why Globestudio?

Most open-source map tools are built for engineers: tile servers, geocoding, GIS pipelines. Globestudio is for when the map is the picture, like a landing page hero, a launch teaser, a scrollytelling explainer, or a deck slide that needs a globe but not a database.

You work by eye with the studio's controls and export when it looks right. The studio runs in your browser, and the code is MIT licensed.

Features

• Maps of the world, a continent, a subregion, a country, or a US state.
• Flat map or 3D globe, with a morph between the two. The flat map sets its dots on a Mercator grid. The globe spaces its own evenly over the sphere, so the gaps between dots stay the same from the equator to the poles; designs in Square dots, such as Pixel, keep the flat map's grid there.
• 12 dot shapes (Circle, Hexagon, Triangle, Pentagon, Square, Diamond, Star, Plus, Ring, Voxel, Particle Grid, ASCII glyphs), or upload your own SVG, PNG, JPEG or WebP.
• 21 looks: Default plus 20 shader looks (Halftone, Risograph, Newsprint, Aurora, Pixel, Bayer, Atkinson, Wireframe, CRT, Glitch, Bad TV, Bloom, Metal, Iridescent, Pencil, Corrupt, Toon, Threshold, Vapor, Sonar). Each look is a one-click preset that sets the background, density, dot size and globe chrome, applies at most one shader pass, and has its own URL at /looks/:id. You can change the shape, colors and region after picking one.
• Gradients and alpha on the dot color, land fill, and country stroke.
• Your own data: paste lat,lng,value or country,value lines to plot markers sized by value, optionally joined by arcs. Try an example fills in eight cities to start from.
• Solid maps: filled land and stroked borders, river and city overlays, pasted GeoJSON lines and points, and 5 flat projections (Mercator, Equal Earth, Natural Earth, Winkel Tripel, Robinson). Dotted maps use Mercator on the flat map, and the globe spaces its dots evenly.
• Animations: rotation, twinkle, size jitter, and network arcs. They stop under prefers-reduced-motion.
• Exports: PNG at 1x to 4x (the WebGL scene is re-rendered at that size); SVG with clean vector dots (6 effects are approximated with SVG filters, and the full shader look needs PNG or video; when a design has something the vectors leave out, such as a look's effect, solid land or a Space background, the SVG and Figma tabs name it); a GLB 3D model for three.js, Blender and other 3D tools, with the dots, the globe and the arcs in flat colors and no shader effect or animation; WebM, MP4 (where the browser can encode it), and GIF video; and a JSON config. Copy image puts the same PNG on the clipboard, ready to paste into Figma, Slides, Slack or Notion.
• Keyboard shortcuts: S shuffle, [/] cycle looks, D export, R reset, G toggle view, H toggle panel, ? help.
• Accessibility: targets WCAG 2.2 AA and was self-audited. It works from the keyboard, a hidden DOM mirror describes the canvas state to screen readers, and reduced motion is respected. Known gaps are listed in ACCESSIBILITY.md.

Quickstart

Use it

The live tool runs entirely in your browser at globestudio.app, and you don't need an account.

Run it locally

Requires Node 20.19+ (or 22.12+) and npm.

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

Open http://127.0.0.1:5173/ and the studio loads. VITE_TEASER=1 npm run dev shows the pre-launch waitlist teaser instead. Deploys set VITE_TEASER=0.

Build it

npm run build      # → dist/
npm run preview    # serve dist/ locally
npm test -- --run  # the full Vitest suite
npm run test:e2e   # browser smoke + accessibility checks

Embed it anywhere

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>

About 3 KB gzipped, with no dependencies. It works in Webflow, Squarespace, blog posts, and anywhere else you can add a script tag. Every embed param except plugin has a matching data-* attribute (c is data-config, and data-theme passes only light). The script watches the DOM with a MutationObserver and mounts elements added later, 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>

The embed posts { type: "globestudio-resize", height } through postMessage; listen for it and resize the iframe to match. It needs WebGL 2. Without it, the embed shows a short note and a link to open Globestudio in a supported browser.

React component or web component

npm install @globestudio/react     # <Globe look="aurora" />
npm install @globestudio/element   # <globe-studio look="aurora"></globe-studio>

Both wrap the same /embed route in an iframe, so every look works in both. Setup and props: packages/react and packages/web-component. For a new React project, start from the React starter.

On a light page, set theme="light" on either one. It sends the theme param below: the glow and grid switch to a palette for light pages, and Wireframe's white ink, which all but vanishes there, turns graphite. Halftone, Toon and Threshold paint a dark page of their own, where graphite ink is lost, so make them see-through in the config as well: config='{"backgroundStyle":"transparent"}'.

To let visitors turn the globe into the flat map and back, add "viewSwitch": true to the config, as in config='{"viewSwitch":true}'. The embed then shows a Globe and Map switch in its top right corner. The Share tab's toggle of the same name adds it for you.

The export dialog writes this code for the design on screen. Its Share tab has an Embed code section with three options, iframe, React and Web component, each with a Copy button. Open in CodePen, under the snippet, opens the design in a new pen through the web component.

Embed parameters

Every query param the /embed route reads, as parsed in src/components/embed-view.jsx:

A JSON Schema for the c payload lives at /schema/config.json.

For Figma there are two ways in. The export dialog's Figma tab copies the design as vectors or as an image, ready to paste into a file, and it links to the Community plugin, which runs the full studio inside Figma. When the look has an effect the vectors can't keep, the tab says so under Copy as vectors and points to Copy as image. To bring a design you made on the site into Figma, paste its share link into the plugin: into its Paste a share link field, or anywhere outside a text field. Look and embed links work too.

globestudio.app/integrations has copy-paste setups for AI agents (MCP), Webflow, Framer, Figma, Notion, WordPress (through a Custom HTML block), plain HTML, and React. In this repo: Figma plugin · WordPress block (manual install for now; it is not on wordpress.org yet) · Framer component · embed snippet

Longer reads: How to make a dotted world map in 2026 · all articles

Use it from AI tools (MCP)

Globestudio runs a hosted Model Context Protocol server at https://globestudio.app/mcp (streamable HTTP, nothing to install, no account). From Claude, Codex, Cursor or any other MCP client, an agent can list and search looks, build share URLs, read a share link you paste (read_share_url), and get embed snippets without leaving the chat. Every tool only reads: it builds or reads links and stores nothing. The privacy page says what the hosted server receives and keeps.

The same tools run locally over stdio: claude mcp add globestudio -- npx -y @globestudio/mcp.

Without an MCP client, use Copy for AI in the MCP tab of the export dialog. It copies 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 it from coding agents (skill)

Ask your coding agent for a globe and get one that fits the page. The Globestudio skill teaches Claude Code, Codex, Cursor and other agents how a design travels in a link, how to embed one with the packages or an iframe, and which look fits a brief. Add it to a project:

npx skills add alevizio/globestudio

Or with the GitHub CLI, or as a Claude Code plugin that also connects the hosted MCP server:

gh skill install alevizio/globestudio globestudio

claude plugin marketplace add alevizio/globestudio
claude plugin install globestudio@globestudio

In Gemini CLI, gemini extensions install https://github.com/alevizio/globestudio adds the skill and the MCP server. In the Claude app, download globestudio-skill.zip from the latest release and upload it in Settings, Capabilities, Skills.

The skill has a page on skills.sh with its installs and security audits. npx skills sends anonymous install data to skills.sh unless you set DISABLE_TELEMETRY=1. The skill is plain markdown in skills/globestudio. Its reference files are built from the app's own code with npm run skill:references, and a test fails when they fall behind. The Claude Code plugin in plugins/globestudio carries a copy of the skill, which the same command refreshes (or npm run plugin:sync on its own).

What you can build with it

Runnable examples

The examples/ directory has 10 reference projects: runnable HTML, a React starter, drop-in components, and adaptation guides. A few to start with:

• starter-react: a Vite and React app with a globe on the page. Copy it with npx degit@3.10.0 alevizio/globestudio/examples/starter-react my-globe, or open it in StackBlitz.
• embed-snippet: the smallest iframe setup. Copy it into Webflow, Framer, plain HTML, or anywhere else.
• hero-globe: a full-bleed animated globe behind a landing page hero.
• shader-presets-showcase: all 21 looks in one auto-fit grid, handy for picking one.

Share what you make in Show and tell.

Documentation

How it compares

These tools overlap with Globestudio in places:

What Globestudio doesn't do: GIS-accurate data overlays, large dataset analysis, or real-time collaboration. For those, Mapbox, Felt, and Kepler are good choices.

Credits: globe.gl and COBE set the bar for open-source 3D globe libraries. dotted-map generates the dot field. Stamen Maps was an early inspiration for treating maps as a visual style.

Tech stack

• React 19 and Vite for the app shell
• Three.js for the WebGL globe, instanced dot rendering, shader effects, and network arcs
• dotted-map for the source dot field
• d3-geo, d3-geo-projection and topojson-client for topology decoding and the 5 flat projections of solid maps (Mercator, Equal Earth, Natural Earth, Winkel Tripel, Robinson; dotted maps use Mercator on the flat map)
• world-countries, world-atlas and us-atlas for source geography
• @resvg/resvg-js to render the Open Graph share cards from SVG to PNG (npm run og:generate)
• Pixelarticons by Gerrit Halfmann for the in-app icons: 24×24 pixel-grid icons filled with currentColor, so they follow the theme
• Vitest, Testing Library and axe-core for tests and automated accessibility checks

No accounts. The studio renders everything in your browser. The only server code is the hosted MCP endpoint and the closed waitlist endpoint, which now answers 410. Vercel Analytics and Speed Insights don't load when your browser sends Do Not Track or Global Privacy Control, or when you opt out at /privacy. The terms of use are at /terms.

Contributing

Contributions of any size are welcome: code, presets, example projects, screenshots, or a docs rewrite.

The shortest paths:

1. Made something with the live tool? Post it in Show and tell.
2. Found a bug? Open a bug report.
3. Made a preset you like? Send a preset submission.
4. Have an idea? Start an Ideas discussion.

Full guide in CONTRIBUTING.md.

License

MIT, commercial use included. If you use it in something public, I'd like to see it, though you don't have to tell me.

The geography comes from world-atlas and us-atlas (ISC), world-countries (ODbL, a share-alike database license), and Natural Earth (public domain) for the city and river overlays. NOTICE.md has the details. If you reuse the map data outside this repo, check those licenses first, ODbL in particular.

Made by @alevizio · alevizio.com · twitter.com/alevizio

Listed on Three.js Resources