Blocks that enter one after another: a stagger, set once. Every child gets the same entrance (effect, ease, duration) offset by stagger milliseconds, on load or when scrolled into view. The general-purpose alternative to hand-setting a delay on each block; for a single block use the `enter` prop that any atom accepts.
| Surface | Note |
|---|---|
| Prints the final state, without motion | |
| google-chat | Inline style animation is not supported; blocks appear without motion |
Example content.
| Field | Type | Required |
|---|---|---|
| blocks | array (max 40) of any atom blocks. | required |
| effect | "fade" | "rise" | "drop" | "slide-left" | "slide-right" | "scale" | "blur" | "wipe" | "pop" (optional, default "rise") | optional |
| ease | string | [x1,y1,x2,y2]. A token from motion_tokens, or four numbers. Default depends on the effect (expo-out for most). | optional |
| duration | integer | "instant" | "quick" | "base" | "slow" | "cinematic". Milliseconds 0-8000 or a duration token. Default 560. | optional |
| delay | integer. Milliseconds before the first child, 0-20000. Default 0. | optional |
| stagger | integer. Milliseconds between children, 0-1000. Default 80. | optional |
| on | "load" | "view" (optional, default "load"). "view" waits until the group is scrolled into view; without JavaScript it simply shows. | optional |
{
"type": "motion_group",
"blocks": [
{
"type": "body",
"text": "Example content."
}
]
}{
"identifier": "urn:air:a2uicatalog.ai:atom:motion_group",
"displayName": "Motion Group",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/motion_group",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Blocks that enter one after another: a stagger, set once. Every child gets the same entrance (effect, ease, duration) offset by stagger milliseconds, on load or when scrolled into view. The general-purpose alternative to hand-setting a delay on each block; for a single block use the `enter` prop that any atom accepts.",
"representativeQueries": [
"show a staggered entrance for a list of blocks, with tokenised easing",
"blocks that enter one after another: a stagger, set once. every child gets the same entrance (effect",
"render a motion group"
]
}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