A globe makes global reach visible in a single look, and it tends to stop people mid-scroll. These can be heavy, though, so watch what each one does to the rest of the page. Install one as code you own, plot your own locations, and give it a static fallback for reduced motion and slower devices. Load it only when it scrolls into view.
Globe components draw an interactive 3D Earth: dotted or textured spheres that rotate, arcs between cities, markers for locations, and globes people can drag to spin. Most render with WebGL.
Use a globe when geography is part of the story, like global users or a network of servers. Keep the marker data in your own code, pause rotation off screen to save battery, and give the section a still image or text for devices that can't draw it.
Frequently asked questions
Most globes render with WebGL, through libraries like cobe or three.js, into a canvas. Install a globe component, size its container, and pass it the markers or arcs you want to show.
Give each marker a latitude, longitude and size, and the globe projects them onto the sphere as it turns. Keep the list in your own data, so updating it doesn't touch the drawing code.
They draw every frame, so they cost more than a still image. Pause rotation when the globe is off screen, cap the device pixel ratio, and show a still fallback where WebGL isn't available.
Many globe components support it: track the pointer while it's pressed and turn the globe with it, then let it ease back into its own rotation. Make sure dragging doesn't block scrolling on phones.
cobe is tiny and fast for dotted, rotating globes; react-globe.gl and three.js suit richer globes with textures, arcs and many points. Choose by how much the globe needs to do.
Give each arc a start and end coordinate, and the globe draws a curve between them over the sphere, often with an animated dash. Keep the arc data in your own code.
Most globe components take colours for the base, the land or dots, the markers and the glow as props. Match them to your theme and check the globe on both light and dark backgrounds.
