Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

GitHub Globe

A globe animation as seen on GitHub's homepage. Interactive and customizable.

Open in

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.json

Copy the globe json

Download the globe.json file from this URL and paste it in data/globe.json.

Props

GlobeConfig Props

PropTypeDescription
pointSizenumberOptional. Size of the points on the globe.
globeColorstringOptional. Color of the globe.
showAtmospherebooleanOptional. Whether to show the atmosphere layer.
atmosphereColorstringOptional. Color of the atmosphere.
atmosphereAltitudenumberOptional. Altitude of the atmosphere layer.
emissivestringOptional. Emissive color of the globe material.
emissiveIntensitynumberOptional. Intensity of the emissive color.
shininessnumberOptional. Shininess of the globe material.
polygonColorstringOptional. Color of the polygons on the globe.
ambientLightstringOptional. Color of the ambient light in the scene.
directionalLeftLightstringOptional. Color of the directional light from the left.
directionalTopLightstringOptional. Color of the directional light from the top.
pointLightstringOptional. Color of the point light in the scene.
arcTimenumberOptional. Animation time for the arcs.
arcLengthnumberOptional. Length of the dash in the arc animations.
ringsnumberOptional. Number of rings to display initially.
maxRingsnumberOptional. Maximum number of rings that can be displayed.
initialPositionObjectOptional. Initial position of the globe. Contains lat and lng fields.
autoRotatebooleanOptional. Whether the globe should auto-rotate.
autoRotateSpeednumberOptional. Speed of the auto-rotation.

WorldProps Props

PropTypeDescription
globeConfigGlobeConfigConfiguration options for the globe.
dataPosition[]Array of positions to display arcs between.

Position Type

PropTypeDescription
ordernumberOrder of the arc.
startLatnumberStarting latitude of the arc.
startLngnumberStarting longitude of the arc.
endLatnumberEnding latitude of the arc.
endLngnumberEnding longitude of the arc.
arcAltnumberAltitude of the arc.
colorstringColor 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.

Go Pro
Manu is an artist, I didn't know what I wanted when we started, but his intuition and eye for design more than made up for it. We went from "I want something dark theme and high...

John Ferry

President at TAC, CEO at Rogue

A product by Aceternity
Building in public at @mannupaaji