A globe you can put on the page

A still PNG of the earth is a diagram. You glance, you get “world,” you scroll on.

A globe that turns while you read is different. The page is doing something. You can drag it. The piece feels located, not typed into a blank CMS field. That is what this component is for: richer presence without a third-party embed, a mapping product, or a new content type.

It is the same globe that sits behind the first screen of the homepage. Four files. One line in layout.aup. Below, three ways it can sit in the article itself.

In the column: figure

Use this when the globe is part of the argument: a network, a team, a route, “we work in these cities.” It lives in the reading width. You can drag it.

variant=figure · preset=cities · drag

component figure slot=cobe-figure component=globe
    variant=figure
    size=360
    preset=cities

A stage: scene

Larger, still in the flow. A section that is the globe, then the copy continues. Useful on a lab, a product page, or a pause in a long essay.

variant=scene · preset=cities

component scene slot=cobe-scene component=globe
    variant=scene
    size=480
    preset=cities

Behind the copy: backdrop

The homepage look. The globe is weather behind a sentence, not an object you have to deal with. Pointer events are off. Below 760px it stays off, except on the homepage slot #xy-globe, because a full-viewport WebGL loop is a tax on a phone.

component globe slot=xy-globe component=globe
    variant=backdrop
    effect=builders

See it live on /en/. The globe lab puts figure and scene on a blank stage.

Named looks, same component

Markers and arcs are optional. Named effect values (builders, users, ai, chain) change which cities light up without rewriting lat/lon. A live page can dispatch site-globe:effect with { effect: "users" } and every mounted globe updates.

This one is effect=builders (San Francisco, Tokyo, Berlin, Shanghai, with arcs). Drag it.

variant=figure · effect=builders

Props, events, and failure cases: globe component doc. Copy from there.

One name collision: AUP already has a globe primitive on decks. That path renders aup-globe-shell, a map-shaped shell, not this canvas. Markdown ::globe is not this component. This one is component=globe in a layout, or the same markup the renderer emits (as on this page).

What it will not do

It will not color countries from a spreadsheet. It is not GIS. prefers-reduced-motion stops the spin. Missing WebGL leaves an empty square; the rest of the page still reads.

If the job is a choropleth, pick another tool. If the job is to make a page feel like it has a place in the world, this is the component.