Beams Background: Free React + Tailwind Component

A canvas background of beams streaming continuously along a diagonal path, with palette, angle, glow, and cursor-driven acceleration.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add beams-background.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Beam countbeamCount

Flow angleangle

Flow speed multiplierspeed

Beam widthbeamWidth

Glow strengthglow

Noise overlaygrain

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<BeamsBackground/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/beams-background.en.json

Or, once registries are configured in components.json, install it as @webberui/beams-background.

Usage

import { BeamsBackground } from "@/components/ui/beams-background";

<BeamsBackground
  interactive
  grain
  className="flex h-[420px] items-center justify-center"
>
  <h1 className="text-4xl font-bold">Ship in the light.</h1>
</BeamsBackground>

The beams are drawn on canvas 2D and driven by requestAnimationFrame, with a rotated coordinate system that makes every beam stream along one shared angle. Foreground content is layered above the beams, and the layout (centering, height, corner radius) goes straight on className.

Props

Prop	Type	Default	Description
`beamCount`	`number`	`18`	Number of beams
`colors`	`string[]`	Cool-toned palette	Beam colors, applied by cycling through the list
`angle`	`number`	`14`	Flow direction in degrees — 0 is straight down, positive values lean right
`speed`	`number`	`1`	Flow speed multiplier — higher flows faster
`beamWidth`	`number`	`2`	Base beam width (px); each beam varies randomly around this baseline
`glow`	`number`	`8`	Glow strength: the amount of blur applied to the canvas (px)
`interactive`	`boolean`	`false`	Beams speed up when the cursor enters the container (mouse only)
`grain`	`boolean`	`false`	Overlays low-opacity grain to reduce banding across large glows
`children`	`ReactNode`	—	Foreground content layered above the beams
`className`	`string`	—	Container styling (layout, height, corner radius, and so on)

How it works

Each beam sweeps along the local Y axis of a rotated coordinate system, which is why every beam shares one flow direction; angle merely rotates the whole field, so it costs nothing in performance.
Beam width, length, flow speed, and opacity are all randomly distributed, avoiding the mechanical look of perfect uniformity; glow softens the image with a GPU-accelerated CSS filter: blur rather than blurring beam by beam.
Each beam's color is taken by cycling through colors, so the palette length does not need to match beamCount.
The canvas scales with devicePixelRatio (capped at 2x) and draws in CSS pixels, with a ResizeObserver watching the container size and redrawing automatically.

Accessibility

When the user has "reduce motion" enabled at the system level, only a single static frame of beams is drawn, the animation loop never starts, and cursor interaction is disabled.
The entire beam layer carries aria-hidden and pointer-events-none — decorative only, so it interferes with neither clicks on nor announcement of the foreground content.
On unmount the component cleans up its requestAnimationFrame and ResizeObserver, leaving no background loop behind.

Beams Background