Light Beams
betaRays of light fanning down from a point behind content, swaying slowly — a spotlight for a hero or a launch, in CSS alone.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
- See it in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add light-beamsnpm packages installed: class-variance-authority.
import { LIGHT } from "@/components/ui/light-beams";Default
From The Corner
<LightBeams>
| Prop | Type | Default |
|---|---|---|
blend | "screen" | "normal" | "normal" |
blurSoftness, as a blur radius in pixels. Default 6. | number | 6 |
colorBeam colour: a token or any CSS colour. Default "primary". | string | "primary" |
intensityStrength of the light, 0–1. Default 0.8. | number | 0.8 |
originWhere the light hangs. Default "top". | LightBeamsOrigin | "top" |
raysBeams across the fan. Default 8. | number | 8 |
speedSway speed multiplier; 0 holds the beams still. Default 1. | number | 1 |
spreadWidth of the fan, in degrees. Default 70. | number | 70 |
Plus every attribute of <div>.
Pure decoration: the light is aria-hidden and takes no pointer events, and children render above it in their own layer. It moves only by transform, pauses off-screen, and under reduced motion stands still on its last frame. In forced-colours mode it is removed. Beams lower the contrast of text laid across them; keep headings below the brightest part, or lower `intensity`.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes