Globe Wireframe

globe with smooth city rotations, responsive design, and premium motion

Installation

npx shadcn@latest add @scrollxui/globe-wireframe

import GlobeWireframe from '@/components/ui/globe-wireframe';

<GlobeWireframe className='w-full h-full' variant='solid' />

The Globe Wireframe component creates beautiful globe with smooth city rotations, responsive design, and premium motion

Property	Type	Default	Description
`variant`	"wireframe" \| "wireframesolid" \| "solid"	`"wireframe"`	Rendering style of the globe.
`scale`	number	`1`	Scales the globe size relative to its container.
`className`	string	`"aspect-square w-full max-w-150"`	CSS classes applied to the globe container.
`strokeColor`	string	`"currentColor"`	Stroke color for countries and outlines.
`strokeWidth`	number	`1`	Stroke width for country borders.
`sphereOutlineColor`	string	`"currentColor"`	Outline color of the globe sphere.
`sphereOutlineWidth`	number	`1`	Width of the globe outline stroke.
`showGraticule`	boolean	`true`	Show latitude and longitude grid lines.
`graticuleOpacity`	number	`0.2`	Opacity of the graticule lines.
`autoRotate`	boolean	`true`	Automatically rotate the globe when idle.
`autoRotateSpeed`	number	`0.5`	Speed of idle rotation.
`rotateToLocation`	string \| [number, number]	`—`	Rotate globe to a city name or coordinates.
`rotateCities`	string[]	`[]`	Automatically rotate through listed cities.
`rotationSpeed`	number	`3000`	Interval (ms) between city rotations.
`enableInteraction`	boolean	`true`	Enable drag interaction to rotate the globe.
`countryFillColor`	string	`—`	Fill color for countries in solid variant.
`countryHoverColor`	string	`—`	Hover color for countries (solid variant only).
`backgroundColor`	string	`"transparent"`	Background color behind the globe sphere.