Animated beamPro
A glowing pulse travelling along a curved line between two elements.
When to use
- Integration diagrams and "how it works" sections showing data flow.
When not to use
- Real network maps with many nodes.
Installation
Usage
Import it from @/components/ui/animated-beam after installing.
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.
This page as Markdown, for assistants and coding agents:
/components/animated-beam/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt