Beams Background for React

Twenty curved beams sweep diagonally across the section, each drawing itself from end to end and fading out before it starts again, over faint guide curves. Each beam is an SVG stroke drawn once and uncovered by a sliding window, so the browser's compositor moves it without repainting and nothing runs in JavaScript, and each beam keeps its own 4 to 7.2 second cycle, so they never move in step.

Use it behind a hero or a feature section. For beams that fall and burst on a floor, use Beams Collision; for many monochrome curves with the same drawing motion, Paths; for beams rushing toward you down a tunnel, Warp; for colour light without lines, Aurora.

Installation

Usage

import { Beams } from "@/components/ui/beams";

Beams is a container: give it a size and put your content inside. The beams sit behind the content and scale to cover the box.

<Beams className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Your data, in motion</h1>
</Beams>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<Beams className="fixed inset-0 -z-10" />

Demos

Theme colours

colors takes up to three CSS colours: the gradient's start, middle and end. Here they're three shades of your theme's primary colour, so the beams follow your brand in light and dark.

Speed

speed={0.5} doubles every beam's cycle, for a calmer card.

Accessibility

The beams are decorative: they're hidden from screen readers and never take the pointer, and your content stays on top in normal flow. With reduced motion every beam stops where it is, a still pattern of part-drawn curves. The beams are 1px lines at no more than 60% opacity, so text on top stays readable; keep it in your foreground colour. Nothing flashes.

FAQ

API Reference