# Animated beam

> A glowing pulse travelling along a curved line between two elements.

Component · Pro · https://lodeui.com/components/animated-beam

## When to use

- Integration diagrams and "how it works" sections showing data flow.

## When not to use

- Real network maps with many nodes.

## Installation

```bash
npx shadcn@latest add @lode/animated-beam
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { AnimatedBeam } from "@/components/ui/animated-beam";

const box = React.useRef<HTMLDivElement>(null);
const a = React.useRef<HTMLDivElement>(null);
const b = React.useRef<HTMLDivElement>(null);

<div ref={box} className="relative flex justify-between">
  <div ref={a}>App</div>
  <div ref={b}>API</div>
  <AnimatedBeam container={box} from={a} to={b} curvature={40} />
</div>
```

## API reference

### AnimatedBeam

An SVG path between two elements with a travelling gradient pulse. Re-measures on resize.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| container / from / to | `RefObject<HTMLElement>` | – | The positioned parent and the two ends. |
| curvature | `number` | `0` | Bend in px. |
| duration / delay | `number` | `3 / 0` | Seconds. |
| reverse | `boolean` | – | Pulse from `to` to `from`. |
| colors | `[string, string]` | – | Pulse gradient. |

## Accessibility

- Decorative; label the nodes themselves.
- Only the static line shows under reduced motion.

## Motion

- A soft gradient travels along the curve and repeats.

## Responsive behavior

- Recalculates whenever the container resizes.

## Performance

- One SVG per beam; no per-frame layout reads.

## Notes for AI

- Nodes need a higher z-index than the beams.

## Related

- [Orbiting circles](https://lodeui.com/components/orbiting-circles) — Icons orbiting a center on rings, staying upright as they travel.
- [Integrations gallery](https://lodeui.com/blocks/integrations-gallery) — Searchable integrations with categories and connect / disconnect in place.
- [Feature bento](https://lodeui.com/blocks/feature-bento) — A bento grid of features, each with a small live visual and a pointer spotlight.