Light Rays
Volumetric light rays pouring in from above or the side, swaying and breathing as if in a light breeze.
A volumetric light background drawn on canvas 2D: a set of rays pours out from a light-source anchor, each shimmering and swaying slowly, softly fading out at the far end to create a god-rays atmosphere. Foreground content can be layered on top.
Loading preview…
npx shadcn@latest add https://webberui.com/r/light-rays.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
14
60
0.7
1
<LightRays />
Installation
npx shadcn@latest add https://webberui.com/r/light-rays.jsonOr, once registries are configured in components.json, install it as @webberui/light-rays.
Usage
import { LightRays } from "@/components/ui/light-rays";
<LightRays color="#ffe8b0" origin="top" className="h-[340px] w-full rounded-xl">
{/* foreground content */}
</LightRays>origin accepts "top", "top-left", "top-right", "left", "right", or "center", controlling the direction the rays pour from.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "#fff4d6" | Ray color (a CSS color string) |
rayCount | number | 14 | Number of rays — more means denser |
origin | "top" | "top-left" | "top-right" | "left" | "right" | "center" | "top" | Anchor position of the light source |
spread | number | 60 | Total fan-out angle (degrees) |
speed | number | 1 | Animation speed multiplier |
blur | number | 24 | Amount of blur softening the rays (px) |
intensity | number | 0.7 | Overall brightness, 0–1 |
grain | boolean | false | Overlays fine grain |
followMouse | boolean | false | The light source follows the mouse slightly (mouse pointers only) |
children | ReactNode | — | Foreground content layered above the rays |
Accessibility
- When the user has "reduce motion" enabled at the system level, only a static frame of rays is rendered and the animation loop is never entered
- The canvas is marked
aria-hidden— decorative only, so it does not interfere with assistive technology - The ray layer is
pointer-events-noneand never intercepts interaction with the foreground content