Border Beam
BorderBeam wraps a card or container and animates a glowing beam of light around its border.
Basic usage
Card with animated border
The beam travels around the card border continuously.
vue
<BorderBeam>
<div style="padding:24px;">
<p>Card with animated border</p>
</div>
</BorderBeam>Custom colors
Golden beam
Custom colorFrom and colorTo props.
vue
<BorderBeam color-from="#f59e0b" color-to="transparent">
<div>...</div>
</BorderBeam>Slow beam
Slow orbit
16 second duration.
vue
<BorderBeam :duration="16">
<div>...</div>
</BorderBeam>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 200 | Beam spot size in px |
duration | number | 8 | Loop duration in seconds |
colorFrom | string | var(--color-primary) | Beam start color |
colorTo | string | transparent | Beam end/fade color |
borderWidth | number | 1.5 | Border thickness in px |
Slots
| Slot | Description |
|---|---|
default | Card or container content |