Border beam
A thin arc of light that sweeps the rounded border of any panel.
API reference
Components
<BorderBeam />
The reusable wrapper. Renders its child panel, then an aria-hidden ring clipped to the same rounded rect through which the beam shows. The ring is a thickness-wide rim carved from a rounded rectangle with the mask-composite border trick, and inside it a single oversized square carries the conic-gradient and spins about the panel's centre. The mask reveals only the rim, so the eye tracks a bright arc chasing the border. The spinning square is sized well past the panel (inset a large negative) so its conic fill covers every corner of a portrait OR landscape card through the whole turn; the rim mask (and overflow-hidden) trim the overshoot to the panel's real rounded shape. Rotation is a literal transform: rotate() string - compositor-only, no per-frame paint, no measurement.
size?
Angular length of the lit streak, in degrees of the lap. A longer arc reads as a longer comet tail. Defaults to 120.
duration?
Seconds for one full lap of the border. Smaller is faster. Defaults to 6.
thickness?
Thickness of the rim, in px. Defaults to 3.
delay?
Phase offset in seconds, so stacked beams travel out of sync. Pass a different delay per beam (e.g. -(duration / 3) * i) to spread three cards permanently out of phase. Defaults to 0.
active?
Your enable gate: run the beam when true, hold the resting border when false (e.g. "this card is featured"). The beam additionally, and independently, does not render under prefers-reduced-motion and settles while scrolled off-screen, so you never fold those in yourself. Defaults to true.
className?
Merged onto the wrapping element.
children
The panel the beam traces - your card, tile or pricing panel.
Featured in
See the border beam composed into full sections.
