BackgroundsProNew
Light Rays
Soft light beams fall from the top and slowly sway. A calm backdrop for a hero section.
Customize
color
Based on Light Rays (MIT license) · Terms of use
Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| count | number | 7 | Number of rays. |
| color | string | "rgba(255, 255, 255, 0.18)" | Ray color. Works best with some transparency. |
| blur | number | 36 | Ray blur, in pixels. |
| speed | number | 14 | Cycle length of a ray, in seconds. Higher is slower. |
| length | string | "70vh" | Ray length in any CSS unit. |
| className | string | — | Classes for the rays layer. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge