A CSS-built planet rotates and zooms in as you scroll. City pins orbit around it. Used on Stripe Atlas, infrastructure pages, "global presence" sections.
A spherical globe rotates on its axis tied to scroll progress. Surrounding it, a ring of city or office labels orbit the planet — they rotate around the globe while staying upright (counter-rotating their own text). The globe usually scales up as you scroll to give a "the planet comes into focus" feel. Used by Stripe Atlas, Vercel edge network, Cloudflare data-center maps.
The globe is a circular div with a layered background — a base radial-gradient for the ocean + inset shadows for the rounded shape, a continents layer using radial-gradient ellipses for fake landmasses, and a grid overlay using repeating-linear-gradient. Scrolling shifts the continents layer's background-position-x to fake the rotation. The orbit ring is a sibling div whose transform: rotate is tied to scroll; each label inside it counter-rotates by the same angle so it stays readable.
Scroll inside. The planet rotates AND grows; the city labels orbit while staying readable.
Build a CSS-only rotating globe with orbiting city labels. Sticky pin (top:0 height:100vh) inside a tall 2000px section, on a starry deep-space background (radial gradient + scattered tiny star dots via radial-gradient pattern). Inside the pin, a 360px globe wrapper that transform:scale(0.7 + --p * 0.5) — grows as you scroll. The globe itself is a circular div with: (1) base background of radial-gradient(circle at 30% 30%, light-blue, mid-blue, dark navy, near-black) for ocean depth; (2) inset box-shadow(-30px -40px 60px rgba(0,0,0,0.7) inset) for the spherical rim shadow; (3) outer drop shadow + blue glow. Inside the globe place TWO overlay layers: a "continents" layer with 4 dark-green radial-gradient ellipses simulating landmasses (background-size:200% so we can scroll-shift their X position) and a "grid" layer with two repeating-linear-gradient stripes (vertical + horizontal at 20px) for the meridian/equator lines, mix-blend-mode:overlay. As scroll progress --p grows, set background-position-x on the continents to (--p * -100%) so it visually rotates. Wrap the globe in an orbit container (inset:-60px) that rotates by transform:rotate(--p * -360deg). Place 6 city labels (Reykjavík, Tokyo, Sydney etc.) absolutely inside the orbit at the 6 cardinal/inter-cardinal positions — each label counter-rotates transform:rotate(--p * 360deg) so the text stays upright as it orbits. Above the globe: a small uppercase eyebrow + display headline. Below: stats row (regions / edge nodes / uptime).