PlasmaWave

plasma-wave

等离子波 WebGL 背景 · raymarch 双丝带交织流动 + 双色权重混合(ogl·主题感知 chart token·reduced-motion 静态渐变降级)

用法

基础用法

放进 relative overflow-hidden 容器并给 className="absolute inset-0" 铺满；双色默认取 chart token 明暗自适应。

PlasmaWave

tsx

<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
  <PlasmaWave className="absolute inset-0" />
  <div className="absolute inset-0 flex items-center justify-center text-white/80">
    PlasmaWave
  </div>
</div>

斜向旋转 + 强焦距

rotationDeg 整体旋转波带制造斜向张力；focalLength 越大波纹越聚拢、纵深越强。

tsx

<PlasmaWave className="absolute inset-0" rotationDeg={28} focalLength={1.3} />

对冲流向 · 暖色

colors 自定义双色；dir2={-1} 让第二条丝带反向流动，与第一条对冲产生交织感。

tsx

<PlasmaWave
  className="absolute inset-0"
  colors={["var(--color-chart-3)", "oklch(0.72 0.22 30)"]}
  dir2={-1}
  speed1={0.1}
  speed2={0.08}
  bend1={1.4}
/>

壁纸级慢速大弯曲

低速 + 大 bend 让波纹缓慢起伏，作为标题区背景叠在文字下方。

瑚琏组件库

等离子波 · WebGL · 主题感知

tsx

<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
  <PlasmaWave
    className="absolute inset-0"
    speed1={0.03}
    speed2={0.03}
    bend1={1.6}
    bend2={1.2}
    focalLength={0.6}
  />
  <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
    <p className="text-lg font-semibold text-white">瑚琏组件库</p>
    <p className="text-xs text-white/60">等离子波 · WebGL · 主题感知</p>
  </div>
</div>

何时用

需要一层「双色丝带交织流动」的高级氛围背景（Hero、品牌页）时用它，双流速 + 弯曲 + 旋转可调出丰富波带构图。要单色克制的等离子流选 Plasma，要液态色团翻涌选 LiquidEther，要点阵几何选 DotPattern；本组件是双丝带交织，节奏更复杂、视觉更绵密。

导入

import { PlasmaWave } from "@hulianui/ui"

Props

名称	类型	默认	说明
colors	`string[]`	`["var(--color-chart-1)","var(--color-chart-2)"]`	双色，任意 CSS 颜色串；只取前两色（uColor1/uColor2），多传忽略；随明暗主题切换
xOffset	`number`	`0`	丝带水平偏移（设备像素），让波纹焦点离开正中
yOffset	`number`	`0`	丝带垂直偏移（设备像素）
rotationDeg	`number`	`0`	整体旋转角度（度），把横向波带斜向铺排更有张力
focalLength	`number`	`0.8`	焦距（视线收束）；越大越聚拢纵深越强，越小越铺展。建议 0.4–1.6
speed1	`number`	`0.05`	第一条丝带流速；越大越快
speed2	`number`	`0.05`	第二条丝带流速
dir2	`number`	`1`	第二条丝带流向（+1 同向 / -1 反向），与第一条对冲产生交织感
bend1	`number`	`1`	第一条丝带弯曲幅度；越大起伏越夸张
bend2	`number`	`0.5`	第二条丝带弯曲幅度
className	`string`	—	透传到 canvas 容器或 fallback div；常用于尺寸/圆角/opacity（如 `absolute inset-0 opacity-80`）

Slots

插槽	类型	说明
fallback	`ReactNode`	reduced-motion / 无 WebGL 时的静态替代内容；覆盖在静态渐变之上

禁忌 / 坑

与同族组件不同，PlasmaWave 不自带定位 class，须自己传 className="absolute inset-0" 铺满 relative 父容器，叠加内容用 absolute inset-0 / relative z-10 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。
WebGL 客户端组件（"use client"）；SSR 阶段只渲染 fallback。
colors 传 var(--color-…) 时经离屏 canvas 解析，须带 `--color-` 前缀，裸 var(--primary) 解析失败 [[oklch-css-var-color-must-parse-via-offscreen-canvas]]。
headless 截图常拍到静止/空白帧（rAF 动画被饿死），真机或 Playwright 实测才能看到流动 [[recharts-headless-screenshot-blank-clippath-animation-starved]]。

Playground

旋转角度 °焦距丝带1 流速丝带2 流速丝带1 弯曲丝带2 弯曲

<div className="relative h-56 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.14 0.02 280)" }}>
  <PlasmaWave
    className="absolute inset-0"
    rotationDeg={0}
    focalLength={0.8}
    speed1={0.05}
    speed2={0.05}
    bend1={1}
    bend2={0.5}
  />
</div>

用法

基础用法

放进 relative overflow-hidden 容器并给 className="absolute inset-0" 铺满；双色默认取 chart token 明暗自适应。

PlasmaWave

tsx

<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
  <PlasmaWave className="absolute inset-0" />
  <div className="absolute inset-0 flex items-center justify-center text-white/80">
    PlasmaWave
  </div>
</div>

斜向旋转 + 强焦距

rotationDeg 整体旋转波带制造斜向张力；focalLength 越大波纹越聚拢、纵深越强。

tsx

<PlasmaWave className="absolute inset-0" rotationDeg={28} focalLength={1.3} />

对冲流向 · 暖色

colors 自定义双色；dir2={-1} 让第二条丝带反向流动，与第一条对冲产生交织感。

tsx

<PlasmaWave
  className="absolute inset-0"
  colors={["var(--color-chart-3)", "oklch(0.72 0.22 30)"]}
  dir2={-1}
  speed1={0.1}
  speed2={0.08}
  bend1={1.4}
/>

壁纸级慢速大弯曲

低速 + 大 bend 让波纹缓慢起伏，作为标题区背景叠在文字下方。

瑚琏组件库

等离子波 · WebGL · 主题感知

tsx

<div className="relative h-56 overflow-hidden rounded-xl bg-neutral-950">
  <PlasmaWave
    className="absolute inset-0"
    speed1={0.03}
    speed2={0.03}
    bend1={1.6}
    bend2={1.2}
    focalLength={0.6}
  />
  <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
    <p className="text-lg font-semibold text-white">瑚琏组件库</p>
    <p className="text-xs text-white/60">等离子波 · WebGL · 主题感知</p>
  </div>
</div>

何时用

Props

名称	类型	默认	说明
colors	`string[]`	`["var(--color-chart-1)","var(--color-chart-2)"]`	双色，任意 CSS 颜色串；只取前两色（uColor1/uColor2），多传忽略；随明暗主题切换
xOffset	`number`	`0`	丝带水平偏移（设备像素），让波纹焦点离开正中
yOffset	`number`	`0`	丝带垂直偏移（设备像素）
rotationDeg	`number`	`0`	整体旋转角度（度），把横向波带斜向铺排更有张力
focalLength	`number`	`0.8`	焦距（视线收束）；越大越聚拢纵深越强，越小越铺展。建议 0.4–1.6
speed1	`number`	`0.05`	第一条丝带流速；越大越快
speed2	`number`	`0.05`	第二条丝带流速
dir2	`number`	`1`	第二条丝带流向（+1 同向 / -1 反向），与第一条对冲产生交织感
bend1	`number`	`1`	第一条丝带弯曲幅度；越大起伏越夸张
bend2	`number`	`0.5`	第二条丝带弯曲幅度
className	`string`	—	透传到 canvas 容器或 fallback div；常用于尺寸/圆角/opacity（如 `absolute inset-0 opacity-80`）

插槽

类型

说明

fallback

ReactNode

reduced-motion / 无 WebGL 时的静态替代内容；覆盖在静态渐变之上

禁忌 / 坑

与同族组件不同，PlasmaWave 不自带定位 class，须自己传 className="absolute inset-0" 铺满 relative 父容器，叠加内容用 absolute inset-0 / relative z-10 [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]]。

WebGL 客户端组件（"use client"）；SSR 阶段只渲染 fallback。

colors 传 var(--color-…) 时经离屏 canvas 解析，须带 `--color-` 前缀，裸 var(--primary) 解析失败 [[oklch-css-var-color-must-parse-via-offscreen-canvas]]。

headless 截图常拍到静止/空白帧（rAF 动画被饿死），真机或 Playwright 实测才能看到流动 [[recharts-headless-screenshot-blank-clippath-animation-starved]]。

Playground

旋转角度 °焦距丝带1 流速丝带2 流速丝带1 弯曲丝带2 弯曲

<div className="relative h-56 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.14 0.02 280)" }}>
  <PlasmaWave
    className="absolute inset-0"
    rotationDeg={0}
    focalLength={0.8}
    speed1={0.05}
    speed2={0.05}
    bend1={1}
    bend2={0.5}
  />
</div>

PlasmaWave

用法

基础用法

斜向旋转 + 强焦距

对冲流向 · 暖色

壁纸级慢速大弯曲

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

PlasmaWave

用法

基础用法

斜向旋转 + 强焦距

对冲流向 · 暖色

壁纸级慢速大弯曲

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground