Border Beam

A light that travels around an element's border to draw the eye, and hides itself for readers who prefer reduced motion.

Wrap a relative element in BorderBeam to send a light around its border in your primary color, once every six seconds.

Pass color one CSS color, or an array of { color, percent } stops from 0 to 100 for a gradient beam.

Set size to change the length of the moving segment, from a short dash to a long streak.

Set duration to the seconds one loop takes, 6 by default, from a brisk 2 to a slow 16.

Set count to run several beams on one border, spaced evenly around the loop.

Set outset to 0 on a container with overflow: hidden, so the beam draws inside the edge instead of being cut off.

Pass className to style the beam itself, here hiding it until the pointer moves over the card.

Set reverse to send the beam counterclockwise.

Wrap a Button to put the beam on it, and the beam follows its shape, round corners included.

The component inside real screens, with the components it usually sits beside.

A pricing table with a beam on the featured plan and plain cards for the other two.

BorderBeam's props. Rows marked antuikit in the Version column are added by the kit.

On This Page