Light Rays
Shafts of light fanning down from above, flickering slowly and bending toward the pointer.
import { LightRays } from "pleate/effects/light-rays";Behind a headline
Let the light in
Props
- originX
Horizontal position of the light source, 0 (left) to 1 (right).
numberdefault 0.5- spread
Width of the fan of rays.
numberdefault 1- length
How far the rays reach (in canvas heights).
numberdefault 1.2- colors
CSS colors or tokens: the light. Defaults follow the palette.
string[]- speed
Playback speed.
numberdefault 1- scale
Pattern size; above 1 is bigger.
numberdefault 1- interactive
React to the pointer over the parent.
booleandefault true
Accessibility
- Decorative: the canvas is aria-hidden and ignores pointer events, so content on top stays usable.
- Pauses off screen and in hidden tabs; with reduced motion it shows a still frame.
- Fills its parent: give the parent position relative and the background absolute inset-0.