Globe

Interactive 3D globe with animated arcs and location markers

globe-tw

Customize

Tweak the props live

Colors

Arc Color

#FF9FFC

Dots & Shadow Color

#9ca3af

Toggles

Show Atmosphere

Interactive

Globe Settings

Rotation Speed0.85

Camera Altitude3

Point Size0.25

Atmosphere Altitude0.15

Globe Opacity1

Arc Settings

Arc Count10

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)

Default:undefined

showAtmosphereboolean

Show atmosphere glow around the globe

Default:true

autoRotateSpeednumber

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

Default:0.85

enableZoomboolean

Enable zoom controls via mouse wheel

Default:false

interactiveboolean

Whether the globe is interactive

Default:true

arcCountnumber

Number of animated arcs to show at once

Default:10

arcIntervalnumber

Interval between arc animations in milliseconds

Default:6000

arcAnimationDurationnumber

Duration of arc dash animation in milliseconds

Default:2000

cameraAltitudenumber

Altitude of the camera view (higher = further away)

Default:2

pointSizenumber

Size of the land dots

Default:0.25

pointResolutionnumber

Resolution of the points

Default:5

atmosphereAltitudenumber

Altitude of the atmosphere

Default:0.3

globeOpacitynumber

Opacity of the globe material

Default:1

landDotRowsnumber

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

Default:200

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

Default:undefined

onReady() => void

Callback fired when globe is initialized and ready

Default:undefined

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

Callback when globe is clicked

Default:undefined