Category: Effects & motion
Soft bokeh particle field on canvas: dozens of luminous, depth-sized orbs drift upward, swaying on a slow noise field, drawn additively so they glow where they overlap; the pointer nudges them aside. Optional eyebrow/title/body copy centred over the field behind a readability veil. Honours prefers-reduced-motion (one static frame), pauses offscreen, DPR-aware. Was a "canvas fallback placeholder" until 2026-09-19 (a grey box on GAS and MCP Apps); now a real atom on the same kit as flow_field, identical on every renderer. Every option is an enum or a clamped int; colours must be #rrggbb.
| 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 field. | 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/violet/pink/cyan. | optional |
| background | "#rrggbb". Default "#0f172a". Keep it dark. | optional |
| density | "low" | "normal" | "high" (optional, default "normal") | optional |
| speed | "slow" | "normal" | "fast" (optional, default "normal") | optional |
| height | integer. Panel height in px, clamped 120-900. Default 240. | optional |
| interactive | bool. Pointer nudges the particles. Default true. | optional |
{
"type": "floating_particles"
}{
"identifier": "urn:air:a2uicatalog.ai:atom:floating_particles",
"displayName": "Floating Particles",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/floating_particles/",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps",
"android"
],
"description": "Soft bokeh particle field on canvas: dozens of luminous, depth-sized orbs drift upward, swaying on a slow noise field, drawn additively so they glow where they overlap; the pointer nudges them aside. Optional eyebrow/title/body copy centred over the field behind a readability veil. Honours prefers-reduced-motion (one static frame), pauses offscreen, DPR-aware. Was a \"canvas fallback placeholder\" until 2026-09-19 (a grey box on GAS and MCP Apps); now a real atom on the same kit as flow_field, identical on every renderer. Every option is an enum or a clamped int; colours must be #rrggbb.",
"representativeQueries": [
"show a soft glowing bokeh particles drifting upward on canvas, optional centred copy",
"soft bokeh particle field on canvas: dozens of luminous, depth-sized orbs drift upward, swaying on a",
"render a floating particles"
]
}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