Animated Beam

Installation

npx shadcn@latest add @blank/animated-beam

Usage

import { AnimatedBeam } from "@/components/ui/animated-beam"

const container = React.useRef<HTMLDivElement>(null)
const from = React.useRef<HTMLDivElement>(null)
const to = React.useRef<HTMLDivElement>(null)

<div ref={container} className="relative flex justify-between">
  <div ref={from} className="z-10">…</div>
  <div ref={to} className="z-10">…</div>
  <AnimatedBeam containerRef={container} fromRef={from} toRef={to} />
</div>

The path runs between the centers of the two elements and is measured again whenever the container resizes. Give the nodes z-10 so the path passes behind them. The resting path uses the border token and the beam brand.

The beam pauses while the container is off screen. Under reduced motion the path is drawn in the beam color and nothing moves.

Examples

Both directions

reverse sends the beam from toRef to fromRef. Offset the two paths so they do not overlap.

Props