LaserFlow

laser-flow

自顶向下倾泻的体积激光束 WebGL 背景 · 极坐标光束几何 + fbm 噪声雾 + 行进微流光 + 指针牵引倾斜(ogl 去 three·主题感知·reduced-motion 降级)

用法

基础用法

放进 relative + overflow-hidden 的深色容器，LaserFlow 自带 absolute inset-0，内容叠 z-10 即可。

LaserFlow

tsx

<div className="relative h-72 overflow-hidden rounded-xl bg-neutral-950">
  <LaserFlow />
  <div className="relative z-10 flex h-full items-center justify-center">
    LaserFlow
  </div>
</div>

自定义颜色与雾

color 换激光色调，fogIntensity 加雾，fogScale 控雾团细碎度。

tsx

<LaserFlow
  color="oklch(0.72 0.2 35)"
  fogIntensity={0.6}
  fogScale={0.35}
/>

密流光 · 快脉冲

wispDensity/wispIntensity 加密微流光，flowSpeed/flowStrength 增强脉冲感。

瑚琏组件库

体积光 · WebGL · 主题感知

tsx

<LaserFlow
  wispDensity={1.6}
  wispIntensity={6}
  flowSpeed={0.55}
  flowStrength={0.4}
/>

偏移光束

horizontalBeamOffset 横向移动光束，verticalSizing 拉长光束。

tsx

<LaserFlow
  horizontalBeamOffset={-0.18}
  verticalSizing={2.4}
  color="oklch(0.7 0.18 200)"
/>

何时用

作为整屏/整块的 WebGL 体积光背景，自顶向下倾泻激光束 + 雾 + 流光，适合 hero/壁纸级氛围底。要环绕单元素的边框流光用 BorderBeam；要鼠标拖尾烟雾用 GhostCursor。本组件渲染量重，放在容器底层、内容用 relative z-10 叠在其上。

导入

import { LaserFlow } from "@hulianui/ui"

Props

名称	类型	默认	说明
color	`string`	`var(--color-chart-1)`	激光主色，吃明暗主题；任意 CSS 颜色串均可（→ uColor）
horizontalBeamOffset	`number`	`0.0`	横向光束偏移（占视口宽比例），正右负左（→ uBeamXFrac）
verticalBeamOffset	`number`	`0.0`	纵向光束偏移（占视口高比例）（→ uBeamYFrac）
flowSpeed	`number`	`0.35`	光流脉冲速度因子，越大流动越快（→ uFlowSpeed）
verticalSizing	`number`	`2.0`	纵向光束长度因子，越大越长（→ uVLenFactor）
horizontalSizing	`number`	`0.5`	横向耀斑长度因子（→ uHLenFactor）
fogIntensity	`number`	`0.45`	体积雾强度，0=无雾（→ uFogIntensity）
fogScale	`number`	`0.3`	雾噪声缩放，越大雾团越细碎（→ uFogScale）
fogFallSpeed	`number`	`0.6`	雾团下落速度（→ uFogFallSpeed）
wispDensity	`number`	`1`	微流光密度 0–2（→ uWispDensity）
wispSpeed	`number`	`15`	微流光行进速度（→ uWSpeed）
wispIntensity	`number`	`5`	微流光亮度强度（→ uWIntensity）
flowStrength	`number`	`0.25`	光流明暗脉冲强度 0–1（→ uFlowStrength）
decay	`number`	`1.1`	光束衰减相位宽度（→ uDecay）
falloffStart	`number`	`1.2`	光束发光起始衰减（→ uFalloffStart）
mouseTiltStrength	`number`	`0.01`	鼠标牵引雾团倾斜强度；设 0 即关闭鼠标交互（→ uTiltScale）
className	`string`	—	透传根容器（或 reduced-motion fallback div）额外 className

Slots

插槽	类型	说明
fallback	`ReactNode`	reduced-motion / 无 WebGL 时渲染的静态替代内容；缺省为吃 chart token 的纵向 linear-gradient 光束 div

禁忌 / 坑

WebGL（ogl）组件，React StrictMode 双挂载下 cleanup 调 loseContext 会毒化 canvas 复用致空白崩溃，内部应每挂载新建 canvas，见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]。
内容必须用 relative z-10（或更高）叠在 LaserFlow 之上，否则被体积光盖住。
reduced-motion / 无 WebGL 会渲染 fallback（默认渐变 div），不要假设一定有动画。

Playground

