SideRays
side-raysFans two animated light beams from a screen corner with adjustable blending.
Usage
Basic usage
By default, it diverges from the upper right corner and eats chart-1/chart-2 token in two bundles; it comes with absolute inset-0 z-0 when placed in the relative container.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<SideRays opacity={0.85} />
</div>Starting corner · Custom color
origin four corners are optional, rayColor1/rayColor2 specifies double beam colors to be superimposed into mixed colors.
<SideRays
origin="bottom-left"
rayColor1="oklch(0.78 0.18 70)"
rayColor2="oklch(0.7 0.22 30)"
intensity={2.4}
opacity={0.8}
/>Come together · High intensity
spread is turned down to make the two beams gather into a beam of light, intensity is brightened, and falloff is controlled to attenuate with distance.
<SideRays spread={1} intensity={3} falloff={1.9} opacity={0.9} />Color removal · Slight tilt
saturation=0 Grayscale beam (minimalist style), tilt rotates the entire sector around the light source point.
<SideRays saturation={0} tilt={18} opacity={0.7} />When to Use
You want a slowly swinging volumetric light beam that shoots out from a corner (hero/landing page side lighting). If you want the center spotlight to follow the mouse, use Spotlight; if you want full-screen dot/line texture, use DotPattern / StripedPattern; SideRays is the only special "side light" in this family that emits dual beams from any starting point of the four corners and can adjust the angle/color mixing/saturation.
Import
import { SideRays } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 2.5 | Beam animation speed factor (2nd beam 0.2× slow dephasing), mapped GLSL iSpeed |
| rayColor1 | string | var(--color-chart-1) | Main beam color, any CSS color string |
| rayColor2 | string | var(--color-chart-2) | Auxiliary beam color, superimposed with the main color to produce a mixed color |
| intensity | number | 2 | Overall brightness intensity, too high will easily overexpose |
| spread | number | 2 | Beam opening angle (sector width), the smaller it is, the more it will gather together |
| origin | "top-left"|"top-right"|"bottom-left"|"bottom-right" | "top-right" | Beam divergence corner starting point |
| tilt | number | 0 | Overall tilt angle of the beam (degrees), rotating sector around the light source point |
| saturation | number | 1.5 | Saturation, 1=primary color / >1 enhance color / 0=remove color |
| blend | number | 0.75 | Two-bundle color mixing ratio (0–1), 0=primary color only / 1=secondary color only |
| falloff | number | 1.6 | The brightness attenuation index with distance, the larger it is, the more concentrated it is near the light source |
| opacity | number | 1 | Overall opacity (0–1), commonly used for overlay content 0.5–0.8 |
| className | string | — | Additional class name for the root container; the component includes absolute inset-0 z-0 |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | reduced-motion / static alternative content without WebGL (default radial-gradient div) |
Usage Guidelines
- WebGL requires client rendering; the component already declares
"use client"and can be placed beneath a server-rendered page boundary. - The component comes with
absolute inset-0 z-0, and the parent container must have positioning + size +overflow-hidden, otherwise it will not be visible. - High
intensitycan clip to white. Useopacityaround 0.5–0.8 when rays sit beneath content. - Under reduced motion or without WebGL, the component renders a directional static fallback. Do not rely on the swing to convey information.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<SideRays
speed={2.5}
intensity={2}
spread={2}
origin="top-right"
opacity={0.85}
/>
</div>