A burst of light rays with controllable color, distortion and ray count.
Colors, motion style, distortion and ray count are wired to the controls underneath. The burst is raymarched in a WebGL fragment shader.
| Prop | Type | Default | Description |
|---|---|---|---|
intensity | number | 2 | Overall brightness multiplier applied after accumulation. |
speed | number | 0.5 | Global time multiplier controlling ray motion & distortion. |
animationType | "rotate" | "rotate3d" | "hover" | "rotate3d" | Core motion style: planar rotation, full 3D rotation, or pointer hover orbit |
colors | string[] | [] | Optional array of hex colors used as a gradient (otherwise spectral) |
distort | number | 0 | Amount of bend/distortion applied to marching space (adds organic wobble) |
paused | boolean | false | Freeze time progression when true (animation stops) |
offset | { x?: number|string; y?: number|string } | { x: 0, y: 0 } | Pixel (or CSS length) offset of focal origin from center |
hoverDampness | number | 0 | Smoothing factor (0-1) for pointer tracking when animationType='hover' |
rayCount | number | undefined | If > 0 applies an angular comb filter to produce discrete ray spokes |
mixBlendMode | CSSProperties['mixBlendMode'] | 'none' | "lighten" | Canvas CSS mix-blend-mode (e.g. lighten, screen) or 'none' for normal |
lightMode | boolean | false | Renders the burst as pigment on a white background instead of light on black. |
Keyboard shortcuts and ARIA behavior.