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
webmeet-stageapps-script-web
Degraded on
SurfaceNote
gas-sidebarSVG width is constrained to 300px; use short from_label/to_label (≤6 chars) to avoid node text overflow.
pdfRenders as a static SVG path without animation
googlechatCSS animation not supported; renders as a static diagram
Fields
FieldType
from_labelstring. Left/source node label.required
to_labelstring. Right/target node label.required
labelstring. Small caption above the beam diagram.optional
bodystring. Description text below the diagram.optional
activebool. Whether the beam pulse animates. Default true.optional
colorstring. Beam and node accent colour. Default "#38bdf8".optional
speed"slow" | "normal" | "fast" (optional, default "normal")optional
curvedbool. 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",
    "meet-stage",
    "apps-script-web"
  ],
  "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 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 →