Drop one script tag into any website and get a beautiful, interactive 3D globe that shows your company's worldwide presence. Works everywhere — React, WordPress, Webflow, plain HTML.
Every option you change updates the globe in real-time.
<!-- 1. Place the container --> <div id="globe" style="width:500px;height:500px"></div> <!-- 2. Load the script --> <script src="hq-globe.umd.min.js"></script> <script> new HQGlobe('#globe', { offices: [ { city: 'London', country: 'UK', lat: 51.51, lon: -0.13 }, { city: 'New York', country: 'USA', lat: 40.71, lon: -74.01 }, ], theme: 'dark', autoRotate: true, }) </script>
Built on Three.js. No dependencies. One script tag.
Photorealistic NASA-style earth texture included. Continents, oceans, ice caps — all out of the box.
Drag the globe in any direction. Release and it coasts with momentum decay. Works on touch too.
City name, country, and custom description appear on hover. Fully styled for each theme.
Click any office marker and the globe smoothly rotates to center that city. Click again to release.
Dark (premium), Light, and Wireframe — all production-ready. Fully overridable accent color.
Works in React, Vue, Angular, WordPress, Webflow, Squarespace, or plain HTML. No npm required.
ResizeObserver keeps the globe pixel-perfect at any container size. Works on mobile from day one.
All offices, colors, speed, callbacks configured in one plain object. No Three.js knowledge needed.
onCityClick and onCityHover let you open modals, panels, or navigate — without modifying the source.
Switch instantly. Each theme is tuned to look great on its background color.
Buy once, use forever. All licenses include future updates.
1 website · personal or client project
Unlimited sites · commercial use
Resell to clients · white-label
<!-- Step 1: Add a container --> <div id="globe" style="width:600px;height:600px"></div> <!-- Step 2: Load the script --> <script src="hq-globe.umd.min.js"></script> <!-- Step 3: Initialize --> <script> const globe = new HQGlobe('#globe', { // ── Required ── offices: [ { city: 'London', country: 'UK', lat: 51.51, lon: -0.13, description: 'HQ' }, { city: 'New York', country: 'USA', lat: 40.71, lon: -74.01 }, { city: 'Singapore', country: 'SG', lat: 1.35, lon: 103.82 }, ], // ── Appearance ── theme: 'dark', // 'dark' | 'light' | 'wireframe' accentColor: '#E8A847', // hex color for markers texture: 'auto', // path to earth.jpg, or 'none' showGrid: true, showAtmosphere: true, // ── Behaviour ── autoRotate: true, rotateSpeed: 1.0, // multiplier focusOnClick: true, // ── Callbacks ── onCityClick: (office) => console.log('Clicked', office.city), onCityHover: (office) => console.log('Hovered', office), onReady: () => console.log('Globe ready'), }) // ── API Methods ── globe.focusCity('London') // rotate globe to a city globe.resetFocus() // resume auto-rotate globe.addOffice({ city: 'Tokyo', lat: 35.68, lon: 139.69 }) globe.setTheme('wireframe') globe.destroy() // clean up (React useEffect cleanup) </script>