Motion Checklist

A card of items that tick off one after another as p goes 0 to 1: each row brightens and slides in while its check pops, with optional empty placeholder rows under the real ones (the "recipe" card: your knowledge, your process, your automations). Plain HTML and CSS, no script: it moves with the --p custom property a motion_timeline p track sets, and standalone it renders every item ticked.

Surfaces

webgoogle-meet-stagegoogle-apps-script-webmcp-appsandroid

Degraded on

Surface	Note
pdf	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

Live preview

Item

Fields

Field	Type	Required
title	string (optional, max 40).	optional
items	array (max 6) of string or {text, icon?} (text max 40, icon max 2 characters). Default one item "Item".	required
skeleton	integer. Empty placeholder rows under the items, 0-4. Default 0.	optional
size	integer. Font size px, 10-80. Default 26.	optional
accent	"#rrggbb". Colour of the ticks. Default the stage accent.	optional

Example payload

{
  "type": "motion_checklist"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:motion_checklist",
  "displayName": "Motion Checklist",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/motion_checklist",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps",
    "android"
  ],
  "description": "A card of items that tick off one after another as p goes 0 to 1: each row brightens and slides in while its check pops, with optional empty placeholder rows under the real ones (the \"recipe\" card: your knowledge, your process, your automations). Plain HTML and CSS, no script: it moves with the --p custom property a motion_timeline p track sets, and standalone it renders every item ticked.",
  "representativeQueries": [
    "show a card whose items tick off in turn as progress advances",
    "a card of items that tick off one after another as p goes 0 to 1: each row brightens and slides in w",
    "render a motion checklist"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

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

Full deploy guide →