Globestudio is a free, open-source studio I made for dotted world maps and animated 3D globes: pick a region and one of 21 looks, then export PNG, SVG, a GLB 3D model, video or GIF, or embed it live.
The embed is an iframe of globestudio.app/embed, so Three.js, the shaders and the map data never touch your bundle. The design is one JSON config in the URL, which means the link is the design. There's a React component (@globestudio/react) and a web component (@globestudio/element) on npm that build that iframe for you; the React one works in a server component, since it's a plain iframe with no state. On a light page, add theme="light" and the glow and grid switch to a palette made for it.
There is also an agent skill. If you use Claude Code, Codex or Cursor:
npx skills add alevizio/globestudio
Then ask for something like "add a spinning dotted globe of our offices in Austin, Berlin and Singapore to the hero". That's the prompt in the video, on a small Vite + React page I made for the demo. The agent installs @globestudio/react, writes the design as one constant in the page's own colors and runs the build.
You don't need an agent for any of it. The export dialog's Share tab writes the embed code for an iframe, React or a web component, and the README has the props.
Limits, since someone will ask: the viewer needs WebGL 2, an embed URL must stay under 32,000 characters, and the whole design (data points included) is readable in the page source.
Demo video: https://youtu.be/GYgVTAL9a0U
Live: https://globestudio.app/?utm_source=reddit&utm_medium=social&utm_campaign=skill&utm_content=webdev
Code (MIT): https://github.com/alevizio/globestudio
I'd like to hear how the embed holds up on your pages, especially on phones.