A callout line that draws itself from one point to another as p goes 0 to 1: straight or bent, with a start dot, an arrowhead that lands at the end, and a label that fades in beside the tip. The annotation that points at a part of a diagram, a map or a product shot. Points are in viewBox units (w by h, default 400 by 300) and the whole thing scales to its placed box. Plain SVG and CSS, no script: it moves with the --p custom property a motion_timeline p track sets, and standalone it renders finished.
| Surface | Note |
|---|---|
| Prints the final state (type fully revealed, numbers at their values, shapes drawn); no motion | |
| google-chat | Inline CSS functions and custom properties are not supported |
| Field | Type | Required |
|---|---|---|
| from | [x, y]. Start point in viewBox units. Default [48, 210] on the default 400 by 300 box. | optional |
| to | [x, y]. End point, where the arrowhead lands. Default [352, 90]. | optional |
| curve | integer. Bend, -100 to 100, as a percentage of the line length at its middle. 0 is straight. Default 0. | optional |
| label | string (optional, max 40). Text beside the tip. | optional |
| label_at | "end" | "start" (optional, default "end") | optional |
| arrow | bool. Arrowhead. Default true. | optional |
| dot | bool. Dot at the start. Default true. | optional |
| color | "#rrggbb". Line, dot and arrowhead. Default the stage accent. | optional |
| label_color | "#rrggbb". Default the stage ink. | optional |
| width | integer. Line px, 1-24. Default 4. | optional |
| size | integer. Label px, 8-80. Default 22. | optional |
| w | integer. ViewBox width, 50-2000. Default 400. | optional |
| h | integer. ViewBox height, 50-2000. Default 300. | optional |
{
"type": "motion_leader"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:motion_leader",
"displayName": "Motion Leader",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/motion_leader",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "A callout line that draws itself from one point to another as p goes 0 to 1: straight or bent, with a start dot, an arrowhead that lands at the end, and a label that fades in beside the tip. The annotation that points at a part of a diagram, a map or a product shot. Points are in viewBox units (w by h, default 400 by 300) and the whole thing scales to its placed box. Plain SVG and CSS, no script: it moves with the --p custom property a motion_timeline p track sets, and standalone it renders finished.",
"representativeQueries": [
"show a callout line with a start dot, arrowhead and label that draws itself",
"a callout line that draws itself from one point to another as p goes 0 to 1: straight or bent, with",
"render a motion leader"
]
}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