Category: Effects & motion
Depth-layered background on canvas: three layers of soft colour orbs, large and faint at the back, small and sharp at the front, each layer shifting with the pointer by an amount proportional to its depth, plus a slow ambient drift when the pointer is away. Optional eyebrow/title/body copy centred on top. Pointer-driven rather than scroll-driven on purpose: MCP Apps hosts size the iframe to its content, so there is often no scroll to drive. Honours prefers-reduced-motion (one static frame), pauses offscreen, DPR-aware. Was a "canvas fallback placeholder" until 2026-09-19; now a real atom on the flow_field kit, identical on every renderer.
| Surface | Note |
|---|---|
| Renders as a plain dark panel with the 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 (optional, alias: label, text). Heading centred over the layers. | optional |
| eyebrow | string. Small uppercase label above the title. | optional |
| body | string. Copy under the title (markdown inline supported). | optional |
| colors | array of 1-4 "#rrggbb" strings. Default indigo/pink/cyan. | optional |
| background | "#rrggbb". Default "#0f172a". Keep it dark. | optional |
| depth | "subtle" | "normal" | "deep" (optional, default "normal"). How far the layers shift with the pointer. | optional |
| height | integer. Panel height in px, clamped 160-900. Default 300. | optional |
| interactive | bool. Pointer drives the parallax. Default true. | optional |
{
"type": "parallax_section"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:parallax_section",
"displayName": "Parallax Section",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/parallax_section/",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Depth-layered background on canvas: three layers of soft colour orbs, large and faint at the back, small and sharp at the front, each layer shifting with the pointer by an amount proportional to its depth, plus a slow ambient drift when the pointer is away. Optional eyebrow/title/body copy centred on top. Pointer-driven rather than scroll-driven on purpose: MCP Apps hosts size the iframe to its content, so there is often no scroll to drive. Honours prefers-reduced-motion (one static frame), pauses offscreen, DPR-aware. Was a \"canvas fallback placeholder\" until 2026-09-19; now a real atom on the flow_field kit, identical on every renderer.",
"representativeQueries": [
"show a pointer-parallax depth layers of soft colour orbs on canvas, optional centred copy",
"depth-layered background on canvas: three layers of soft colour orbs, large and faint at the back, s",
"render a parallax section"
]
}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