Motion Envelope

An envelope that carries a letter. Children are ordinary atoms shown on the letter card. With mode open, the flap flips up and the letter rises out as p goes 0 to 1; with mode seal, the letter drops in, the flap closes and the stamp lands. Optional address line (to) and stamp text. Plain HTML and CSS, no script; standalone it renders the finished state (open: letter out; seal: sealed and stamped). Use inside a motion_timeline to show a message being packed or delivered, e.g. an A2UI payload wrapped as an MCP tool result.

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

Example content.

Fields
FieldTypeRequired
mode"open" | "seal" (optional, default "open")optional
widthinteger. Envelope width px, 80-900; height is 5/8 of it. Default 360.optional
blocksarray (max 3) of atom blocks shown on the letter. They render finished (they do not follow the envelope's p).required
tostring (optional, max 60). Address line on the front, e.g. "ui://jobs/board".optional
stampstring (optional, max 24). Stamp text, e.g. "tool result". In seal mode it lands at the end.optional
labelstring (optional, max 40). Accessible name. Default "Envelope".optional
fill"#rrggbb". Envelope colour. Default a tint of the stage background.optional
accent"#rrggbb". Fold edges and stamp. Default the stage accent.optional
color"#rrggbb". Address text. Default the stage ink.optional
Example payload
{
  "type": "motion_envelope",
  "blocks": [
    {
      "type": "body",
      "text": "Example content."
    }
  ]
}
ARD catalog entry
{
  "identifier": "urn:air:a2uicatalog.ai:atom:motion_envelope",
  "displayName": "Motion Envelope",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/motion_envelope",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps",
    "android"
  ],
  "description": "An envelope that carries a letter. Children are ordinary atoms shown on the letter card. With mode open, the flap flips up and the letter rises out as p goes 0 to 1; with mode seal, the letter drops in, the flap closes and the stamp lands. Optional address line (to) and stamp text. Plain HTML and CSS, no script; standalone it renders the finished state (open: letter out; seal: sealed and stamped). Use inside a motion_timeline to show a message being packed or delivered, e.g. an A2UI payload wrapped as an MCP tool result.",
  "representativeQueries": [
    "show a envelope that opens to reveal (or seals in) a letter of atoms, with address and stamp",
    "an envelope that carries a letter. children are ordinary atoms shown on the letter card. with mode o",
    "render a motion envelope"
  ]
}
← 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 →