光流速度雾强度微流光强度横向偏移

LaserFlow

<div className="relative h-72 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.13 0.02 285)" }}>
  <LaserFlow
    flowSpeed={0.35}
    fogIntensity={0.45}
    wispIntensity={5}
    horizontalBeamOffset={0}
  />
</div>

用法

基础用法

放进 relative + overflow-hidden 的深色容器，LaserFlow 自带 absolute inset-0，内容叠 z-10 即可。

LaserFlow

tsx

<div className="relative h-72 overflow-hidden rounded-xl bg-neutral-950">
  <LaserFlow />
  <div className="relative z-10 flex h-full items-center justify-center">
    LaserFlow
  </div>
</div>

自定义颜色与雾

color 换激光色调，fogIntensity 加雾，fogScale 控雾团细碎度。

tsx

<LaserFlow
  color="oklch(0.72 0.2 35)"
  fogIntensity={0.6}
  fogScale={0.35}
/>

密流光 · 快脉冲

wispDensity/wispIntensity 加密微流光，flowSpeed/flowStrength 增强脉冲感。

瑚琏组件库

体积光 · WebGL · 主题感知

tsx

<LaserFlow
  wispDensity={1.6}
  wispIntensity={6}
  flowSpeed={0.55}
  flowStrength={0.4}
/>

偏移光束

horizontalBeamOffset 横向移动光束，verticalSizing 拉长光束。

tsx

<LaserFlow
  horizontalBeamOffset={-0.18}
  verticalSizing={2.4}
  color="oklch(0.7 0.18 200)"
/>

Props

名称	类型	默认	说明
color	`string`	`var(--color-chart-1)`	激光主色，吃明暗主题；任意 CSS 颜色串均可（→ uColor）
horizontalBeamOffset	`number`	`0.0`	横向光束偏移（占视口宽比例），正右负左（→ uBeamXFrac）
verticalBeamOffset	`number`	`0.0`	纵向光束偏移（占视口高比例）（→ uBeamYFrac）
flowSpeed	`number`	`0.35`	光流脉冲速度因子，越大流动越快（→ uFlowSpeed）
verticalSizing	`number`	`2.0`	纵向光束长度因子，越大越长（→ uVLenFactor）
horizontalSizing	`number`	`0.5`	横向耀斑长度因子（→ uHLenFactor）
fogIntensity	`number`	`0.45`	体积雾强度，0=无雾（→ uFogIntensity）
fogScale	`number`	`0.3`	雾噪声缩放，越大雾团越细碎（→ uFogScale）
fogFallSpeed	`number`	`0.6`	雾团下落速度（→ uFogFallSpeed）
wispDensity	`number`	`1`	微流光密度 0–2（→ uWispDensity）
wispSpeed	`number`	`15`	微流光行进速度（→ uWSpeed）
wispIntensity	`number`	`5`	微流光亮度强度（→ uWIntensity）
flowStrength	`number`	`0.25`	光流明暗脉冲强度 0–1（→ uFlowStrength）
decay	`number`	`1.1`	光束衰减相位宽度（→ uDecay）
falloffStart	`number`	`1.2`	光束发光起始衰减（→ uFalloffStart）
mouseTiltStrength	`number`	`0.01`	鼠标牵引雾团倾斜强度；设 0 即关闭鼠标交互（→ uTiltScale）
className	`string`	—	透传根容器（或 reduced-motion fallback div）额外 className

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时渲染的静态替代内容；缺省为吃 chart token 的纵向 linear-gradient 光束 div

禁忌 / 坑

WebGL（ogl）组件，React StrictMode 双挂载下 cleanup 调 loseContext 会毒化 canvas 复用致空白崩溃，内部应每挂载新建 canvas，见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]。

内容必须用 relative z-10（或更高）叠在 LaserFlow 之上，否则被体积光盖住。

reduced-motion / 无 WebGL 会渲染 fallback（默认渐变 div），不要假设一定有动画。

<div className="relative h-72 overflow-hidden rounded-xl" style={{ background: "oklch(0.13 0.02 285)" }}> <LaserFlow flowSpeed={0.35} fogIntensity={0.45} wispIntensity={5} horizontalBeamOffset={0} /> </div>

LaserFlow

用法

基础用法

自定义颜色与雾

密流光 · 快脉冲

偏移光束

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

LaserFlow

用法

基础用法

自定义颜色与雾

密流光 · 快脉冲

偏移光束

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground