GitHub Globe
A globe animation as seen on GitHub's homepage. Interactive and customizable.
We sell soap worldwide
This globe is interactive and customizable. Have fun with it, and don't forget to share it. :)
Installation
Run the following command
npx shadcn@latest add https://ui.aceternity.com/registry/globe.jsonCopy 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
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Manu is the man! He is the best front-end developer I have worked with.
He took the requirements and quite literally ran with them. We are super happy with the result and product we go...
John Shahawy
Founder at Rogue and Moonbeam