# BorderBeam

Source: https://lumeo.nativ.sh/components/border-beam

# 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

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Motion

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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 `ColorFrom` and `ColorTo` to match your brand — or use the default primary theme color.

Preview Code

Featured Card

### Pro plan

Popular

Unlock premium features with a travelling beam border.

$29 /mo

Start free trial

Preview Code

Custom Colors

Violet beam

Amber beam

Teal beam

Preview Code

Beam Sizes

Sm (1px)

Md (1.5px)

Lg (3px)

Preview Code

Slow Rotation

DurationMs="20000" — a slow, meditative orbit.

Preview Code

Beam Size (interactive)

Pick a size to see the beam thickness change live.

SmMdLg

Size = Md

Preview Code

Orbit Speed (interactive)

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](/components/blur-fade) — Blur + fade-in animation when an element enters the viewport.
-   [ShimmerButton](/components/shimmer-button) — Button with an animated shimmer sweep effect.
-   [Sparkles](/components/sparkles) — Decorative sparkle particles for badges and headings.
-   [Motion](/components/motion) — Overview of all motion primitives in Lumeo.