Globe

An interactive 3D globe with dot grid, markers, and arcs. Built with Three.js, @react-three/fiber, and @react-three/drei.

Interactive Demo

Drag to rotate. Markers show major cities, arcs show connections.

Loading globe...

Accent Color

World Map Globe

Use showCountries to render real country outlines instead of the dot grid.

Loading globe...

Clean World Map

A minimal globe showing only country outlines — no markers or arcs.

Loading globe...

Usage

import { Globe } from "@mantleui/react/three";

<Globe
  size={400}
  color="#3b82f6"
  markers={[
    { lat: 40.7, lng: -74, label: "New York" },
    { lat: 51.5, lng: -0.1, label: "London" },
  ]}
  arcs={[
    { startLat: 40.7, startLng: -74, endLat: 51.5, endLng: -0.1 },
  ]}
/>

Props

Prop	Type	Default	Description
`size`	`number`	`400`	Globe size in pixels.
`color`	`string`	`"#3b82f6"`	Accent color for markers, arcs, and glow.
`dotColor`	`string`	`"rgba(255,255,255,0.3)"`	Color of the dot grid on the globe surface.
`backgroundColor`	`string`	`"transparent"`	Background color of the container.
`autoRotateSpeed`	`number`	`0.5`	Auto-rotation speed. Set to 0 to disable.
`interactive`	`boolean`	`true`	Allow drag-to-rotate interaction.
`markers`	`GlobeMarker[]`	—	Array of markers with lat, lng, label, color, and size.
`arcs`	`GlobeArc[]`	—	Array of arcs connecting two lat/lng points.

size400

number

Globe size in pixels.

color"#3b82f6"

string

Accent color for markers, arcs, and glow.

dotColor"rgba(255,255,255,0.3)"

string

Color of the dot grid on the globe surface.

backgroundColor"transparent"

string

Background color of the container.

autoRotateSpeed0.5

number

Auto-rotation speed. Set to 0 to disable.

interactivetrue

boolean

Allow drag-to-rotate interaction.

markers

GlobeMarker[]

Array of markers with lat, lng, label, color, and size.

arcs

GlobeArc[]

Array of arcs connecting two lat/lng points.