Heading text rendered with an animated shifting gradient fill using CSS background-clip:text and a background-position keyframe. The gradient flows continuously between the from/to colours, creating a shimmer effect on titles and hero text.
| Surface | Note |
|---|---|
| Renders as flat-coloured text (first gradient stop) | |
| googlechat | CSS background-clip not supported; renders as plain bold text |
| Field | Type | |
|---|---|---|
| text | string. The heading text to display. | required |
| from | string. Gradient start colour. Default "#4f46e5". | optional |
| to | string. Gradient end colour. Default "#06b6d4". | optional |
| via | string. Optional midpoint colour. | optional |
| size | string. Font size. Default "2rem". | optional |
| weight | string. Font weight. Default "800". | optional |
| duration | number. Cycle duration in seconds. Default 4. | optional |
{
"type": "gradient_text",
"text": "A concise description of the content."
}{
"identifier": "urn:air:a2uicatalog.ai:atom:gradient_text",
"displayName": "Gradient Text",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/gradient_text",
"capabilities": [
"web",
"meet-stage",
"apps-script-web"
],
"description": "Heading text rendered with an animated shifting gradient fill using CSS background-clip:text and a background-position keyframe. The gradient flows continuously between the from/to colours, creating a shimmer effect on titles and hero text.",
"representativeQueries": [
"show a Animated gradient-fill heading text via CSS background-clip",
"heading text rendered with an animated shifting gradient fill using css background-clip:text and a b",
"render a gradient text"
]
}The renderer is open source. 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 apps-script-surface/gas-schema-renderer
clasp push && clasp deploy