Components / Border Beam
Border Beam
A light that travels the border of the one control a surface is trying to hand the user — the "this is the thing to press" signal for a primary CTA that would otherwise read as static content. Owned, not installed: colors come from the brand palette and reduced motion removes the beam.
import { BorderBeam } from '@layers/ui/border-beam'Rendered stock
House rules
- ONE beam per screen, on THE call-to-action. Two beams is a carnival, and a beam on anything other than the single next action teaches people to ignore it.
- The wrapper MUST carry the wrapped control's radius (className="rounded-4xl" around a size-xl Button): the ring inherits the wrapper's radius, and a mismatched wrapper traces a different shape than the edge under it.
- Wrap real components — a Button, a Card — never bespoke DOM. The beam is chrome on top of the vocabulary, never a substitute for it.
- colorVariant 'colorful' runs the five brand pastels along the beam in palette order; 'primary' sweeps the primary ink. strength is the beam's opacity; size (sm/md/lg) is the arc length of the light.
- Reduced motion removes the beam entirely rather than freezing it — a frozen partial arc reads as a rendering glitch. The wrapped control is untouched, so the CTA loses nothing but the shimmer.