site `globe` | ArcBlock

Web Device layout component (this site) — not an AUP primitive; not an AUP Web-only widget; not a Markdown directive.

Site package: blocklets/arcblock/.web/components/globe/. Resolution: site override > theme default.

This site ships the package today. The same four files are being added to the ARC default theme (providers/runtime/web-device/themes/default/components/globe/, ArcBlock/arc#5329). Until this site runs an arc that includes that theme package, treat the site copy as the source of truth. Site tracking: #464.

Purpose

Minimal COBE WebGL globe. Use it as an inline figure, a large scene, or a backdrop behind other layout sections.

A still PNG of the earth is a diagram. A globe that turns (and that the reader can drag) gives the page a location and a reason to stay. Homepage backdrop, product page, or a figure between paragraphs of an essay: same component.

Live

Figure and scene on a blank stage (this site's lab):

In-article figures, scene, and a named look: showcase article. Homepage backdrop: /en/.

Not this component

Thing	Why it is different
AUP primitive `globe` (decks)	Renders `aup-globe-shell`. Map-shaped shell, not COBE.
Markdown `::globe`	Generic / unknown document type. Does not load this package.
GIS / choropleth	This component draws land dots, optional markers, optional arcs. It does not color regions from a table.

Author entry is only component=globe in layout.aup (or a named layout under layouts/).

When to use

Homepage or landing backdrop behind a sentence: the page feels placed, not typed into a blank field.
A figure in an article when the piece is about a network, a team, or a route. Drag is on.
A named look (builders, users, ai, chain) that a script can change live without swapping images.

When not to use

You need a real map (tiles, labels, region fill).
Markdown ::globe is the AUP deck primitive, not this component. For in-body demos, mount component=globe once in the page layout (loads script + CSS), then emit the same markup render.js emits. See the showcase article source.
You are targeting only phones with variant=backdrop: the script skips backdrop below 760px except on #xy-globe (the homepage slot).

Author entry

layout.aup

Minimal backdrop (homepage pattern)

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

Figure or scene (lab / article pattern)

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

Live hosts on this site:

Homepage: /en/ (variant=backdrop effect=builders)
Lab: /en/globe-lab/
Showcase article: /en/articles/globe-on-the-page/

Props

From manifest.json. Invented names are not portable.

Prop	Type	Default	Role
`variant`	string	`figure`	`figure` (inline, drag on) · `scene` (large stage) · `backdrop` (behind copy, drag off)
`size`	number	figure 360 · scene 560 · backdrop 720	CSS pixel size of the square canvas
`theme`	string	`auto`	`auto` follows `html[data-mode]` · `light` · `dark`
`rotate`	string/boolean	`true`	Auto-rotate. Forced off when `prefers-reduced-motion: reduce`
`speed`	number	`0.0025` (script look uses `0.0026`)	Rotation increment per frame
`theta`	number	`0.22`	Vertical tilt, radians
`scale`	number	`1`	Globe scale
`samples`	number	`16000`	Land-dot density
`drag`	string/boolean	`true` for figure, `false` for backdrop	Pointer-drag to rotate
`effect`	string	empty → `builders` look if nothing else set	Named look: `builders` · `users` · `ai` · `chain` · `cjk` · `already` (aliases: `late`, `new-year`, `year-end`)
`preset`	string	empty	Marker preset: `cities`
`markers`	array	`[]`	`[{ lat, lon, size? }]` or `{ location: [lat, lon], size? }`. `size` is relative to globe radius
`arcs`	array	`[]`	`[{ from: [lat, lon], to: [lat, lon] }]` or `{ fromLat, fromLon, toLat, toLon }`

String forms also parse: JSON text, or lat,lon,size;lat,lon,size for markers.

Marker/arc props override the named effect / preset when non-empty.

Live update

Dispatch on document:

document.dispatchEvent(new CustomEvent("site-globe:effect", { detail: { effect: "users" } }));

Every .site-globe on the page that exposed __globeSetEffect switches look. Use this from other page scripts. Do not poke canvas uniforms yourself.

Surfaces

layout. Not the document Markdown directive surface.

Public status

released on this site (homepage, lab, showcase article). Theme promotion is in progress in ArcBlock/arc; do not document the theme package as already shipping in the arc binary this site currently runs.

Fallback

Situation	Result
No WebGL	Empty square; page copy still reads
`prefers-reduced-motion: reduce`	No auto-rotate, no drag
`variant=backdrop` and width ≤ 760, not `#xy-globe`	Script does not bind
Missing markers and no preset/effect	`builders` look

Sample honesty

Live lab is embedded above. Homepage and the showcase article are the other running hosts. Copy AUP from the fences on this page; do not invent props.

Evidence

Item	Path
Site package	`blocklets/arcblock/.web/components/globe/`
Manifest	`…/globe/manifest.json`
Renderer	`…/globe/render.js`
Script	`…/globe/script.js` (COBE 2.0.1, MIT, Shu Ding)
Style	`…/globe/style.css`
Homepage mount	`pages/index/layout.aup` · `#xy-globe`
Lab	`pages/globe-lab/layout.aup`
Article layout	`layouts/globe-on-the-page.aup`
Internal matrix	`docs/aup/capability-matrix.md` §5

Notes

Class names are site-globe / site-globe-canvas (historical). Select those, not aup-globe-shell.
Accent color for markers/arcs comes from --color-accent.
Dark mode reads html[data-mode="dark"].