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 />
9 tests across 1 file. Auto-generated from the test suite.
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 (all 7 Lumeo.Size rungs are supported).
Size = Md
Drag the slider to change how fast the beam orbits (lower = faster).
DurationMs = 8000
8000 ms per orbit
API Reference
BorderBeam
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | Content wrapped inside the beamed border, rendered as the element the animated border traces around. |
| Size | Lumeo.Size | Lumeo.Size.Md | Thickness of the animated border beam. Supports all 7 Size values (Xxs–Xxl). Defaults to Md (1.5px). |
| DurationMs | int | 8000 | How long, in milliseconds, one full loop of the beam animation takes. Defaults to 8000 (8s). |
| ColorFrom | string? | — | Starting color of the beam. Accepts any CSS color — defaults to var(--color-primary). |
| ColorTo | string? | — | Ending color of the beam. Accepts any CSS color — defaults to var(--color-primary). |
| Class | string? | — | Additional CSS classes merged onto the root div. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the root div. |
Size supports all 7 Lumeo.Size values (Xxs–Xxl) as stroke thickness:
Xxs (0.5px), Xs (0.75px), Sm (1px), Md (1.5px, default), Lg (3px), Xl (4px), Xxl (5px) —
see the Beam Sizes / Beam Size (interactive) demos 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.