Globe
Globe is an interactive background in the UI HUB interactive backgrounds collection. An interactive, physically-modeled 3D Earth visualization rendered in Three.js with d3-geo equirectangular map projection. GeoJSON landmass boundaries are rasterized to determine land presence vs oceans, populating thousands of instanced spherical particle dots or solid continent textures.
The component is driven by 20 documented props (speed, smoothing, dots, fill, fillColor, scale and 14 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Three.js; d3-geo; WebGL.
Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Globe?
An interactive 3D WebGL Earth globe rendered with Three.js and d3-geo featuring continental landmass outlines, dotted particle grids, latitude/longitude graticules, and draggable momentum physics.
Globe at a glance
- Category
- Interactive Backgrounds
- Pricing
- Free to use
- Libraries
- React, Three.js and D3 Geo
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 20
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Globe works
An interactive, physically-modeled 3D Earth visualization rendered in Three.js with d3-geo equirectangular map projection. GeoJSON landmass boundaries are rasterized to determine land presence vs oceans, populating thousands of instanced spherical particle dots or solid continent textures. Continental coastlines and graticules are extruded as smooth 3D CatmullRom spline tubes. Pointer dragging allows complete spherical orbital rotation with damped inertial momentum decay and raycasted hover-pause detection.
Technical information for Globe
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React, Three.js and D3 Geo |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | WebGL shaders |
| State change | spinning orbital Earth globe with glowing continental dot matrix and coordinate grid to user interactive free-spin rotation with fluid angular momentum and custom location pinpoints |
| Props | 20 configurable |
| Usage example | Not published yet |
What Globe requires
- Three.js
- d3-geo
- WebGL
- ResizeObserver
- Pointer Events
Globe questions
What is Globe?
An interactive 3D WebGL Earth globe rendered with Three.js and d3-geo featuring continental landmass outlines, dotted particle grids, latitude/longitude graticules, and draggable momentum physics.
How does Globe work?
An interactive, physically-modeled 3D Earth visualization rendered in Three.js with d3-geo equirectangular map projection. GeoJSON landmass boundaries are rasterized to determine land presence vs oceans, populating thousands of instanced spherical particle dots or solid continent textures. Continental coastlines and graticules are extruded as smooth 3D CatmullRom spline tubes. Pointer dragging allows complete spherical orbital rotation with damped inertial momentum decay and raycasted hover-pause detection.
Which category does Globe belong to?
Globe is listed under Interactive Backgrounds in the UI HUB catalog. Interactive backgrounds react to cursor movement, scroll and pointer position, so the page feels alive instead of static. Every background here is built as a real React component with configurable props, so you can tune colours, density and speed rather than shipping a black box. Preview one in the browser, read the props, then copy the code straight into your project.
What does the speed prop do in Globe?
Globe auto-rotation speed (0 freezes rotation, 1-10 range). It defaults to 2.
What does the smoothing prop do in Globe?
Inertial rotation smoothing factor (0-10) for drag and decay physics. It defaults to 8.
Is Globe free to use?
Globe is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Globe use?
Globe uses React, Three.js and D3 Geo and is styled with Tailwind CSS.
What does Globe need to run?
Globe needs Three.js, d3-geo, WebGL and ResizeObserver.