Light Rays

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Cast soft animated rays from any edge with optional pointer influence.

light-rays-demo

Overview

Light Rays creates a directional atmospheric wash with controllable spread, length, color, noise, and distortion. It is suited to dark hero surfaces and media where the light source should feel spatially anchored.

Installation

npm install honestui

Usage

import { LightRays } from "honestui/shaders"

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

Accessibility

Light Rays ignores pointer events and should stay decorative. Keep the foreground readable without the rays, and disable followMouse when pointer response would be distracting.

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.
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.
classNamestringClass for sizing and positioning the container.