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
Unlock premium features with a travelling beam border.
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
Size stroke thickness: Sm (1px), Md (1.5px, default), Lg (3px) — see the Beam Sizes demo above.
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.