The AnimatedBeam component draws a curved line between any two elements and sends a gradient pulse along it, remeasuring whenever the layout moves.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/animated-beam.jsonEverything Animated Beam accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| containerRef (required) | RefObject<HTMLElement> | No default | The positioned element both endpoints live inside |
| fromRef (required) | RefObject<HTMLElement> | No default | Element the beam starts at |
| toRef (required) | RefObject<HTMLElement> | No default | Element the beam ends at |
| curvature | number | 0 | Arc height in pixels; positive bows up, negative bows down |
| reverse | boolean | false | Send the pulse from the end to the start |
| duration | number | 3 | Seconds for one pulse to travel the path |
| delay | number | 0 | Seconds before the pulse starts |
| pathColor | string | 'var(--border)' | Colour of the static path beneath the pulse |
| gradientStart | string | 'var(--brand)' | First colour of the travelling gradient |
| gradientStop | string | 'var(--accent-pink)' | Second colour of the travelling gradient |
| className | string | '' | Additional CSS classes for the SVG |
Required.