Beam

An animated connector between two elements with a glowing pulse that travels along the path.

Overview

Beam draws an SVG path between two DOM elements — both must be inside a common positioned container — and animates a glowing streak (or dot) along it.

The component is aria-hidden and purely decorative; the nodes themselves carry the meaning. Use BeamNode for the round icon endpoints, or pass any ref'd element as fromRef / toRef.

Preview

Customize

Curvature

Reverse

Duration

Delay

Pulse Length

0.2

Path Color#52525b

Pulse Colorvar(--primary)

Width

Track

Arrow

Gap

Shape

Pulse

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add beam

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Beam, BeamNode } from "@/components/ui/beam";
import { useRef } from "react";

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

  return (
    <div ref={containerRef} className="relative flex items-center gap-16 p-8">
      <BeamNode ref={fromRef}>A</BeamNode>
      <BeamNode ref={toRef} highlight>B</BeamNode>
      <Beam containerRef={containerRef} fromRef={fromRef} toRef={toRef} />
    </div>
  );
}

In practice

A three-step data pipeline diagram showing beams staggered between ingestion, processing, and delivery.

Ingest

Process

Deliver

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`containerRef`	RefObject<HTMLElement \| null>	—	Positioned element the beam is drawn in. Both ends must be inside it.
`fromRef`	RefObject<HTMLElement \| null>	—	Element the beam starts at.
`toRef`	RefObject<HTMLElement \| null>	—	Element the beam ends at.
`curvature`	number	`0`	Bend in px, perpendicular to the line from start to end. Positive bends left of the direction of travel.
`reverse`	boolean	`false`	Run the pulse from `to` back to `from`.
`duration`	number	`3`	Seconds for one pulse to cross the path.
`delay`	number	`0`	Seconds before the first pulse. Use to stagger beams along a flow.
`pulseLength`	number	`0.2`	Ray length as a share of the path, 0–1 (`pulse="ray"` only).
`pathColor`	string	`"color-mix(in oklch, var(--foreground) 22%, transparent)"`	Track and arrowhead color. Any CSS color.
`pulseColor`	string	`"var(--primary)"`	Pulse color. Any CSS color.
`width`	number	`1`	Track stroke width in px.
`track`	"dotted" \| "dashed" \| "solid"	`"dotted"`	Track style.
`arrow`	boolean	`false`	Arrowhead at the end of the track.
`gap`	number	`6`	Gap in px between each node's edge and the beam end.
`shape`	"arc" \| "curve"	`"arc"`	arc: bent by curvature. curve: an S-curve that leaves and enters along the main direction.
`pulse`	"ray" \| "dot"	`"ray"`	What travels along the path.

Accessibility

Beam is decorative. The SVG carries aria-hidden="true" and is never announced by assistive technology.

Put accessible names and roles on the nodes, not on the beam.
The pulse animation is disabled under prefers-reduced-motion.