Animated light rays emanating from the side with customizable colors and speed.
Colors, origin and ray settings are wired to the controls underneath. The rays are drawn in a WebGL fragment shader.
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 2.5 | Animation speed of the rays. |
rayColor1 | string | "#EAB308" | Color of the first ray layer in hex format. |
rayColor2 | string | "#96c8ff" | Color of the second ray layer in hex format. |
intensity | number | 2 | Overall brightness of the rays. |
spread | number | 2 | Angular width of the ray fan. Higher values create a wider spread between the two ray layers. |
origin | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | Corner of the canvas from which the rays emerge. |
tilt | number | 0 | Rotation of the ray fan in degrees. Positive values tilt clockwise. |
saturation | number | 1.5 | Color saturation of the rays. 0 renders in grayscale, values above 1 boost color. |
blend | number | 0.75 | Balance between the two ray layers. 0 is all ray 1, 1 is all ray 2. |
falloff | number | 1.6 | How steeply brightness diminishes with distance from the source. Higher means a tighter glow. |
opacity | number | 1.0 | Overall opacity of the effect. |
Keyboard shortcuts and ARIA behavior.