Motion Tokens

The catalogue's motion vocabulary, drawn: every named easing curve with a dot riding it, the cubic-bezier it stands for and what it is for, the five duration tokens, and the nine entrance effects. The same names are accepted by the `enter` prop on any atom, by motion_group, by reveal, and by every ease field in motion_timeline, so an agent learns the vocabulary once. Honours prefers-reduced-motion (dots stay still).

Surfaces

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

Degraded on

Surface	Note
pdf	Prints the table without the moving dots
google-chat	Inline style animation is not supported; shows the table only

Live preview

motion tokens

expo-out

cubic-bezier(0.16,1,0.3,1) · arrivals: fast launch, long soft landing

quint-out

cubic-bezier(0.22,1,0.36,1) · settling UI: a touch gentler than expo-out

decelerate

cubic-bezier(0,0,0.2,1) · elements entering from off-screen

standard

cubic-bezier(0.4,0,0.2,1) · on-screen moves: cursor glides, reflows

emphasized

cubic-bezier(0.2,0,0,1) · the one hero move on a scene

quart-in-out

cubic-bezier(0.76,0,0.24,1) · camera moves and wipes

expo-in-out

cubic-bezier(0.87,0,0.13,1) · big symmetric transitions

accelerate

cubic-bezier(0.4,0,1,1) · exits: leaving the stage

overshoot

cubic-bezier(0.34,1.56,0.64,1) · playful landings (use once, sparingly)

anticipate

cubic-bezier(0.68,-0.55,0.27,1.55) · wind-up before a move (use once)

ease

cubic-bezier(0.25,0.1,0.25,1) · CSS default

ease-in

cubic-bezier(0.42,0,1,1) · CSS ease-in

ease-out

cubic-bezier(0,0,0.58,1) · CSS ease-out

ease-in-out

cubic-bezier(0.42,0,0.58,1) · CSS ease-in-out

linear

cubic-bezier(0,0,1,1) · progress bars and loops only

instant

120ms

quick

240ms

base

400ms

slow

640ms

cinematic

1000ms

enter effects: fade · rise · drop · slide-left · slide-right · scale · blur · wipe · pop

Fields

Field	Type	Required
show	"ease" \| "duration" \| "both" (optional, default "both")	optional
theme	"dark" \| "light" (optional, default "dark")	optional
accent	"#rrggbb". Default "#38bdf8".	optional

Example payload

{
  "type": "motion_tokens"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:motion_tokens",
  "displayName": "Motion Tokens",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/motion_tokens",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps",
    "android"
  ],
  "description": "The catalogue's motion vocabulary, drawn: every named easing curve with a dot riding it, the cubic-bezier it stands for and what it is for, the five duration tokens, and the nine entrance effects. The same names are accepted by the `enter` prop on any atom, by motion_group, by reveal, and by every ease field in motion_timeline, so an agent learns the vocabulary once. Honours prefers-reduced-motion (dots stay still).",
  "representativeQueries": [
    "show a reference card of the named easing curves, duration tokens and entrance effects",
    "the catalogue's motion vocabulary, drawn: every named easing curve with a dot riding it, the cubic-b",
    "render a motion tokens"
  ]
}

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