Components
BorderBeam
Card surface with a light that travels around its border as a premium accent.
BorderBeam is a bordered surface with a beam of light that continuously orbits
its edge — an eye-catching accent for upsell cards, active states, and hero
panels. Wrap your content as children and tune the beam with size (thickness
in px), duration (seconds per lap), and color (defaults to the accent
token). The beam is decorative and pauses under prefers-reduced-motion.
Example
Preview
Upgrade to Pro
Animated border for upsell and active cards.
import { BorderBeam } from '@officina/ui';
<BorderBeam duration={6} size={2}>
<h3>Pro plan</h3>
<p>Everything in Free, plus unlimited projects.</p>
</BorderBeam>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 6 | Full rotation duration in seconds. |
| size | number | 2 | Beam thickness in pixels. |