BorderBeam
A short bright gradient beam that orbits around the border — always-on, high-visibility. See ShineBorder for a subtler sweep, or HoverBorderGradient for a cursor-driven angle effect.
Installation
dotnet add package Lumeo.Motion
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <BorderBeam />
When to Use
- Make a pricing tier, feature card, or CTA stand out with a continuously orbiting beam.
- Highlight modal dialogs or sidebars that need extra visual emphasis.
- Customise
ColorFromandColorToto match your brand — or use the default primary theme color.
Pro plan
Popular
Unlock premium features with a travelling beam border.
$29
/mo
Violet beam
Amber beam
Teal beam
Sm (1px)
Md (1.5px)
Lg (3px)
DurationMs="20000" — a slow, meditative orbit.
Pick a size to see the beam thickness change live.
Size = Md
Drag the slider to change how fast the beam orbits (lower = faster).
DurationMs = 8000
8000 ms per orbit
API Reference
BorderBeam
| Property | Type | Default | Description |
|---|---|---|---|
| Size | BeamSize | Md | Beam stroke thickness — Sm (1px), Md (1.5px), Lg (3px). |
| DurationMs | int | 8000 | Full-circuit animation duration in milliseconds. Lower = faster orbit. |
| ColorFrom | string? | var(--color-primary) | Gradient start color of the beam. Accepts any valid CSS color. |
| ColorTo | string? | var(--color-primary) | Gradient end color of the beam. Accepts any valid CSS color. |
| ChildContent | RenderFragment? | null | The content to surround with the animated beam border. |
| Class | string? | null | Additional CSS classes. Use to constrain width or set rounded-xl etc. |
Related Components
- BlurFade — Blur + fade-in animation when an element enters the viewport.
- ShimmerButton — Button with an animated shimmer sweep effect.
- Sparkles — Decorative sparkle particles for badges and headings.
- Motion — Overview of all motion primitives in Lumeo.