Full-bleed animated hero background: light streaks travel along fixed radial lanes through a vanishing point (right, centre or left), converging into it by default (signals arriving) or, in "out" mode, radiating away from it (signals broadcasting). Each streak accelerates as it nears the vanishing point and is coloured by its lane angle, so the tunnel reads as many distinct signals rather than one; an additive glow marks the vanishing point itself. Optional eyebrow/title/body copy sits opposite the tunnel behind a readability veil, the same flow_field/try.cloudflare.com hero layout (copy on one side, motion on the other). Honours prefers-reduced-motion (renders one pre-simulated frame, no loop), pauses when scrolled offscreen, and is DPR-aware. Pure canvas + requestAnimationFrame, zero dependencies, on the same shared kit as flow_field/orbit_mark. 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 -- streaks are additive 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 tunnel. | 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 |
| direction | "in" | "out" (optional, default "in"). "in" -- streaks converge on the vanishing point. "out" -- streaks radiate away from it. | optional |
| position | "right" | "center" | "left" (optional, default "right"). Where the vanishing point sits; put it opposite the copy. | optional |
| colors | array of 1-4 "#rrggbb" strings. Default ["#38bdf8","#818cf8","#f472b6"]. Streaks take a colour by lane angle so the tunnel reads as coloured bands; the first colour also tints the vanishing-point glow. Invalid entries are dropped. | optional |
| background | "#rrggbb". Default "#070a12". Keep it dark. | optional |
| density | "low" | "normal" | "high" (optional, default "normal"). Streak 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 streak's light trail lingers. | optional |
| height | integer. Panel height in px, clamped 200-900. Default 360. | optional |
| interactive | bool. Pointer nudges nearby streaks. Default true. | optional |
{
"type": "signal_tunnel"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:signal_tunnel",
"displayName": "Signal Tunnel",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/signal_tunnel",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Full-bleed animated hero background: light streaks travel along fixed radial lanes through a vanishing point (right, centre or left), converging into it by default (signals arriving) or, in \"out\" mode, radiating away from it (signals broadcasting). Each streak accelerates as it nears the vanishing point and is coloured by its lane angle, so the tunnel reads as many distinct signals rather than one; an additive glow marks the vanishing point itself. Optional eyebrow/title/body copy sits opposite the tunnel behind a readability veil, the same flow_field/try.cloudflare.com hero layout (copy on one side, motion on the other). Honours prefers-reduced-motion (renders one pre-simulated frame, no loop), pauses when scrolled offscreen, and is DPR-aware. Pure canvas + requestAnimationFrame, zero dependencies, on the same shared kit as flow_field/orbit_mark. 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 -- streaks are additive and vanish on white.",
"representativeQueries": [
"show a radial light streaks converging on (or radiating from) a vanishing point, hero background",
"full-bleed animated hero background: light streaks travel along fixed radial lanes through a vanishi",
"render a signal tunnel"
]
}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