Animated Beam

Lines that connect icon tiles, each with a highlight travelling from one end to the other, for showing how things flow on a marketing page.

Examples

Three sources curve into one workspace, which feeds one person.

Straight beams with delays that line up, so each step starts when the previous one arrives.

Two arcs between the same tiles, one of them reversed.

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-animated-beam.json

Draws one beam inside its container. The container needs position: relative.

Prop	Type	Default	Description
containerRef	React.RefObject<HTMLElement>		The element the beam is drawn in. It is observed for size changes.
fromRef	React.RefObject<HTMLElement>		The node the beam starts from, at its centre.
toRef	React.RefObject<HTMLElement>		The node the beam ends at, at its centre.
curvature	number	0	How far the middle of the line bends away from a straight line, in px.
reverse	boolean	false	Whether the highlight travels from `toRef` to `fromRef`.
duration	number	3	Seconds for one trip of the highlight.
delay	number	0	Seconds before the first trip.
repeatDelay	number	1	Seconds of rest between two trips.
className	string		Classes for the SVG.

An icon tile that sits above the beams. Renders a <div> and accepts a ref.

Prop	Type	Default	Description
material	'keycap' \| 'gem'	'keycap'	A neutral key cap, or a gem plate in the primary colour.
size	'sm' \| 'md' \| 'lg'	'md'	40, 48 or 64px, with the icon sized to match.
className	string		Classes for the tile.

The beams are decorative SVG and hidden from assistive technology. Give the container role='img' and an aria-label that says what the diagram shows.
The highlight is the primary colour only, over a quiet line in the foreground colour.
The highlight travels only while the container is on screen. With reduced motion, the lines stay and the highlight is gone.

Inspired by the animated beam of UI Layouts, rebuilt on our tokens and motion.