Border Beam
A beam that travels around the border of a card while something is in progress. Its head is the primary colour and its tail fades out behind it, following the rounded corners exactly.
Border Trail moves a soft neutral spot along the edge and fits a loading placeholder. Border Beam draws a line on the border itself, in the brand colour, and fades away when the work it stands for stops.
Examples
While a task runs
The beam runs while the sync runs. Pause it and the beam fades out, then stops.
Design library
Syncing 1,204 files from the shared drive
Two beams
Two shorter beams on opposite sides, travelling anticlockwise.
Drafting a reply
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-border-beam.jsonComponent API
BorderBeam
Place it inside a card with position: relative. It reads the card's corner radius and size, and redraws when they change. The card does not need overflow: hidden.
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 6 | Seconds for a beam to go once around the card. |
| length | number | 0.3 | The length of a beam, as a share of the border, from 0 to 1. |
| width | number | 1.5 | The thickness of the beam, in px. |
| count | number | 1 | How many beams travel, evenly spaced. |
| offset | number | 0 | Where the beam starts, as a share of the border from the top left corner. |
| reverse | boolean | false | Whether the beam travels anticlockwise. |
| active | boolean | true | Whether the beam shows. Turning it off fades the beam out, then pauses it. |
| radius | number | The corner radius in px, when it should not be read from the card. | |
| className | string | Classes for the SVG. The colour comes from text-primary and can be replaced. |
Accessibility and motion
- The beam is decorative SVG and hidden from assistive technology. Say what is in progress in text, as the sync example does with a polite live region.
- The beam pauses while the card is off screen.
- With reduced motion the beam stays still where it starts.
Credits
Inspired by the border beam of Magic UI, redrawn as a dashed SVG stroke on our tokens.