Motion Layer

A scene. Children are any atoms, placed in percent of THIS layer (place {x, y, w, h, z, origin}, id, exactly as inside a motion_timeline), and the whole layer moves as one: give the layer an id and fade, slide, scale or blur it with opacity, x, y, scale and blur tracks to cut between scenes. Use it inside a motion_timeline; a layer with no place fills the stage. Layers are what make a piece with several scenes cheap to author: one id per scene instead of one track per element.

Surfaces

webgoogle-meet-stagegoogle-apps-script-webmcp-appsandroid

Degraded on

Surface	Note
pdf	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

Live preview

Example content.

Fields

Field	Type	Required
blocks	array (max 24) of any atom blocks. Each may carry id (^[a-z][a-z0-9_-]{0,31}$), place {x, y, w, h, z, origin}. Ids must be unique across the whole timeline.	required

Example payload

{
  "type": "motion_layer",
  "blocks": [
    {
      "type": "body",
      "text": "Example content."
    }
  ]
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:motion_layer",
  "displayName": "Motion Layer",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/motion_layer",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps",
    "android"
  ],
  "description": "A scene. Children are any atoms, placed in percent of THIS layer (place {x, y, w, h, z, origin}, id, exactly as inside a motion_timeline), and the whole layer moves as one: give the layer an id and fade, slide, scale or blur it with opacity, x, y, scale and blur tracks to cut between scenes. Use it inside a motion_timeline; a layer with no place fills the stage. Layers are what make a piece with several scenes cheap to author: one id per scene instead of one track per element.",
  "representativeQueries": [
    "show a scene container for a motion_timeline: children placed in percent of the layer, animated as one",
    "a scene. children are any atoms, placed in percent of this layer (place {x, y, w, h, z, origin}, id,",
    "render a motion layer"
  ]
}

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