Beams
beams流动体积光柱 WebGL 背景 · perlin 噪声扰动起伏 + 方向光受光梯度 + 倾斜光幕 + 胶片颗粒(ogl·token·reduced-motion 降级静态渐变)
用法
基础用法
放进 relative 容器铺满，默认斜射光束，光色吃 chart token。
Beams
tsx
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Beams />
</div>密集竖直光幕
rotation=0 竖直，调高 beamNumber、调窄 beamWidth 形成密集光幕。
tsx
<Beams beamNumber={20} beamWidth={1.4} rotation={0} speed={3} />自定义光色
lightColor 传任意 CSS 颜色，beamWidth 加宽营造暖橙宽束。
tsx
<Beams
lightColor="oklch(0.78 0.18 55)"
beamNumber={8}
beamWidth={3}
rotation={20}
scale={0.3}
/>纯净无颗粒（壁纸级）
noiseIntensity=0 去颗粒、慢速，作为内容承托背景。
瑚琏组件库
企业级 · 高质量 · 原生适配
tsx
<Beams noiseIntensity={0} speed={1} beamNumber={14} rotation={35} />何时用
需要冷感、有纵深的斜射体积光背景时用（科技产品 Hero、暗色落地页）。要规则点阵/网格底纹用 DotPattern / GridPattern；要油彩旋涡用 Balatro；Beams 是条带状流动光幕，强调方向感与胶片质感，适合做主视觉满铺背景。
导入
ts
import { Beams } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| beamNumber | number | 12 | 光束数量（纵向条带数），建议 4–24，过大低端设备糊成一片 |
| beamWidth | number | 2 | 单束光的相对宽度，越大束间缝隙越窄 |
| speed | number | 2 | 光束沿轴流动速度；0=静止（仍保留静态纹理） |
| lightColor | string | --color-chart-1 | 光束颜色，CSS 颜色字符串，默认取主题 token 明暗自适应 |
| noiseIntensity | number | 1.75 | 颗粒噪声强度，模拟胶片质感；0=纯净无颗粒 |
| scale | number | 0.2 | 噪声纹理缩放，越小波纹越舒展，越大越细碎 |
| rotation | number | 30 | 整组光束旋转角度（度）；0=垂直，正值顺时针斜射 |
| className | string | — | 透传到根容器（根自带 absolute inset-0 z-0） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| fallback | ReactNode | reduced-motion / 无 WebGL 时降级渲染的静态内容（叠在渐变兜底之上） |
禁忌 / 坑
- WebGL 客户端渲染：依赖 ogl + WebGL，SSR 阶段降级到
fallback（静态渐变）；勿在 server component 直接挂载。 - token 颜色须带 `--color-` 前缀：
lightColor传 CSS 变量须写var(--color-chart-1)完整名，裸var(--chart-1)不解析。见 [[hulian-token-color-var-needs-color-prefix]]。 beamNumber过大（>24）在低性能设备会糊成一片，且吃 GPU。- 父容器须
relative+overflow-hidden。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
Beams
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<Beams
beamNumber={12}
beamWidth={2}
speed={2}
scale={0.2}
rotation={30}
noiseIntensity={1.75}
/>
</div>