Border Beam
A light that travels around a card's border.
Border Beam draws a short comet of light that laps the border of its parent. Use it to mark the recommended plan, a new feature or an active state. It is one masked conic gradient rotated by GSAP: no SVG, no layout cost.
Preview
$24 / month
Everything in Studio, plus SSO and audit logs.
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/border-beam.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/border-beam.
Builds on: motion
Usage
import { BorderBeam } from "@/components/ui/border-beam";
<div className="relative rounded-2xl border">
…
<BorderBeam />
</div>Motion
GSAP rotates the gradient angle in a seamless loop.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
BorderBeam
Absolutely positioned; inherits the parent's radius.
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 6 | Seconds per lap. |
| color | string | "var(--signal)" | Beam color. |
| size | number | 0.18 | Beam length (0–1 of the border). |
Accessibility
- Decorative and aria-hidden.
- With reduced motion or --cl-motion: 0 the effect stays still and the content remains fully usable.
FAQ
Also searched as: border beam · animated border · glowing border card · border animation css · magic ui border beam alternative