Volumetric light rays fanning out from a point near the top, slowly swaying and pulsing with a radial falloff and additive blending.
npx shadcn@latest add https://hyperblur.dev/r/light-rays.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/light-rays.tsx.
import { LightRays } from "@/components/hyperblur/light-rays"
<div className="relative"><LightRays /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Ray color. |
| rays | number | 12 | Number of rays (1 to 64). |
| origin | "top" | "top-left" | "top-right" | "top" | Where the light comes from. |
| speed | number | 1 | Sway and pulse speed multiplier. |
| spread | number | 60 | Total angle covered by the rays, in degrees. |
| intensity | number | 0.6 | Brightness from 0 to 1. |
| seed | number | 1 | Same seed, same ray layout. |