Blur Fade In

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).

Surfaces

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

Degraded on

Surface	Note
google-apps-script-side-panel	Use direction "none" — translation offsets can clip against the 300px iframe edge. Opacity-only fade works correctly.
pdf	Renders as a static visible panel without animation
google-chat	CSS animation not supported; renders immediately visible

Live preview

Fades in on load

No JavaScript — pure CSS `@keyframes` combining `filter:blur()` and `opacity`.

Fields

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

Example payload

{
  "type": "blur_fade_in"
}

ARD catalog entry

{
  "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",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "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"
  ]
}

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