Globestudio MCP server

Globestudio

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.

globestudio.app · Live demos · Roadmap · Discussions

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, 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.

Features

Square · Diamond · Star · Plus · Ring · Voxel · Particle Grid · ASCII glyphs · your own SVG/PNG

• 🌍 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 ·

Bayer, Atkinson, Wireframe, CRT, Glitch, Bad TV, Bloom, Metal, Iridescent, Pencil, Corrupt, Toon, Threshold, Vapor, Topographic, plus the base Default. Each look applies at most one shader pass and works with any shape, color, or selection.

• 🪄 21 shader looks: Halftone, Risograph, Newsprint, Aurora, Pixel,

motion-aware (respects prefers-reduced-motion)

• 🌈 Gradients + alpha on dot color, land fill, and country stroke
• ✨ Live animations — rotation, twinkle, size jitter, network arcs,

matching backgrounds, density, dot size, and globe chrome. Shareable URLs at /looks/:id.

• 🎛️ 21 curated presets — every shader look is a one-click preset with

vector dots (6 effects approximated with SVG filters; the full shader look needs PNG or video); WebM, MP4, and GIF video; JSON config

• 💾 Real exports: PNG at 1x to 4x (WebGL re-render); SVG with clean

R reset, G toggle view, H toggle panel, ? help

• ⌨️ Full keyboard system — S shuffle, [/] cycle presets, D export,

a screen-reader proxy DOM for canvas state, reduced-motion support. Known gaps are listed in ACCESSIBILITY.md

• ♿ Accessibility: built to WCAG 2.2 AA and self-audited. Keyboard-first,

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.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. To preview the pre-launch waitlist teaser instead, run VITETEASER=1 npm run dev; deploys set VITETEASER=0 (1 = teaser).

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

Globestudio ships several embed paths; pick whichever fits the tool:

One-line script tag (Recommended)

Shortened. The full README is on GitHub.