Shimmer Button

Inline button or link with a diagonal shimmer sweep animation driven by CSS background-position keyframes. The shimmer accent colour sweeps across the button on a loop. No JavaScript. Use for primary CTAs on dark backgrounds.

Surfaces
webmeet-stageapps-script-web
Degraded on
SurfaceNote
pdfRenders as a static styled button without animation
googlechatCSS animation not supported; renders as a plain button
Fields
FieldType
labelstring. Button text.required
hrefstring. If set, renders as an anchor tag.optional
size"sm" | "md" | "lg" (optional, default "md")optional
accentstring. Shimmer highlight colour. Default "#38bdf8".optional
backgroundstring. Button background colour. Default "#1e293b".optional
speed"slow" | "normal" | "fast" (optional, default "normal")optional
descriptionstring. Small text below the button.optional
Example payload
{
  "type": "shimmer_button",
  "label": "Shimmer Button"
}
ARD catalog entry
{
  "identifier": "urn:air:a2uicatalog.ai:atom:shimmer_button",
  "displayName": "Shimmer Button",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/shimmer_button",
  "capabilities": [
    "web",
    "meet-stage",
    "apps-script-web"
  ],
  "description": "Inline button or link with a diagonal shimmer sweep animation driven by CSS background-position keyframes. The shimmer accent colour sweeps across the button on a loop. No JavaScript. Use for primary CTAs on dark backgrounds.",
  "representativeQueries": [
    "show a button with CSS background-position shimmer sweep animation",
    "inline button or link with a diagonal shimmer sweep animation driven by css background-position keyf",
    "render a shimmer button"
  ]
}
← Full ARD catalog Try it live →
Deploy your own renderer

The renderer is open source. 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 apps-script-surface/gas-schema-renderer
clasp push && clasp deploy
Full deploy guide →