Full-bleed animated hero background: hundreds of luminous streams ride a slowly evolving noise vector field on a dark canvas, leave additive long-exposure light trails, and converge on a soft glowing focus point. The pointer bends the field around it. Optional eyebrow/title/body copy sits on the opposite side behind a readability veil -- the try.cloudflare.com hero layout (copy left, light right) as one atom. Honours prefers-reduced-motion (renders one pre-simulated long-exposure frame, no loop), pauses when scrolled offscreen, and is DPR-aware. Pure canvas + requestAnimationFrame, zero dependencies. 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 (bad values fall back to defaults). Dark backgrounds only -- trails are drawn 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 on the field. | 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 |
| focus | "right" | "center" | "left" | "none" (optional, default "right"). Where the glowing sink is that every stream converges on. Put it opposite the copy. | optional |
| colors | array of 1-4 "#rrggbb" strings. Default ["#38bdf8","#818cf8","#f472b6"]. Streams take a colour by region so the field reads as coloured ribbons; the first colour also tints the focus glow. Invalid entries are dropped. | optional |
| background | "#rrggbb". Default "#070a12". Keep it dark. | optional |
| density | "low" | "normal" | "high" (optional, default "normal"). Stream count, scaled to the panel area. | optional |
| speed | "slow" | "normal" | "fast" (optional, default "normal") | optional |
| trail | "short" | "normal" | "long" (optional, default "normal"). How long each stream's light trail lingers. | optional |
| scale | "fine" | "normal" | "broad" (optional, default "normal"). Size of the swirls. | optional |
| height | integer. Panel height in px, clamped 200-900. Default 360. | optional |
| interactive | bool. Pointer bends the field. Default true. | optional |
{
"type": "flow_field"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:flow_field",
"displayName": "Flow Field",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/flow_field",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Full-bleed animated hero background: hundreds of luminous streams ride a slowly evolving noise vector field on a dark canvas, leave additive long-exposure light trails, and converge on a soft glowing focus point. The pointer bends the field around it. Optional eyebrow/title/body copy sits on the opposite side behind a readability veil -- the try.cloudflare.com hero layout (copy left, light right) as one atom. Honours prefers-reduced-motion (renders one pre-simulated long-exposure frame, no loop), pauses when scrolled offscreen, and is DPR-aware. Pure canvas + requestAnimationFrame, zero dependencies. 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 (bad values fall back to defaults). Dark backgrounds only -- trails are drawn additively and vanish on white.",
"representativeQueries": [
"show a luminous noise-field streams converging on a glowing focus, hero background",
"full-bleed animated hero background: hundreds of luminous streams ride a slowly evolving noise vecto",
"render a flow field"
]
}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