The catalogue browser, as a shot: a search box that types its query, filter chips with a count, and a grid of cards that rise in, each holding a LIVE render of a real atom (give the atom block as the card's preview) with its name, description, surface badge and source. One card can be picked: it lifts and takes an accent outline as step goes 0 to 1. p 0 to 0.3 types the query, p 0.3 to 1 brings the cards in. Use it to show a library of components honestly, with real names, real descriptions and real renders, instead of a mock-up. Plain HTML and CSS, no script; standalone it renders the finished screen.
| 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 |
|---|---|---|
| query | string (optional, max 16). Typed into the search box as p goes 0 to 0.3. | optional |
| placeholder | string (optional, max 24). Shown before typing starts. Default "Search atoms...". | optional |
| chips | array (max 6) of string (max 24). The first is drawn active. | required |
| count | string (optional, max 16). For example "51 atoms". | optional |
| cards | array (max 6) of {title (max 28), text (max 90), badge? (max 16), source? (max 20), preview? (an atom block, rendered live)}. | required |
| columns | integer. 2-4. Default 3. | optional |
| pick | integer. Index of the card to lift and outline as step goes 0 to 1, -1 for none. Default -1. | optional |
| size | integer. Base font px, 8-40. Default 16. | optional |
| well | "#rrggbb". Background of the preview area of each card. Real atoms are drawn for their own surfaces and some hard-code dark text, so on a dark stage give them a light well. Default none. | optional |
| accent | "#rrggbb". Search border, active chip, picked card. Default the stage accent. | optional |
{
"type": "motion_browser",
"chips": [],
"cards": [
{
"title": "Card 1",
"body": "First card content."
},
{
"title": "Card 2",
"body": "Second card content."
}
]
}{
"identifier": "urn:air:a2uicatalog.ai:atom:motion_browser",
"displayName": "Motion Browser",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/motion_browser",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "The catalogue browser, as a shot: a search box that types its query, filter chips with a count, and a grid of cards that rise in, each holding a LIVE render of a real atom (give the atom block as the card's preview) with its name, description, surface badge and source. One card can be picked: it lifts and takes an accent outline as step goes 0 to 1. p 0 to 0.3 types the query, p 0.3 to 1 brings the cards in. Use it to show a library of components honestly, with real names, real descriptions and real renders, instead of a mock-up. Plain HTML and CSS, no script; standalone it renders the finished screen.",
"representativeQueries": [
"show a search box, filter chips and a grid of cards with live atom previews that types and rises in",
"the catalogue browser, as a shot: a search box that types its query, filter chips with a count, and",
"render a motion browser"
]
}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