Globi is a zero-config web component that renders interactive 3D globes and flat-map projections in the browser. It supports 13 celestial bodies, 5 visual themes, animated arcs, region overlays, real-time data feeds, scrollytelling, and an AI agent API — all driven by a simple JSON scene format. MIT-licensed and designed for content creators, educators, and newsrooms who need geographical visualization without a GIS degree.
Globi lets anyone embed an interactive, explorable globe into a webpage with a single HTML tag. No build step, no GIS tooling, no WebGL boilerplate — just drop in <globi-viewer>, pass a JSON scene, and the globe renders with markers, flight arcs, labeled regions, animated paths, and camera animations.
The problem it solves: Static maps and 2D projections distort geography and strip away interactivity. Existing globe libraries require significant setup and developer expertise. Globi bridges the gap — it gives non-technical content creators the power of a 3D globe through a declarative JSON format, while still exposing a full programmatic API for developers.
Key capabilities:
- 13 celestial bodies — Earth, Moon, Mars, Europa, Titan, and 8 more, each with NASA/ESA textures and accurate axial tilt
- 5 visual themes — photo-realistic, wireframe (shaded/flat), and grayscale (shaded/flat)
- 3 flat-map projections — equirectangular, Mercator, and Miller cylindrical
- Rich scene primitives — markers, callouts, arcs, paths, regions, GeoJSON import, category filters, and legend panels
- Keyframe animation engine — fly-to transitions with elastic zoom arcs, scrollytelling support via external widget control
- Real-time data — live feeds with loading states, pulsating animations, and automatic refresh
- AI agent API — 28 programmatic commands via
window.globi, DOM discoverability attributes, and LLMs.txt output for AI consumption - Export — GeoJSON, OBJ, USDZ, JSON scene snapshots
- Accessible — full keyboard navigation, screen reader announcements, WCAG-compliant contrast
Built with: Three.js, vanilla JavaScript, Web Components (Custom Elements v1). Minimal dependencies beyond Three.js. Ships as a single ES module bundle.
Example scenes included: world capitals, ISS real-time tracking, naval vessel OSINT, civil shipping lanes, Battle of Midway scrollytelling, Hannibal’s Alpine crossing, Indiana Jones flight routes, moon landings, Mars rovers, Europa’s subsurface ocean, and Titan’s methane lakes.
Links: GitHub · npm · Live Examples
License: MIT