Component

Animated Beam

Draws an SVG line between two elements and animates a light traveling along it — perfect for integration and 'how it works' diagrams. The path recomputes on resize via ResizeObserver and renders statically under reduced motion.

Installation

Registry CLI — copy the source straight into your project:

$pnpm dlx shadcn@latest add @stacklyui/animated-beam

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Give the beam three refs: a containerRef (the positioned ancestor defining the coordinate space) plus fromRef and toRef for the endpoints. Chain several with staggered delay values and alternate curvature signs to build a network.

Props

Prop	Type	Default	Description
`containerRef`	`RefObject`	—	Positioned ancestor that defines the SVG space.
`fromRef / toRef`	`RefObject`	—	Start and end element refs.
`curvature`	`number`	`0`	Bow of the beam. Positive up, negative down.
`duration`	`number`	`3`	Seconds for one travel pass.
`delay`	`number`	`0`	Seconds before the animation begins.
`reverse`	`boolean`	`false`	Reverse the travel direction.