Creates animated light beams that rise from the bottom of your section. Perfect for hero sections, product showcases, and adding depth to backgrounds.

Watch the beams rise

Colors

Beam Colors color picker (minimum 2)

Choose at least 2 colors for your beams. The effect smoothly blends between all your colors across different beams. More colors create more variety.

Default: Cyan, Magenta, Green, Orange

Appearance

Intensity subtle / medium / strong

Controls how bright and visible the beams are. Subtle is gentle and ambient, medium is balanced, strong is bold and eye-catching.

Default: Strong

Beam Count 10-60

How many beams appear at once. More beams create a denser, fuller look. Fewer beams feel more spacious and minimal.

Default: 30

Blur Amount 0-40 pixels

How soft and diffused the beams look. Higher values create a dreamy, ethereal effect. Lower values make sharper, more defined beams.

Default: 15

Animation

Speed 0.1-3.0

How fast the beams rise upward. 1.0 is normal speed, lower is slower and more relaxed, higher is faster and more energetic.

Default: 1.0

Advanced

Minimum Width 50-300 pixels

The thinnest a beam can be. Smaller values create more variety in beam thickness.

Default: 100

Maximum Width 100-500 pixels

The thickest a beam can be. Larger values allow for bolder, wider beams.

Default: 200

Performance

This element uses canvas animation which requires moderate resources. It automatically pauses when scrolled out of view to save performance. Best used once or twice per page.