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. :)

npx shadcn@latest add @aceternity/globe

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.

Prop	Type	Description
`globeConfig`	`GlobeConfig`	Configuration options for the globe.
`data`	`Position[]`	Array of positions to display arcs between.

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

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

200+ templates and blocks combined

Ready to copy paste component blocks, save days of development time