Skip to documentation content
|

Light Rays

Cast soft animated rays from any edge or corner.

light-rays-demo

Overview

Light Rays creates a directional atmospheric wash with controllable spread, length, color, noise, and distortion. It can originate from any edge or corner of its container.

Installation
npm install honestui

Usage

 
import { LightRays } from "honestui/shaders"

<div className="h-80 bg-black">
  <LightRays
    className="size-full"
    raysColor="#b8d6ff"
    raysOrigin="top-right"
    lightSpread={0.72}
    followMouse={false}
  />
</div>

Accessibility

Light Rays ignores pointer events and should stay decorative. Keep the foreground readable without the rays. The component renders a static frame when the user enables reduced motion; use paused for application-specific control. Provide a static background when WebGL is unavailable.

API Reference
PropTypeDefaultDescription
raysOrigintop-center|top-left|top-right|right|left|bottom-center|bottom-right|bottom-left"top-center"Edge or corner that emits the rays.
raysColorstring"#ffffff"Hex color of the light.
pausedbooleanfalseRenders a static frame without pointer tracking or pulsing.
raysSpeednumber1Animation speed.
lightSpreadnumber1Angular width of the ray field.
rayLengthnumber2Maximum ray reach.
pulsatingbooleanfalseAdds a subtle intensity pulse.
fadeDistancenumber1Distance over which the rays fade.
saturationnumber1Color saturation.
followMousebooleantrueLets the pointer influence ray direction.
mouseInfluencenumber0.1Strength of pointer influence.
noiseAmountnumber0Texture added to the rays.
distortionnumber0Amount of animated angular distortion.
classNamestring–Class for sizing and positioning the container.