Container that animates from blurred and transparent to fully visible on mount. Uses CSS @keyframes with filter:blur() and opacity together — no JavaScript. Configurable delay, duration, and direction (up, down, left, right, none).
| Surface | Note |
|---|---|
| gas-sidebar | Use direction "none" — translation offsets can clip against the 300px iframe edge. Opacity-only fade works correctly. |
| Renders as a static visible panel without animation | |
| googlechat | CSS animation not supported; renders immediately visible |
| Field | Type | |
|---|---|---|
| children | array of atom objects to render inside the container. | optional |
| title | string. Heading text. | optional |
| body | string. Body text (markdown inline supported). | optional |
| delay | string. CSS delay before animation starts, e.g. "0.3s". Default "0s". | optional |
| speed | "slow" | "normal" | "fast" (optional, default "normal") | optional |
| direction | "up" | "down" | "left" | "right" | "none" (optional, default "up"). Drift direction on reveal. | optional |
| blur | string. Starting blur radius, e.g. "8px". Default "8px". | optional |
| background | string. Panel background. Default transparent. | optional |
{
"type": "blur_fade_in"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:blur_fade_in",
"displayName": "Blur Fade In",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/blur_fade_in",
"capabilities": [
"web",
"meet-stage",
"apps-script-web"
],
"description": "Container that animates from blurred and transparent to fully visible on mount. Uses CSS @keyframes with filter:blur() and opacity together \u2014 no JavaScript. Configurable delay, duration, and direction (up, down, left, right, none).",
"representativeQueries": [
"show a CSS blur-to-focus fade-in container reveal",
"container that animates from blurred and transparent to fully visible on mount. uses css @keyframes",
"render a blur fade in"
]
}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