A system map that moves: up to three tilted orbit rings around a centre node, where each ring is a TIER of agent-supplied labelled items (for example tools / data / surfaces) and every item is a satellite with a light trail and its own label. Inner rings turn faster than outer ones, satellites are larger and brighter on the near side of their ring and dimmer behind the centre, and each ring carries its tier name, so the rings encode structure rather than decoration. The pointer tilts and turns the whole view. This is the hero-class sibling of the single-ring orbit_diagram; orbit_mark remains the fixed brand logo. Optional eyebrow/title/body copy sits behind a readability veil. Honours prefers-reduced-motion (one still frame, no loop), pauses when scrolled offscreen, DPR-aware. Pure canvas + requestAnimationFrame, zero dependencies, on the same shared kit as flow_field. Every option is an enum or a clamped integer and colours must be #rrggbb; agent-supplied labels are trimmed, length-capped and JSON-encoded with "<" escaped, so they can never break out of the script. Dark backgrounds only.
| Surface | Note |
|---|---|
| Renders as a plain dark panel with the overlaid copy; the canvas is empty without JavaScript | |
| google-chat | Inline script not supported; renders as a solid dark panel with the copy |
| Field | Type | Required |
|---|---|---|
| center | string. Label under the centre node, trimmed to 24 characters. Default "agent". | optional |
| rings | array of 1-3 {label, items} objects. Each ring is a tier: label is the tier name (up to 24 characters), items is an array of 1-6 strings (up to 24 characters each) orbiting on that ring. Entries that are not objects, and items that are not strings, are dropped. Default three rings: tools, data, surfaces. | optional |
| title | string. Headline overlaid opposite the rings. | optional |
| eyebrow | string. Small uppercase label above the title, tinted with the first palette colour. | optional |
| body | string. Supporting copy under the title (markdown inline supported). | optional |
| align | "left" | "center" | "right" (optional, default "left"). Where the overlaid copy sits; the veil that keeps it readable follows it. | optional |
| position | "right" | "center" | "left" (optional, default "right"). Where the rings sit; put them opposite the copy. | optional |
| colors | array of 1-4 "#rrggbb" strings. Default ["#38bdf8","#818cf8","#f472b6"]. Ring i takes colour i (cycling); the first colour also tints the centre node. Invalid entries are dropped. | optional |
| background | "#rrggbb". Default "#070a12". Keep it dark. | optional |
| speed | "slow" | "normal" | "fast" (optional, default "normal") | optional |
| height | integer. Panel height in px, clamped 240-900. Default 420. | optional |
| interactive | bool. Pointer tilts and turns the view. Default true. | optional |
{
"type": "orbit_rings"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:orbit_rings",
"displayName": "Orbit Rings",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/orbit_rings",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "A system map that moves: up to three tilted orbit rings around a centre node, where each ring is a TIER of agent-supplied labelled items (for example tools / data / surfaces) and every item is a satellite with a light trail and its own label. Inner rings turn faster than outer ones, satellites are larger and brighter on the near side of their ring and dimmer behind the centre, and each ring carries its tier name, so the rings encode structure rather than decoration. The pointer tilts and turns the whole view. This is the hero-class sibling of the single-ring orbit_diagram; orbit_mark remains the fixed brand logo. Optional eyebrow/title/body copy sits behind a readability veil. Honours prefers-reduced-motion (one still frame, no loop), pauses when scrolled offscreen, DPR-aware. Pure canvas + requestAnimationFrame, zero dependencies, on the same shared kit as flow_field. Every option is an enum or a clamped integer and colours must be #rrggbb; agent-supplied labels are trimmed, length-capped and JSON-encoded with \"<\" escaped, so they can never break out of the script. Dark backgrounds only.",
"representativeQueries": [
"show a tilted orbit rings, each a tier of labelled satellites around a centre node",
"a system map that moves: up to three tilted orbit rings around a centre node, where each ring is a t",
"render a orbit rings"
]
}The renderer is an open-source Google Apps Script web app. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy