Reveals its child blocks through a shape that grows as p goes 0 to 1: a wobbly blob, a circle, a diagonal wipe, a rounded rectangle that opens, venetian bars, a diamond, a halftone dot grid, a conic sweep, or horizontal slats. The scene that opens out of a cloud-shaped hole, or the screenshot that wipes in. The blob and circle are 20-vertex polygons whose coordinates use CSS cos() and sin(), so they need no script and a current browser. At p = 1 the child is fully visible; standalone it renders fully revealed.
| 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 |
Example content.
| Field | Type | Required |
|---|---|---|
| shape | "blob" | "circle" | "diagonal" | "rounded" | "bars" | "diamond" | "halftone" | "conic" | "slats" | "path" (optional, default "blob") | optional |
| d | string (optional, max 4000 characters; used only when shape is "path"). An SVG path of straight and curve commands (M L H V C S Q T Z, absolute or relative; no arcs A, no exponent numbers, numbers up to 1000000). Only the first subpath is used. It is flattened, resampled to 48 points and stretched to fill the box, then scales in from the centre as p goes 0 to 1 (a 48-vertex clip polygon, pure CSS); at p = 1 the child shows through the whole shape. A missing or invalid d, or one that covers less than 1% of the box (a straight line), is ignored with an HTML comment and the blob is used. Absent: unchanged. | optional |
| blocks | array (max 6) of any atom blocks, revealed together. Each may carry an id a timeline track can address. | required |
{
"type": "motion_mask",
"blocks": [
{
"type": "body",
"text": "Example content."
}
]
}{
"identifier": "urn:air:a2uicatalog.ai:atom:motion_mask",
"displayName": "Motion Mask",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/motion_mask",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Reveals its child blocks through a shape that grows as p goes 0 to 1: a wobbly blob, a circle, a diagonal wipe, a rounded rectangle that opens, venetian bars, a diamond, a halftone dot grid, a conic sweep, or horizontal slats. The scene that opens out of a cloud-shaped hole, or the screenshot that wipes in. The blob and circle are 20-vertex polygons whose coordinates use CSS cos() and sin(), so they need no script and a current browser. At p = 1 the child is fully visible; standalone it renders fully revealed.",
"representativeQueries": [
"show a reveals child atoms through a growing blob, circle, diagonal wipe, rounded rectangle, bars, diamond, halftone, conic sweep or slats",
"reveals its child blocks through a shape that grows as p goes 0 to 1: a wobbly blob, a circle, a dia",
"render a motion mask"
]
}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