Side Rays

Documentation Index

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

Blend two colors into directional rays that enter from a chosen corner.

side-rays-demo

Overview

Side Rays creates a denser, two-color beam field from one corner of its container. Use it as a controlled atmospheric layer behind a focal object or short piece of display content.

Installation

npm install honestui

Usage

import { SideRays } from "honestui/shaders"

<div className="h-80 bg-black">
  <SideRays
    className="size-full"
    origin="top-right"
    rayColor1="#ffbf69"
    rayColor2="#7fb3ff"
  />
</div>

Accessibility

Side Rays ignores pointer events and should remain decorative. Preserve a static background color beneath it and verify the contrast of any foreground content.

API Reference

PropTypeDefaultDescription
speednumber2.5Animation speed.
rayColor1string"#EAB308"Primary ray color.
rayColor2string"#96c8ff"Secondary ray color.
intensitynumber2Overall light intensity.
spreadnumber2Width of the ray field.
origintop-right|top-left|bottom-right|bottom-left"top-right"Corner that emits the rays.
tiltnumber0Angular offset of the field.
saturationnumber1.5Output color saturation.
blendnumber0.75Mix between the two ray colors.
falloffnumber1.6Rate at which rays fade.
opacitynumber1Overall effect opacity.
classNamestringClass for sizing and positioning the container.