Beams Background

FreeNew

A canvas background of thin vertical rails with beams of light traveling along them over a soft glow.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

gap36

density30

direction

speed1

railOpacity0.07

glow


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/beams-background.json

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

<section className="relative isolate overflow-hidden">
  <BeamsBackground className="-z-10" />
  <h1>Hero content</h1>
</section>

Prop	Type	Default	Description
`gap`	`number`	`36`	Distance between rails in pixels.
`density`	`number`	`30`	Beams in flight per 1000 px of width.
`colors`	`string[]`	`["--chart-1", "--chart-3", "--chart-2"]`	Beam colors: CSS variable names or any CSS colors.
`direction`	`"up" \| "down"`	`"up"`	Direction the beams travel.
`speed`	`number`	`1`	Speed multiplier.
`railOpacity`	`number`	`0.07`	Opacity of the resting rails, 0 to 1.
`glow`	`boolean`	`true`	Add a soft glow at the edge where beams start.

Also accepts all <div> props except children.

Colors are read from the theme at runtime and re-read when the theme changes, so light and dark mode both work.
The canvas is sized for the device pixel ratio (capped at 2), pauses when off-screen or in a background tab, and draws a single still frame under reduced motion.
Fills its nearest positioned parent (absolute inset-0) and is aria-hidden and pointer-events-none.

Guide and examples


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/beams-background.json

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

<section className="relative isolate overflow-hidden">
  <BeamsBackground className="-z-10" />
  <h1>Hero content</h1>
</section>

Prop	Type	Default	Description
`gap`	`number`	`36`	Distance between rails in pixels.
`density`	`number`	`30`	Beams in flight per 1000 px of width.
`colors`	`string[]`	`["--chart-1", "--chart-3", "--chart-2"]`	Beam colors: CSS variable names or any CSS colors.
`direction`	`"up" \| "down"`	`"up"`	Direction the beams travel.
`speed`	`number`	`1`	Speed multiplier.
`railOpacity`	`number`	`0.07`	Opacity of the resting rails, 0 to 1.
`glow`	`boolean`	`true`	Add a soft glow at the edge where beams start.

Also accepts all <div> props except children.

Colors are read from the theme at runtime and re-read when the theme changes, so light and dark mode both work.
The canvas is sized for the device pixel ratio (capped at 2), pauses when off-screen or in a background tab, and draws a single still frame under reduced motion.
Fills its nearest positioned parent (absolute inset-0) and is aria-hidden and pointer-events-none.