# Light Rays

> Cast soft animated rays from any edge or corner.

Source: https://www.honestui.com/docs/shaders/light-rays

<ComponentPreview name="light-rays-demo" />

## Overview [#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 [#installation]

<CommandBlock commands="[&#x22;honestui&#x22;]" />

## Usage [#usage]

```tsx
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 [#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 [#api-reference]


  ### `raysOrigin`

type: `&#x22;top-center&#x22; | &#x22;top-left&#x22; | &#x22;top-right&#x22; | &#x22;right&#x22; | &#x22;left&#x22; | &#x22;bottom-center&#x22; | &#x22;bottom-right&#x22; | &#x22;bottom-left&#x22;` · default: `&#x22;top-center&#x22;`

Edge or corner that emits the rays.

  ### `raysColor`

type: `string` · default: `&#x22;#ffffff&#x22;`

Hex color of the light.

  ### `paused`

type: `boolean` · default: `false`

Renders a static frame without pointer tracking or pulsing.

  ### `raysSpeed`

type: `number` · default: `1`

Animation speed.

  ### `lightSpread`

type: `number` · default: `1`

Angular width of the ray field.

  ### `rayLength`

type: `number` · default: `2`

Maximum ray reach.

  ### `pulsating`

type: `boolean` · default: `false`

Adds a subtle intensity pulse.

  ### `fadeDistance`

type: `number` · default: `1`

Distance over which the rays fade.

  ### `saturation`

type: `number` · default: `1`

Color saturation.

  ### `followMouse`

type: `boolean` · default: `true`

Lets the pointer influence ray direction.

  ### `mouseInfluence`

type: `number` · default: `0.1`

Strength of pointer influence.

  ### `noiseAmount`

type: `number` · default: `0`

Texture added to the rays.

  ### `distortion`

type: `number` · default: `0`

Amount of animated angular distortion.

  ### `className`

type: `string`

Class for sizing and positioning the container.