Globe

Interactive 3D globe with animated arcs and location markers

globe-tw

Customize

Arc Color

Dots & Shadow Color

Show AtmosphereInteractive

Rotation Speed

0.85

Camera Altitude

3.0

Point Size

0.25

Atmosphere Altitude

0.15

Globe Opacity

1.00

Arc Count

Arc Interval (ms)

6000

Arc Animation Duration (ms)

2000

Props

Name	Type	Default	Description
`width`	number \| "auto"	`"auto"`	Width of the globe container in pixels, or "auto" to match parent width
`height`	number \| "auto"	`"auto"`	Height of the globe container in pixels, or "auto" to match width
`primaryColor`	string	`"rgb(59, 130, 246)"`	Color for animated arcs and labels (any valid CSS color)
`neutralColor`	string	`"rgb(156, 163, 175)"`	Color for land dots and atmosphere (any valid CSS color)
`atmosphereColor`	string	`undefined`	Color for atmosphere (defaults to neutralColor)
`showAtmosphere`	boolean	`true`	Show atmosphere glow around the globe
`autoRotateSpeed`	number	`0.85`	Auto-rotation speed (0 = no rotation, higher = faster)
`enableZoom`	boolean	`false`	Enable zoom controls via mouse wheel
`interactive`	boolean	`true`	Whether the globe is interactive
`arcCount`	number	`10`	Number of animated arcs to show at once
`arcInterval`	number	`6000`	Interval between arc animations in milliseconds
`arcAnimationDuration`	number	`2000`	Duration of arc dash animation in milliseconds
`cameraAltitude`	number	`2`	Altitude of the camera view (higher = further away)
`pointSize`	number	`0.25`	Size of the land dots
`pointResolution`	number	`5`	Resolution of the points
`atmosphereAltitude`	number	`0.3`	Altitude of the atmosphere
`globeOpacity`	number	`1`	Opacity of the globe material
`landDotRows`	number	`200`	Number of rows for land dot grid (higher = more detail)
`landMapUrl`	string	`"https://unpkg.com/three-globe@2.31.1/example/img/earth-topology.png"`	URL of the land map image for dot placement
`className`	string	`undefined`	Additional class name for the container
`onReady`	() => void	`undefined`	Callback fired when globe is initialized and ready
`onGlobeClick`	(coords: { lat: number; lng: number }, event: MouseEvent) => void	`undefined`	Callback when globe is clicked

widthnumber | "auto"

Width of the globe container in pixels, or "auto" to match parent width

Default"auto"

heightnumber | "auto"

Height of the globe container in pixels, or "auto" to match width

Default"auto"

primaryColorstring

Color for animated arcs and labels (any valid CSS color)

Default"rgb(59, 130, 246)"

neutralColorstring

Color for land dots and atmosphere (any valid CSS color)

Default"rgb(156, 163, 175)"

atmosphereColorstring

Color for atmosphere (defaults to neutralColor)

Defaultundefined

showAtmosphereboolean

Show atmosphere glow around the globe

Defaulttrue

autoRotateSpeednumber

Auto-rotation speed (0 = no rotation, higher = faster)

Default0.85

enableZoomboolean

Enable zoom controls via mouse wheel

Defaultfalse

interactiveboolean

Whether the globe is interactive

Defaulttrue

arcCountnumber

Number of animated arcs to show at once

Default10

arcIntervalnumber

Interval between arc animations in milliseconds

Default6000

arcAnimationDurationnumber

Duration of arc dash animation in milliseconds

Default2000

cameraAltitudenumber

Altitude of the camera view (higher = further away)

Default2

pointSizenumber

Size of the land dots

Default0.25

pointResolutionnumber

Resolution of the points

Default5

atmosphereAltitudenumber

Altitude of the atmosphere

Default0.3

globeOpacitynumber

Opacity of the globe material

Default1

landDotRowsnumber

Number of rows for land dot grid (higher = more detail)

Default200

landMapUrlstring

URL of the land map image for dot placement

Default"https://unpkg.com/three-globe@2.31.1/example/img/earth-topology.png"

classNamestring

Additional class name for the container

Defaultundefined

onReady() => void

Callback fired when globe is initialized and ready

Defaultundefined

onGlobeClick(coords: { lat: number; lng: number }, event: MouseEvent) => void

Callback when globe is clicked

Defaultundefined