Volumetric light rays/beams with customizable direction.
Every prop is wired to the controls underneath. Move the pointer over the page and the rays lean toward it.
| Prop | Type | Default | Description |
|---|---|---|---|
raysOrigin | string | "top-center" | Origin position of the light rays. Options: 'top-center', 'top-left', 'top-right', 'right', 'left', 'bottom-center', 'bottom-right', 'bottom-left'. |
raysColor | string | "#ffffff" | Color of the light rays in hex format. |
raysSpeed | number | 1 | Animation speed of the rays. |
lightSpread | number | 1 | How wide the light rays spread. Lower values = tighter rays, higher values = wider spread. |
rayLength | number | 2 | Maximum length/reach of the rays. |
pulsating | boolean | false | Enable pulsing animation effect. |
fadeDistance | number | 1.0 | How far rays fade out from origin. |
saturation | number | 1.0 | Color saturation level (0-1). |
followMouse | boolean | true | Make rays rotate towards the mouse cursor. |
mouseInfluence | number | 0.1 | How much mouse affects rays (0-1). |
noiseAmount | number | 0.0 | Add noise/grain to rays (0-1). |
distortion | number | 0.0 | Apply wave distortion to rays. |
lightMode | boolean | false | Renders the rays as ink on a white background. |
Keyboard shortcuts and ARIA behavior.