WavyBackground
wavy-background噪声波浪 · canvas 多彩波浪带叠加 + 内联零依赖 value noise + chart token + reduced-motion 静态
用法
基础用法
WavyBackground 自带 canvas 背景 + 居中内容层，children 直接放标题即可；默认吃 chart token。
WavyBackground
tsx
<WavyBackground containerClassName="h-64 w-full">
<span className="text-sm font-medium text-foreground">WavyBackground</span>
</WavyBackground>动画速度
speed="slow" 让波浪更缓更松弛，"fast" 更活跃。
slow
tsx
<WavyBackground speed="slow" containerClassName="h-64 w-full">
<span className="text-sm font-medium text-foreground">slow</span>
</WavyBackground>模糊强度
blur 控制波带柔和度，blur=0 时边缘锐利、波带轮廓清晰。
blur=0
tsx
<WavyBackground blur={0} containerClassName="h-64 w-full">
<span className="text-sm font-medium text-foreground">blur=0</span>
</WavyBackground>自定义颜色
colors 传一组色值（推荐 5 条）定制品牌波浪带。
custom
tsx
<WavyBackground
colors={["#a855f7", "#6366f1", "#c084fc", "#818cf8", "#a855f7"]}
blur={8}
containerClassName="h-64 w-full"
>
<span className="text-sm font-medium text-white">custom</span>
</WavyBackground>何时用
需要柔和流动的彩色波浪带背景（Hero / 营销区块）时用。基于 canvas + 内联零依赖噪声，自带 reduced-motion 静帧降级；相比纯 CSS 的 Aurora 质感更"液态"但有 canvas 开销；若要规则几何底纹用 GridPattern / DotPattern。valueNoise2D 为内部噪声函数导出，自定义波形时可复用。
导入
ts
import { WavyBackground, valueNoise2D } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| colors | string[] | chart token | 波浪颜色列表，任意 CSS 颜色字符串（含 var(--…)）。挂载后 getComputedStyle 解析再绘制 |
| waveWidth | number | 50 | 每条波浪绘制宽度（px），越大波带越粗 |
| backgroundFill | string | --color-background / --color-bg | 背景填充色，每帧半透明绘制产生拖影 |
| blur | number | 10 | canvas filter blur（px），0=不模糊 |
| speed | "slow" | "fast" | "fast" | 动画速度 |
| waveOpacity | number | 0.5 | 每条波浪整体透明度（0–1） |
| className | string | — | 内容容器类（覆盖在波浪上的 wrapper div） |
| containerClassName | string | — | 外层根容器类 |
| containerProps | Omit<HTMLAttributes<HTMLDivElement>, "className"> & Record<\data-${string}\, …> | — | 透传至外层根 div（含 data-* 自定义属性） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 波浪上方内容（absolute 居中覆盖） |
禁忌 / 坑
- 基于 canvas，须客户端渲染；
prefers-reduced-motion下自动降为静帧，验证动画时记得关闭该系统开关。 - 容器尺寸用
containerClassName（如h-full w-full）撑开，外层父级需relative+overflow-hidden。 colors/backgroundFill支持var(--…)，挂载后解析——SSR 首帧不会有色彩，属正常。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
WavyBackground
<WavyBackground
speed="fast"
blur={10}
waveWidth={50}
waveOpacity={0.5}
containerClassName="h-64 w-full"
>
<h2 className="text-2xl font-bold">Hello, Waves</h2>
</WavyBackground>