Animated Border

Card or section with a rotating conic gradient border. Child blocks or content inside.

Surfaces

webgoogle-meet-stagegoogle-apps-script-webgoogle-apps-script-side-panelmcp-apps

Live preview

A rotating conic-gradient border — pure CSS, no JS, three colour stops.

Templates (1 componentId in blocks)

Fields

Field	Type
blocks	array of child atoms inside	required
content	markdown string (if no blocks)	required
from	gradient start colour (default	required
to	gradient end colour (default	required
via	gradient mid colour (default	required
speed	rotation speed in seconds (default 3)	required
padding	inner padding (default 20px)	required
radius	border radius (default 12px)	required

Example payload

{
  "type": "animated_border",
  "blocks": [
    {
      "type": "body",
      "text": "Example content."
    }
  ],
  "content": "A concise description of the content."
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:animated_border",
  "displayName": "Animated Border",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/animated_border",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "google-apps-script-side-panel",
    "mcp-apps"
  ],
  "description": "Card or section with a rotating conic gradient border. Child blocks or content inside.",
  "representativeQueries": [
    "show a card with rotating gradient border",
    "card or section with a rotating conic gradient border. child blocks or content inside.",
    "render a animated border"
  ]
}

← 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 →