Full-bleed animated hero background: a handful of soft colour blobs, laid out over the panel with an even (Vogel-disk) spread, drift and breathe forever on the same value-noise field that drives flow_field -- never looping on a fixed timeline the way a CSS @keyframes mesh gradient must. The nearest blob leans toward the pointer. This is the animated, canvas-driven sibling of the static mesh_gradient atom and the CSS-keyframe aurora_background: pick this one when the motion itself, not just the colour, needs to feel alive. Optional eyebrow/title/body copy sits opposite a readability veil. Honours prefers-reduced-motion (one pre-simulated frame, no loop), pauses when scrolled offscreen, DPR-aware. Pure canvas + requestAnimationFrame, zero dependencies, on the same shared kit as flow_field/signal_tunnel. Every option is an enum or a clamped integer and colours must be #rrggbb: the config is baked into inline script, so nothing free-form ever reaches it. Dark backgrounds only -- blobs blend additively and vanish on white.
| Surface | Note |
|---|---|
| Renders as a plain dark panel with the overlaid copy; the canvas is empty without JavaScript | |
| google-chat | Inline script not supported; renders as a solid dark panel with the copy |
| Field | Type | Required |
|---|---|---|
| title | string. Headline overlaid opposite the blobs. | optional |
| eyebrow | string. Small uppercase label above the title, tinted with the first palette colour. | optional |
| body | string. Supporting copy under the title (markdown inline supported). | optional |
| align | "left" | "center" | "right" (optional, default "left"). Where the overlaid copy sits; the veil that keeps it readable follows it. | optional |
| colors | array of 1-4 "#rrggbb" strings. Default ["#38bdf8","#818cf8","#f472b6"]. Blobs cycle through these colours. Invalid entries are dropped. | optional |
| background | "#rrggbb". Default "#070a12". Keep it dark. | optional |
| density | "low" | "normal" | "high" (optional, default "normal"). Blob count: 3 / 4 / 6. | optional |
| motion | "subtle" | "normal" | "wild" (optional, default "normal"). Drift amplitude. | optional |
| speed | "slow" | "normal" | "fast" (optional, default "normal") | optional |
| height | integer. Panel height in px, clamped 200-900. Default 360. | optional |
| interactive | bool. Nearest blob leans toward the pointer. Default true. | optional |
{
"type": "gradient_mesh_live"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:gradient_mesh_live",
"displayName": "Gradient Mesh Live",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/gradient_mesh_live",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Full-bleed animated hero background: a handful of soft colour blobs, laid out over the panel with an even (Vogel-disk) spread, drift and breathe forever on the same value-noise field that drives flow_field -- never looping on a fixed timeline the way a CSS @keyframes mesh gradient must. The nearest blob leans toward the pointer. This is the animated, canvas-driven sibling of the static mesh_gradient atom and the CSS-keyframe aurora_background: pick this one when the motion itself, not just the colour, needs to feel alive. Optional eyebrow/title/body copy sits opposite a readability veil. Honours prefers-reduced-motion (one pre-simulated frame, no loop), pauses when scrolled offscreen, DPR-aware. Pure canvas + requestAnimationFrame, zero dependencies, on the same shared kit as flow_field/signal_tunnel. Every option is an enum or a clamped integer and colours must be #rrggbb: the config is baked into inline script, so nothing free-form ever reaches it. Dark backgrounds only -- blobs blend additively and vanish on white.",
"representativeQueries": [
"show a soft colour blobs drifting on a noise field, pointer-reactive, hero background",
"full-bleed animated hero background: a handful of soft colour blobs, laid out over the panel with an",
"render a gradient mesh live"
]
}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