Light Rays
Volumetric shafts of light streaming from an off-screen edge, fanning and swaying.
canvasinteractive
Customize
Source
Origin
Light spread1
Lower = tighter, more focused cone.
Ray length2
Motion
Speed1
Pulsating
Appearance
Color
Saturation1
Fade distance1
Noise0
Distortion0
Detail8px
Smaller = smoother, heavier.
Interaction
Follow cursor
Cursor influence0.1
Props
| Prop | Type | Default | Description |
|---|---|---|---|
origin | "top-center" | "top-left" | "top-right" | "left" | "right" | "bottom-center" | "bottom-left" | "bottom-right" | "top-center" | Which edge the rays stream from. |
color | string | "255,255,255" | Ray tint as r,g,b (white lets the blue-weighted falloff show). |
speed | number | 1 | Animation speed multiplier (0 = frozen). |
lightSpread | number | 1 | Beam tightness — lower is a tighter, more focused cone. |
rayLength | number | 2 | How far the rays reach, as a multiple of the width. |
pulsating | boolean | false | Gently pulse the whole beam. |
fadeDistance | number | 1 | Distance over which rays fade, as a multiple of the width. |
saturation | number | 1 | Colour saturation (0 = greyscale, 1 = full). |
followMouse | boolean | true | Bend the rays toward the cursor. |
mouseInfluence | number | 0.1 | How strongly the cursor bends the rays (0–1). |
noiseAmount | number | 0 | Animated grain mixed into the rays (0–1). |
distortion | number | 0 | Travelling wobble warping the rays (0–1). |
detail | number | 8 | Canvas shading cell size in px (smaller = smoother, heavier). |
children | ReactNode | — | Content layered above the canvas. |
className | string | — | Extra classes for the wrapper. |