Word Flip

Inline overflow-hidden container that cycles through a list of words using a CSS steps() translateY animation. The agent provides the word array; the component handles all timing and looping. Useful for dynamic hero headlines such as "Grow your [Retention | Revenue | Signups]". No JavaScript required.

Surfaces

webgoogle-meet-stagegoogle-apps-script-side-panelgoogle-apps-script-webmcp-apps

Degraded on

Surface	Note
pdf	Renders all words stacked vertically (overflow visible); use first word only as fallback.
google-chat	CSS animation not supported; renders the first word only as plain text.

Live preview

AmazingFastReliableScalableAmazing

Fields

Field	Type
words	array of strings. The words to cycle through. Minimum 2.	required
prefix	string. Static text before the flipping section, e.g. "Grow your ".	optional
suffix	string. Static text after the flipping section.	optional
speed	"slow" \| "normal" \| "fast" (optional, default "normal"). Per-word hold duration.	optional
color	string. Flipping word colour. Default "#38bdf8".	optional
size	string. Font size, e.g. "32px". Default "inherit".	optional
weight	string. Font weight of flipping words. Default "700".	optional

Example payload

{
  "type": "word_flip",
  "words": [
    "Amazing",
    "Fast",
    "Reliable",
    "Scalable"
  ]
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:word_flip",
  "displayName": "Word Flip",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/word_flip",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-side-panel",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "Inline overflow-hidden container that cycles through a list of words using a CSS steps() translateY animation. The agent provides the word array; the component handles all timing and looping. Useful for dynamic hero headlines such as \"Grow your [Retention | Revenue | Signups]\". No JavaScript required.",
  "representativeQueries": [
    "show a CSS steps() vertical word carousel in an overflow-hidden inline container",
    "inline overflow-hidden container that cycles through a list of words using a css steps() translatey",
    "render a word flip"
  ]
}

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