LightRays
light-raysProjects pulsing volumetric rays from a configurable origin with pointer steering.
Usage
Basic usage
The default top-center radiates downward from the top center, and the component comes with absolute inset-0 z-0.
LightRays
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<LightRays raysOrigin="top-center" className="opacity-90" />
<div className="relative z-10 flex h-full items-center justify-center text-sm font-medium text-white/80">
LightRays
</div>
</div>Left side shot · Warm color
raysOrigin changes the direction, raysColor transfers warm colors, and lightSpread adjusts the focus.
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<LightRays
raysOrigin="left"
raysColor="oklch(0.78 0.16 70)"
lightSpread={0.8}
className="opacity-90"
/>
</div>Pulsation + Noise texture
pulsating has overall brightness breathing, noiseAmount has superimposed subtle noise.
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<LightRays
raysOrigin="top-center"
pulsating
noiseAmount={0.25}
raysSpeed={1.4}
className="opacity-90"
/>
</div>Bottom up shot · Gathering narrow beam
bottom-center + small lightSpread are gathered into a narrow beam, children is stacked with headers (note: component root aria-hidden).
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<LightRays
raysOrigin="bottom-center"
lightSpread={0.4}
rayLength={2.6}
distortion={0.3}
followMouse={false}
className="opacity-90"
>
<div className="flex h-full flex-col items-center justify-center gap-1">
<p className="text-lg font-semibold text-white">Hulian Component Library</p>
<p className="text-xs text-white/60">Volume Beam · WebGL · token Coloring</p>
</div>
</LightRays>
</div>When to Use
Use it for a hero backdrop of volumetric rays emitted from one of eight origins and deflected by pointer movement. Use LightPillar for one concentrated column, Lightfall for descending illumination, or Lightning for intermittent electric arcs.
Import
ts
import { LightRays } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| raysOrigin | "top-center" | "top-left" | "top-right" | "left" | "right" | "bottom-left" | "bottom-center" | "bottom-right" | "top-center" | Beam emission origin, determines anchor point and propagation direction (four corners/four sides midpoint) |
| raysColor | string | var(--color-chart-1) | Beam color, any CSS color, off-screen canvas parsed to RGB |
| raysSpeed | number | 1 | Blink/rhythm speed multiplier, 0 is almost static (still renders one frame) |
| lightSpread | number | 1 | Beam diffusion angle, the larger it is, the more scattered it is, the smaller it is, the more it is gathered together, it is recommended to be 0.3–3 |
| rayLength | number | 2 | Beam length (multiple of relative viewport width) |
| pulsating | boolean | false | Overall brightness sinusoidal breathing over time |
| fadeDistance | number | 1 | The fade distance along the way (relative to the multiple of the viewport width), the smaller it is, the faster it fades out |
| saturation | number | 1 | Saturation, <1 to remove color and tend to gray, 0=pure gray scale |
| followMouse | boolean | true | Lets the beam direction follow the pointer; mouseInfluence > 0 is required for visible deflection |
| mouseInfluence | number | 0.1 | Pointer influence on beam direction from 0–1; 0 disables deflection |
| noiseAmount | number | 0 | Particle noise intensity (0–1) |
| distortion | number | 0 | Angle distortion strength, making the beam sway rather than straight, recommended 0–1 |
| className | string | — | Root container (comes with pointer-events-none absolute inset-0 z-0) |
| style | CSSProperties | — | Forward the root container inline style |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content overlaid on the beam layer, both WebGL and downgrade paths are rendered |
| fallback | ReactNode | reduced-motion / hidden content superimposed on static gradients without WebGL |
Usage Guidelines
- The component comes with
pointer-events-none absolute inset-0 z-0, and the overlay content must berelative z-10on top of it. followMousedefaults to true, butmouseInfluence > 0is required for visible deflection. SetmouseInfluence={0}for a stationary direction.- ogl/WebGL client only; SSR/no WebGL outsources static gradients and downgrades reduced-motion.
childrenBoth paths are rendered to ensure DOM consistency. raysColorThe--color-prefix token must be used to pass CSS variables, see [[hulian-token-color-var-needs-color-prefix]].- Fullscreen background layers in a non-cascading context parent of an opaque background may be obscured by the parent background, see [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
LightRays
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<LightRays
raysOrigin="top-center"
raysSpeed={1}
lightSpread={1}
rayLength={2}
pulsating={false}
followMouse={true}
className="opacity-90"
/>
</div>