Lightfall
lightfallCycles colored light shafts through a falling tunnel with glow and pointer pull.
Usage
Basic usage
The component comes with absolute inset-0 z-0, just put it into the relative dark container.
Lightfall
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<Lightfall />
<div className="relative z-10 flex h-full items-center justify-center text-sm font-medium text-white/80">
Lightfall
</div>
</div>Dense multi-beam (warm orange tone)
streakCount adds more beams, colors sets a custom warm palette, and density controls spacing.
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<Lightfall
streakCount={6}
density={1.2}
colors={[
"var(--color-chart-3)",
"var(--color-chart-1)",
"oklch(0.74 0.2 35)",
]}
glow={1.3}
/>
</div>Wallpaper level (slow speed·long tail·no interaction)
speed slows down + streakLength stretches, turns off mouseInteraction as a static background.
Hulian component library
Enterprise-grade · High quality · Native-ready
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<Lightfall
speed={0.25}
streakCount={3}
streakLength={1.8}
backgroundGlow={0.8}
mouseInteraction={false}
/>
<div className="relative z-10 flex h-full flex-col items-center justify-center gap-2">
<p className="text-lg font-semibold text-white">Hulian Component Library</p>
<p className="text-xs text-white/60">Enterprise level · High quality · Native adaptation </p>
</div>
</div>Stable and always bright (thin beam)
twinkle=0 turns off light and dark breathing, streakWidth adjusts fine.
tsx
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<Lightfall twinkle={0} streakWidth={0.7} streakCount={4} />
</div>When to Use
Use Lightfall behind a dark hero or immersive dashboard when several colored streaks should fall through a tunnel-like depth field. Tune streak count and trails sparingly so foreground copy remains legible. Choose LightRays for rays emitted from one origin, LightPillar for one continuous column, or DotPattern for a static texture.
Import
ts
import { Lightfall } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-4)"] | Beam palette sampled cyclically by depth; accepts CSS colors and uses at most the first eight entries |
| backgroundColor | string | var(--color-primary) | Color of the soft glow at the tunnel center |
| speed | number | 0.5 | Falling-speed multiplier; 0 freezes the time-driven falling and twinkle state while still rendering the field |
| streakCount | number | 2 | Simultaneous streak count, rounded and clamped from 1 to 16 |
| streakWidth | number | 1 | Horizontal width multiplier for each streak |
| streakLength | number | 1 | Trail-length multiplier for each streak |
| glow | number | 1 | Overall beam-glow multiplier |
| density | number | 0.6 | Angular spacing of beam rings; higher values pack them more densely |
| twinkle | number | 1 | Brightness variation; 0 keeps streaks steady and 1 enables full pulsing |
| zoom | number | 3 | View-distance scale controlling the tunnel's apparent depth |
| backgroundGlow | number | 0.5 | Strength of the central background glow; 0 removes it |
| opacity | number | 1 | Overall shader opacity |
| mouseInteraction | boolean | true | Enable pointer-local brightening and attraction when pointer input reaches the canvas |
| mouseStrength | number | 0.5 | Strength of the pointer highlight and attraction |
| mouseRadius | number | 1 | Radius of pointer influence in shader space |
| className | string | — | Class name forwarded to the absolute inset-0 z-0 live or fallback root |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Decorative content rendered inside the static gradient cover when reduced motion is enabled; the fallback root is aria-hidden |
Usage Guidelines
- Lightfall is an
absolute inset-0 z-0decorative layer. Give its parentposition: relative, explicit dimensions, and clipping; keep foreground content atrelative z-10or above. - During SSR, the live root has no canvas. After hydration, a canvas is appended before OGL import and scene setup; if either step fails, that uninitialized or blank canvas remains and Lightfall does not switch to the reduced-motion fallback. Reduced motion instead renders the static gradient plus decorative
fallbackcontent. - The live root defaults to
pointer-events-none. Addpointer-events-autothroughclassNameifmouseInteractionshould receive pointer movement, and keep covering foreground layers from intercepting those events. - An opaque parent or unexpected stacking context can cover the full-size canvas. If rendering succeeds but the effect is invisible, inspect those layers; see [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]].
- CSS variables in
colorsandbackgroundColorrequire full names such asvar(--color-chart-1). See [[hulian-token-color-var-needs-color-prefix]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
Lightfall
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.13 0.02 265)" }}>
<Lightfall
streakCount={2}
speed={0.5}
glow={1}
mouseInteraction={true}
/>
</div>