GitHub Globe
A globe animation as seen on GitHub's homepage. Interactive and customizable.
Installation
Run the following command
npx shadcn@latest add @aceternity/globeCopy the globe json
Download the globe.json file from this URL and paste it in data/globe.json.
Props
GlobeConfig Props
| Prop | Type | Description |
|---|---|---|
pointSize | number | Optional. Size of the points on the globe. |
globeColor | string | Optional. Color of the globe. |
showAtmosphere | boolean | Optional. Whether to show the atmosphere layer. |
atmosphereColor | string | Optional. Color of the atmosphere. |
atmosphereAltitude | number | Optional. Altitude of the atmosphere layer. |
emissive | string | Optional. Emissive color of the globe material. |
emissiveIntensity | number | Optional. Intensity of the emissive color. |
shininess | number | Optional. Shininess of the globe material. |
polygonColor | string | Optional. Color of the polygons on the globe. |
ambientLight | string | Optional. Color of the ambient light in the scene. |
directionalLeftLight | string | Optional. Color of the directional light from the left. |
directionalTopLight | string | Optional. Color of the directional light from the top. |
pointLight | string | Optional. Color of the point light in the scene. |
arcTime | number | Optional. Animation time for the arcs. |
arcLength | number | Optional. Length of the dash in the arc animations. |
rings | number | Optional. Number of rings to display initially. |
maxRings | number | Optional. Maximum number of rings that can be displayed. |
initialPosition | Object | Optional. Initial position of the globe. Contains lat and lng fields. |
autoRotate | boolean | Optional. Whether the globe should auto-rotate. |
autoRotateSpeed | number | Optional. Speed of the auto-rotation. |
WorldProps Props
| Prop | Type | Description |
|---|---|---|
globeConfig | GlobeConfig | Configuration options for the globe. |
data | Position[] | Array of positions to display arcs between. |
Position Type
| Prop | Type | Description |
|---|---|---|
order | number | Order of the arc. |
startLat | number | Starting latitude of the arc. |
startLng | number | Starting longitude of the arc. |
endLat | number | Ending latitude of the arc. |
endLng | number | Ending longitude of the arc. |
arcAlt | number | Altitude of the arc. |
color | string | Color of the arc. |
Inspiration for this globe is taken from GitHub's Homepage and this video
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
