SplashCursor
splash-cursor指针流体溅射光标特效 · 移动溅彩+点击爆斑+拖尾消散 · 彩虹色相轮/固定 chart token 双模(canvas2d 零依赖·reduced-motion·RSC 安全)
用法
基础用法
放在 relative 容器里，指针拖动溅射彩色染料，默认彩虹模式。
在此区域内移动 / 点击鼠标
tsx
<div className="relative h-64 overflow-hidden rounded-xl">
<SplashCursor />
</div>固定主题色
rainbow={false} 关闭色相循环，单色染料默认吃 chart-1 token。
单色染料 · 吃 chart-1 token
tsx
<SplashCursor rainbow={false} />猛烈拖尾
高 splatForce + 高 dissipation 保留率 + 大半径，快速划过看长拖尾。
快速划过看长拖尾
tsx
<SplashCursor splatForce={1.8} dissipation={0.97} splatRadius={72} />浅底柔和
opacity 调暗叠在浅色内容下方，免喧宾夺主。
浅底也能叠色
tsx
<SplashCursor opacity={0.7} splatRadius={48} />何时用
想给一块区域（或整页）加「鼠标移动溅彩、点击爆斑」的流体光标特效（hero、玩味落地页）。它是 canvas2d 零依赖 RSC 安全的纯特效层，pointer-events-none 不拦交互。要连续丝带拖尾选 Ribbons，要像素颗粒余晖选 PixelTrail；SplashCursor 是离散彩色染料溅射。
导入
ts
import { SplashCursor } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| rainbow | boolean | true | 彩虹模式：每次溅射沿 HSV 色相轮循环。关闭后统一用 color |
| color | string | var(--color-chart-1) | 非彩虹模式的固定溅射色，token 须带 --color- 前缀；rainbow 时忽略 |
| splatRadius | number | 56 | 溅射半径基准（px），越大色斑越饱满 |
| splatForce | number | 1 | 溅射力度：随指针速度抛洒的位移与拖尾长度，建议 0.5–2 |
| dissipation | number | 0.92 | 色斑保留率（每秒衰减，0–1），越接近 1 越持久 |
| opacity | number | 1 | 整体不透明度（0–1），叠内容下方时可调暗 |
| className | string | — | 透传到根容器（占满父级 absolute inset-0）；父级需 relative |
| style | CSSProperties | — | 透传到根容器 |
禁忌 / 坑
- 注意
dissipation是「保留率」语义（与原版 DENSITY_DISSIPATION 反向）：越大越持久，不是越大越快消散。 - 非彩虹模式
color给 token 用带--color-前缀的变量；彩虹开启时此值被忽略。见 [[hulian-token-color-var-needs-color-prefix]]。 - canvas2d 零依赖、RSC 安全、自带
pointer-events-none不拦下层交互；父级必须relative它才能absolute inset-0铺满。reduced-motion 下降级不溅射。
相关
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
在此区域内移动 / 点击鼠标
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<SplashCursor
rainbow={true}
splatRadius={56}
splatForce={1}
dissipation={0.92}
opacity={1}
/>
</div>