CardsNew
Border Beam
A glowing beam travels around the edge of a card. Drop it inside any rounded box to bring the border to life.
Customize
colorFrom
colorTo
Based on Border Beam (MIT license) · Terms of use
More in Pro
View allProps
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| size | number | 50 | Length of the beam, in pixels. |
| duration | number | 6 | Time of one lap, in seconds. |
| delay | number | 0 | Start offset, in seconds. |
| colorFrom | string | "#ffffff" | Color of the beam head. |
| colorTo | string | "rgba(255,255,255,0.15)" | Color of the beam tail. |
| borderWidth | number | 1 | Border width, in pixels. |
| reverse | boolean | false | The beam runs the other way. |
| initialOffset | number | 0 | Where on the border the beam starts, in percent. |
| transition | Transition | — | Custom Motion transition. |
| className | string | — | Classes for the beam itself. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge