Animated Beam

A flowing beam between nodes, well suited to integration diagrams and data-flow animations.

Draws a flowing beam between any two nodes, with the path recalculated automatically as the container resizes — ideal for integration diagrams, data pipelines, and architecture diagrams.

Loading preview…

npx shadcn@latest add https://webberui.com/r/animated-beam.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Curvaturecurvature

Flow duration (s)duration

Reverse flowreverse

Line width (px)pathWidth

Gradient start colorgradientStartColor

Gradient end colorgradientStopColor

<AnimatedBeam />

Installation

npx shadcn@latest add https://webberui.com/r/animated-beam.json

Or, once registries are configured in components.json, install it as @webberui/animated-beam.

The beam is an absolutely positioned overlay that measures coordinates through three refs: containerRef is the measurement origin, and fromRef / toRef are the nodes at each end. Just put the nodes and the beam inside the same relative container.

"use client";

import * as React from "react";
import { AnimatedBeam } from "@/components/ui/animated-beam";

export function Diagram() {
  const containerRef = React.useRef<HTMLDivElement>(null);
  const fromRef = React.useRef<HTMLDivElement>(null);
  const toRef = React.useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} className="relative flex justify-between p-10">
      <div ref={fromRef} className="size-11 rounded-full bg-white" />
      <div ref={toRef} className="size-11 rounded-full bg-white" />
      <AnimatedBeam
        containerRef={containerRef}
        fromRef={fromRef}
        toRef={toRef}
      />
    </div>
  );
}

The nodes need real dimensions and positioning; the beam is layered beneath them with -z-10, so make sure the container carries relative. Use different delay values to offset the flow timing of multiple beams, and curvature to spread apart lines that converge on the same hub.

Props

Prop	Type	Default	Description
`containerRef`	`RefObject<HTMLElement \| null>`	—	The outer container used to measure coordinates
`fromRef`	`RefObject<HTMLElement \| null>`	—	The node the beam starts at
`toRef`	`RefObject<HTMLElement \| null>`	—	The node the beam ends at
`curvature`	`number`	`0`	Curvature (px): positive arcs upward, negative dips downward
`reverse`	`boolean`	`false`	Flow in reverse (end toward start)
`duration`	`number`	`3`	Duration of one pass of the flow (seconds)
`delay`	`number`	`0`	Delay before the reveal starts (seconds)
`pathColor`	`string`	`"currentColor"`	Color of the static base line
`pathWidth`	`number`	`2`	Line width (px)
`pathOpacity`	`number`	`0.15`	Opacity of the base line
`gradientStartColor`	`string`	`"#818cf8"`	Start color of the flowing gradient
`gradientStopColor`	`string`	`"#22d3ee"`	End color of the flowing gradient
`startXOffset`	`number`	`0`	Fine X adjustment for the start point (px)
`startYOffset`	`number`	`0`	Fine Y adjustment for the start point (px)
`endXOffset`	`number`	`0`	Fine X adjustment for the end point (px)
`endYOffset`	`number`	`0`	Fine Y adjustment for the end point (px)

Accessibility

When the user has "reduce motion" enabled at the system level, only the static base line remains and the flowing highlight is not played
The beam layer carries aria-hidden; it is decorative only, so it does not interfere with assistive technology
The path watches the container's size through a ResizeObserver and recalculates automatically in responsive layouts, cleaning up on unmount

Playground

Installation

Usage

Props

Accessibility

On this page