Lightfall
lightfall隧道光束坠落 WebGL 背景 · 多色光束按高度循环取色 + 中心辉光 + 闪烁/拖尾 + 鼠标牵引(ogl·token·reduced-motion 降级)
用法
基础用法
组件自带 absolute inset-0 z-0，放进 relative 深色容器即可。
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>密集多束（暖橙调）
streakCount 加束 + 自定义暖色 colors，density 调密。
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>壁纸级（慢速·长拖尾·无交互）
speed 调慢 + streakLength 拉长，关 mouseInteraction 当静态背景。
瑚琏组件库
企业级 · 高质量 · 原生适配
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">瑚琏组件库</p>
<p className="text-xs text-white/60">企业级 · 高质量 · 原生适配</p>
</div>
</div>稳定常亮（细光束）
twinkle=0 关闭明暗呼吸，streakWidth 调细。
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>何时用
需要深色 hero 上多色光束坠落、带中心辉光与拖尾的氛围背景时用。要放射状光束（自原点向外）用 LightRays；要单根体积光柱用 LightPillar；只要静态点阵底纹用 DotPattern。
导入
ts
import { Lightfall } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| colors | string[] | ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-4)"] | 光束色板（按高度循环），任意 CSS 颜色，最多取前 8 个 |
| backgroundColor | string | var(--color-primary) | 背景中心辉光底色 |
| speed | number | 0.5 | 坠落速度，0 近似静止（仍渲染） |
| streakCount | number | 2 | 同时坠落的光束条数（1–16，四舍五入夹取） |
| streakWidth | number | 1 | 单束横向宽度系数，越大越粗 |
| streakLength | number | 1 | 单束拖尾长度系数，越大尾迹越长 |
| glow | number | 1 | 整体辉光强度 |
| density | number | 0.6 | 光束角向疏密（环数），越大越密集 |
| twinkle | number | 1 | 闪烁强度，0=常亮，1=明暗呼吸 |
| zoom | number | 3 | 视距缩放（隧道纵深感） |
| backgroundGlow | number | 0.5 | 背景中心辉光强度，0=关闭 |
| opacity | number | 1 | 整体不透明度（写入 shader） |
| mouseInteraction | boolean | true | 鼠标交互（指针增亮 + 牵引光团） |
| mouseStrength | number | 0.5 | 鼠标增亮强度 |
| mouseRadius | number | 1 | 鼠标影响半径 |
| className | string | — | 透传根容器（组件自带 absolute inset-0 z-0） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| fallback | ReactNode | reduced-motion / 无 WebGL 时的静态兜底内容 |
禁忌 / 坑
- 组件自带
absolute inset-0 z-0，叠在它上面的内容须relative z-10，否则被盖住。 - ogl/WebGL 仅客户端；SSR / 无 WebGL 出 fallback，reduced-motion 下降级。
- 全屏背景层在 opaque 背景的非层叠上下文父级里可能被父背景盖成全黑，见 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。
colors/backgroundColor传 CSS 变量须用--color-前缀 token，见 [[hulian-token-color-var-needs-color-prefix]]。
相关
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>