Globe

5kb WebGL Globe

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/globe.json

Usage

import { Globe } from "@/components/ui/globe";

  <Globe
    rotateCities={["new york", "london", "tokyo", "dubai"]}
    rotationSpeed={3000}
    markers={[
      { location: [40.7128, -74.006], size: 0.1 },
      { location: [51.5074, -0.1278], size: 0.1 },
      { location: [35.6762, 139.6503], size: 0.1 },
      { location: [25.2048, 55.2708], size: 0.1 }
    ]}
    glowColor={[0.1, 0.8, 1]}
    markerColor={[0.1, 0.8, 1]}
    className="max-w-[800px]"
  />

Examples

Cities based Rotation

API Reference

Globe

The Globe component creates beautiful 5kb WebGL Globe

Props

Property	Type	Default	Description
`baseColor`	[number, number, number]	`[0.3, 0.3, 0.3]`	Base color of the globe in RGB.
`markerColor`	[number, number, number]	`[0.1, 0.8, 1]`	Color of the marker points in RGB.
`glowColor`	[number, number, number]	`[1, 1, 1]`	Color of the globe glow in RGB.
`markers`	Array<{ location: [number, number]; size: number }>	`Default SF/NY markers`	Coordinate markers with optional size.
`scale`	number	`1`	Size multiplier for the globe.
`className`	string	`''`	CSS class name for the outer container.
`rotateToLocation`	string \| [number, number]	`—`	Initial rotation target — city name or coordinates.
`autoRotate`	boolean	`true`	Enable or disable idle globe rotation.
`rotateCities`	string[]	`[]`	City names to auto-rotate through.
`rotationSpeed`	number	`3000`	Time (ms) between auto-rotated cities.