LightBeams

Stage lights shining down from the top edge, gently swaying.

Center stage

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/light-beams.json

React
import LightBeams from "@/components/fx/light-beams"

<LightBeams className="px-8 py-24"><h2>Center stage</h2></LightBeams>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) parks each beam at its resting angle.

Prop	Type	Default	Description
count	number	5	Number of beams.
color	string	violet, 50%	Beam colour.
speed	number	8	Seconds per sway.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.