Motion Mark

The catalogue's own mark (three tilted ellipses around a nucleus, one electron) that draws itself as p goes 0 to 1 and whose electron circles its orbit as step goes 0 to 1. The opening frame of a film or a brand sting. Geometry is the site logo's; the two colours are fields. Plain SVG and CSS, no script: it moves with the --p and --s custom properties a motion_timeline p and step track set, and standalone it renders the finished mark.

Surfaces
webgoogle-meet-stagegoogle-apps-script-webmcp-appsandroid
Degraded on
SurfaceNote
pdfPrints the final state (type fully revealed, numbers at their values, shapes drawn); no motion
google-chatInline CSS functions and custom properties are not supported
Live preview
Fields
FieldTypeRequired
sizeinteger. Width and height px, 24-600. Default 120.optional
accent"#rrggbb". Two ellipses and the nucleus. Default the stage accent.optional
accent2"#rrggbb". The third ellipse and the electron. Default "#00b7c3".optional
Example payload
{
  "type": "motion_mark"
}
ARD catalog entry
{
  "identifier": "urn:air:a2uicatalog.ai:atom:motion_mark",
  "displayName": "Motion Mark",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/motion_mark",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps",
    "android"
  ],
  "description": "The catalogue's own mark (three tilted ellipses around a nucleus, one electron) that draws itself as p goes 0 to 1 and whose electron circles its orbit as step goes 0 to 1. The opening frame of a film or a brand sting. Geometry is the site logo's; the two colours are fields. Plain SVG and CSS, no script: it moves with the --p and --s custom properties a motion_timeline p and step track set, and standalone it renders the finished mark.",
  "representativeQueries": [
    "show a the A2UI Catalog logo mark that draws itself and sends an electron round its orbit",
    "the catalogue's own mark (three tilted ellipses around a nucleus, one electron) that draws itself as",
    "render a motion mark"
  ]
}
← 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 →