一个可以放在页面上的地球

一张地球的静帧 PNG 是示意图。看一眼，知道「世界」，继续往下滚。

读着字、地球还在转，是另一件事。页面在做一件事。你可以拖它。文章像落在某个地方，而不像打进 CMS 空白栏里的字。这个组件就是干这个的：让页面更有在场感，不必接第三方嵌入、不必上地图产品、也不必新发明一种内容类型。

它和首页第一屏背后用的是同一个 globe。四个文件。layout.aup 里一行。下面三种坐法，都在这篇文章的阅读栏里。

栏内：figure

地球本身是论证的一部分时用：一张网络、一队人、一条航线、「我们在这些城市工作」。它待在阅读宽度里。可以拖。

variant=figure · preset=cities · 可拖

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

舞台：scene

更大，仍在文档流里。这一段就是地球，然后正文继续。适合 lab、产品页，或长文里需要停一下的地方。

variant=scene · preset=cities

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

衬在字后面：backdrop

首页那种。地球是句子后面的天气，不是你必须对付的物件。不吃指针。760px 以下默认不跑（首页 #xy-globe 除外），因为整屏 WebGL 循环对手机是税。

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

现场看 /zh/。globe lab 把 figure 和 scene 放在空白舞台上。

具名 look，还是这一个组件

marker 和 arc 可选。具名 effect（builders、users、ai、chain）换亮哪些城市，不必重写经纬度。运行中的页面可以派发 site-globe:effect，带 { effect: "users" }，已挂上的地球一起换。

下面这颗是 effect=builders（旧金山、东京、柏林、上海，带弧）。可以拖。

variant=figure · effect=builders

props、事件和失败情形：globe 组件文档。从那里抄。

有一个容易混的名字：AUP 里已经有一个 globe primitive，用在 deck 上，渲染出来是 aup-globe-shell，那是地图壳，不是这块 canvas。Markdown 里的 ::globe 也不是这个组件。这个只出现在 layout 里的 component=globe，或渲染器吐出的同一套 markup（本页这样）。

它不会做什么

它不会按表格给国家上色。它不是 GIS。prefers-reduced-motion 会停掉自转。没有 WebGL 时剩下一个空方块，正文照常读。

若任务是分级设色地图，换工具。若任务是让一页读起来像在世界上有个位置，用这个组件。