# BackgroundBeams

Source: https://lumeo.nativ.sh/components/background-beams

# BackgroundBeams

Network of animated SVG line segments. Each beam fades in and out with a staggered delay. Subtle ambient hero background.

## When to Use

-   Hero or CTA sections needing subtle motion without distracting from the copy.
-   Dark-mode pages where faint beam lines add depth.
-   Pricing or feature comparison sections as a background layer.

Preview Code

Hero Background

## Start Building

Copy Code

Preview Code

Dense Beams (20)

20 beams

Copy Code

## API Reference

### BackgroundBeams

Property

Type

Default

Description

Count

int

12

Number of beam line segments.

ChildContent

RenderFragment?

null

Content layered above the beams.

Class

string?

null

Additional CSS classes.

## Related Components

-   [AuroraBackground](/components/aurora-background) — Northern-lights gradient animation.
-   [AnimatedBeam](/components/animated-beam) — Single beam connecting two elements.