← All widgetsAnimatedAnimated & Data Viz

Fade-in Column

Column with staggered fade-in.

A vertical stack whose children fade in one after another for a polished reveal.

type · fade_in_column
An animated visual primitive.

How to use it

Just ask for it in chat — the agent emits this widget and the shell renders it:

Try saying
list three onboarding steps that fade in one by one

Example

The agent returns this A2UI component (inside the components array of a /chat response):

fade_in_column.json
{
  "type": "fade_in_column",
  "staggerDelay": 250,
  "spacing": 12,
  "children": [
    {
      "type": "text",
      "content": "1. Install"
    },
    {
      "type": "text",
      "content": "2. Configure"
    },
    {
      "type": "text",
      "content": "3. Launch"
    }
  ]
}

Properties

PropTypeDescription
staggerDelaynumberms between each child
spacingnumberGap between children
childrencomponent[]Items to reveal

Browse the full Widget Index, the Widget Catalog, or learn the A2UI system behind it.