Effect Overlay

CSS-animated celebration overlay triggered by a named effect type. confetti fires falling coloured rectangles via keyframe animation. trophy bounces a large emoji with a scale-in animation. pulse radiates a glowing circle. fireworks scatters particles radially. Designed as a schema atom wrapper around the canvas particle blast used in Cyberpunk Maverick demos.

Surfaces
webgoogle-meet-stagegoogle-apps-script-webmcp-apps
Degraded on
SurfaceNote
pdfRenders as a static icon and message only
emailCSS animations not supported; renders as static icon
Live preview
🎉
Fields
FieldType
triggerstring (required). One of confetti, trophy, pulse, fireworks.required
statusstring. Small label shown above the effect (e.g. resolved, done).optional
messagestring. Text shown below the icon.optional
colorstring. Primary accent color for pulse effect. Defaultoptional
Example payload
{
  "type": "effect_overlay",
  "trigger": "click"
}
ARD catalog entry
{
  "identifier": "urn:air:a2uicatalog.ai:atom:effect_overlay",
  "displayName": "Effect Overlay",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/effect_overlay",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "CSS-animated celebration overlay triggered by a named effect type. confetti fires falling coloured rectangles via keyframe animation. trophy bounces a large emoji with a scale-in animation. pulse radiates a glowing circle. fireworks scatters particles radially. Designed as a schema atom wrapper around the canvas particle blast used in Cyberpunk Maverick demos.",
  "representativeQueries": [
    "show a CSS confetti/trophy/pulse celebration overlay triggered by name",
    "css-animated celebration overlay triggered by a named effect type. confetti fires falling coloured r",
    "render a effect overlay"
  ]
}
← Full ARD catalog
Deploy your own Google Apps Script renderer

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
Full deploy guide →