CSS @property counter animation that counts up from zero to target values without JavaScript. Uses @keyframes with CSS custom properties typed as integers. Each counter has a value, label, optional prefix/suffix, and color.
| Surface | Note |
|---|---|
| Renders as static final values; no animation | |
| google-meet-stage | Animation plays; @property support varies by browser version |
| Field | Type | |
|---|---|---|
| counters | array of objects with — value (integer), label, prefix, suffix, color (optional hex). | optional |
| duration | number. Animation duration in seconds. Default 2. | optional |
{
"type": "animated_counter"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:animated_counter",
"displayName": "Animated Counter",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/animated_counter",
"capabilities": [
"web",
"google-apps-script-web",
"mcp-apps"
],
"description": "CSS @property counter animation that counts up from zero to target values without JavaScript. Uses @keyframes with CSS custom properties typed as integers. Each counter has a value, label, optional prefix/suffix, and color.",
"representativeQueries": [
"show a CSS-only animated counter that counts up to target values",
"css @property counter animation that counts up from zero to target values without javascript. uses @",
"render a animated counter"
]
}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