Strokes that draw themselves one after another as p goes 0 to 1, like an agent sketching: each stroke is path data (M, L, H, V, C, S, Q, T, A, Z with numbers; anything else and the stroke is dropped), drawn in a chosen colour and width, optionally with a soft fill that appears as it is drawn. Not raw SVG markup, so nothing but a path can reach the page. Sized by a viewBox (w by h, default 400 by 400) and scaled 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 the finished drawing.
| 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 |
|---|---|---|
| strokes | array (max 24) of {d, color?, width?, fill?, fill_opacity?}. d is path data (max 700 characters of path commands, numbers and separators). color and fill are "#rrggbb"; width 1-24 px (default 6); fill_opacity 0-1 (default 0.2). Strokes draw in order. | required |
| w | integer. ViewBox width, 50-2000. Default 400. | optional |
| h | integer. ViewBox height, 50-2000. Default 400. | optional |
| label | string (optional, max 60). Accessible name of the drawing. Default "Sketch". | optional |
| trim | object {start, end, offset}, like After Effects trim paths. start and end are 0-1 of each stroke's length (defaults 0 and 1) and bound the part that is drawn; offset -1 to 1 shifts the window along the stroke (a window pushed past the end wraps round to the start). The window draws on as p goes 0 to 1 (from start to end). end at or below start draws no stroke. Absent, empty or all defaults: the full stroke, unchanged. | optional |
{
"type": "motion_sketch"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:motion_sketch",
"displayName": "Motion Sketch",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/motion_sketch",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Strokes that draw themselves one after another as p goes 0 to 1, like an agent sketching: each stroke is path data (M, L, H, V, C, S, Q, T, A, Z with numbers; anything else and the stroke is dropped), drawn in a chosen colour and width, optionally with a soft fill that appears as it is drawn. Not raw SVG markup, so nothing but a path can reach the page. Sized by a viewBox (w by h, default 400 by 400) and scaled 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 the finished drawing.",
"representativeQueries": [
"show a strokes that draw themselves in turn, like an agent sketching",
"strokes that draw themselves one after another as p goes 0 to 1, like an agent sketching: each strok",
"render a motion sketch"
]
}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