The canvas hero that works on a white page. A grid of dots whose size follows a travelling wave -- organic noise, a ripple spreading from a focus point, or a diagonal sweep -- like print halftone brought to life; wave peaks tint to the accent colour, and the pointer swells the dots around it. Ink on paper by default, so it sits inside a light document; flip ink and paper for a dark version. Optional eyebrow/title/body copy behind a veil. Honours prefers-reduced-motion (one static frame), pauses offscreen, DPR-aware. Same kit and hardening as flow_field: every option is an enum or a clamped int; colours must be #rrggbb.
| Surface | Note |
|---|---|
| Renders as a plain panel with the copy; the canvas is empty without JavaScript | |
| google-chat | Inline script not supported; renders as a solid panel with the copy |
| Field | Type | Required |
|---|---|---|
| title | string. Headline overlaid on the grid. | optional |
| eyebrow | string. Small uppercase label above the title. | optional |
| body | string. Copy under the title (markdown inline supported). | optional |
| align | "left" | "center" | "right" (optional, default "left") | optional |
| wave | "noise" | "ripple" | "sweep" (optional, default "noise"). Organic field, concentric ripple from the focus, or a diagonal front. | optional |
| focus | "center" | "left" | "right" (optional, default "center"). Ripple origin. | optional |
| ink | "#rrggbb". Dot colour. Default "#0f172a". | optional |
| paper | "#rrggbb". Ground colour. Default "#f7f7f5". | optional |
| accent | "#rrggbb". Colour of the wave peaks; when absent, peaks stay in ink. | optional |
| spacing | "fine" | "normal" | "coarse" (optional, default "normal"). Dot pitch 10 / 14 / 20 px. | optional |
| speed | "slow" | "normal" | "fast" (optional, default "normal") | optional |
| height | integer. Panel height in px, clamped 160-900. Default 320. | optional |
| interactive | bool. Pointer swells nearby dots. Default true. | optional |
{
"type": "halftone_wave"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:halftone_wave",
"displayName": "Halftone Wave",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/halftone_wave",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "The canvas hero that works on a white page. A grid of dots whose size follows a travelling wave -- organic noise, a ripple spreading from a focus point, or a diagonal sweep -- like print halftone brought to life; wave peaks tint to the accent colour, and the pointer swells the dots around it. Ink on paper by default, so it sits inside a light document; flip ink and paper for a dark version. Optional eyebrow/title/body copy behind a veil. Honours prefers-reduced-motion (one static frame), pauses offscreen, DPR-aware. Same kit and hardening as flow_field: every option is an enum or a clamped int; colours must be #rrggbb.",
"representativeQueries": [
"show a animated halftone dot grid riding a wave, works on light backgrounds",
"the canvas hero that works on a white page. a grid of dots whose size follows a travelling wave -- o",
"render a halftone wave"
]
}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