# Motion Animated Beam

Animated beam connecting integration logos to a central hub.

- id: `motion-animated-beam`
- Page: https://agentic-ui-kit.com/components/motion-animated-beam
- Live preview: https://agentic-ui-kit.com/live/component/motion-animated-beam?piece=motion-animated-beam

## Install

```bash
agentic-ui add motion-animated-beam
npx shadcn@4.17.0 add @agentic-ui/motion-animated-beam
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** beam-between-dom-refs, ref-based-geometry, resize-recalculation, straight-or-curved-path, integrations-diagram, fan-of-beams, reverse-direction, pause-offscreen, reduced-motion-fallback
- **Intents:** show-composition, communicate
- **Suits domains:** marketing, saas, devtools, ai-agents, operations, analytics
- **Interaction:** view-only
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** animated beam connecting integration logos to a central hub, light pulse travelling between two elements in a diagram, how it works diagram with beams from apps into an agent, connect two DOM nodes with an animated line that follows resize
- **Avoid when:** Diagrams with dozens of nodes, where a graph or flow library fits better, Data that must be read from the line itself (use a chart), Elements inside different scroll containers, where the measured positions drift while scrolling, Products where a still diagram is enough and motion would distract
- **Preserve when adapting:** decorative-svg, container-measured-geometry, resize-observer, text-labels-for-nodes, pause-offscreen
- **Replace when adapting:** nodes, icons, curvature, spread, duration, delay, direction
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion