Animated Beam

Inline SVG panel showing two labelled endpoint nodes connected by a path with a pulsing light dot that travels along it, animating via CSS stroke-dashoffset. No JavaScript, no mousemove. Visualises data routing between two named components.

Surfaces

webgoogle-meet-stagegoogle-apps-script-webmcp-apps

Degraded on

Surface	Note
google-apps-script-side-panel	SVG width is constrained to 300px; use short from_label/to_label (≤6 chars) to avoid node text overflow.
pdf	Renders as a static SVG path without animation
google-chat	CSS animation not supported; renders as a static diagram

Live preview

Fields

Field	Type
from_label	string. Left/source node label.	required
to_label	string. Right/target node label.	required
label	string. Small caption above the beam diagram.	optional
body	string. Description text below the diagram.	optional
active	bool. Whether the beam pulse animates. Default true.	optional
color	string. Beam and node accent colour. Default "#38bdf8".	optional
speed	"slow" \| "normal" \| "fast" (optional, default "normal")	optional
curved	bool. Use a curved cubic-bezier path. Default true.	optional

Example payload

{
  "type": "animated_beam",
  "from_label": "From label",
  "to_label": "To label"
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:animated_beam",
  "displayName": "Animated Beam",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/animated_beam",
  "capabilities": [
    "web",
    "google-meet-stage",
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "Inline SVG panel showing two labelled endpoint nodes connected by a path with a pulsing light dot that travels along it, animating via CSS stroke-dashoffset. No JavaScript, no mousemove. Visualises data routing between two named components.",
  "representativeQueries": [
    "show a CSS stroke-dashoffset animated SVG beam between two labelled nodes",
    "inline svg panel showing two labelled endpoint nodes connected by a path with a pulsing light dot th",
    "render a animated beam"
  ]
}

← 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 →