The A2UI pitch, drawn: small packets stream from an agent node on the left down curved lanes into a surface node on the right, leaving light trails; every arrival makes the surface flash and unfolds a small card outline inside it, the newest on top, older ones fading. Labels for both nodes are agent-supplied (up to 24 characters each). Optional eyebrow/title/body copy. Honours prefers-reduced-motion (one pre-simulated frame with packets mid-flight), pauses offscreen, DPR-aware. Dark backgrounds only. Every option is an enum or a clamped int; colours must be #rrggbb.
| Surface | Note |
|---|---|
| Renders as a plain panel with the copy; the canvas is empty without JavaScript | |
| google-chat | Inline script not supported; renders as a solid panel with the copy |
| Field | Type | Required |
|---|---|---|
| from_label | string. Label under the left node. Default "agent". | optional |
| to_label | string. Label under the right node. Default "surface". | optional |
| lanes | integer. Number of lanes, clamped 1-6. Default 4. | optional |
| rate | "slow" | "normal" | "fast" (optional, default "normal"). Packet speed. | optional |
| title | string. Headline overlaid on the scene. | optional |
| eyebrow | string. Small uppercase label above the title. | optional |
| body | string. Copy under the title (markdown inline supported). | optional |
| align | "left" | "center" | "right" (optional, default "center") | optional |
| colors | array of 1-4 "#rrggbb" strings. Default sky/violet/pink; the first colours the agent node, the second the surface. | optional |
| background | "#rrggbb". Default "#070a12". Keep it dark. | optional |
| height | integer. Panel height in px, clamped 200-900. Default 320. | optional |
{
"type": "message_lanes"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:message_lanes",
"displayName": "Message Lanes",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/message_lanes",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "The A2UI pitch, drawn: small packets stream from an agent node on the left down curved lanes into a surface node on the right, leaving light trails; every arrival makes the surface flash and unfolds a small card outline inside it, the newest on top, older ones fading. Labels for both nodes are agent-supplied (up to 24 characters each). Optional eyebrow/title/body copy. Honours prefers-reduced-motion (one pre-simulated frame with packets mid-flight), pauses offscreen, DPR-aware. Dark backgrounds only. Every option is an enum or a clamped int; colours must be #rrggbb.",
"representativeQueries": [
"show a packets streaming from an agent node into a surface node that unfolds cards on arrival",
"the a2ui pitch, drawn: small packets stream from an agent node on the left down curved lanes into a",
"render a message lanes"
]
}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