覆蓋層與回饋
Splash Cursor
游標移動產生流體潑濺與漣漪，以 canvas 2D 近似 fluid simulation。
游標劃過時沿軌跡噴發彩色墨團，重疊處以疊加混色暈開，並帶拖尾逐漸消散，模擬流體潑濺的視覺回饋。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add splash-cursorPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
44
1
0.86
編輯中的呼叫預設屬性
<SplashCursor/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/splash-cursor.json或在 components.json 設定 registries 後，改用 @webberui/splash-cursor 安裝。
使用
作為有界的互動容器，把前景內容放進 children；佈局（置中等）直接寫在 className：
import { SplashCursor } from "@/components/ui/splash-cursor";
<SplashCursor className="flex h-[340px] w-full items-center justify-center rounded-xl">
<p className="text-white">Move your cursor</p>
</SplashCursor>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
colors | string[] | 霓虹五色 | 潑濺配色循環，重疊處疊加混色 |
backgroundColor | string | "#0a0a0f" | 底色，流體在其上暈開並拖尾淡出 |
splatRadius | number | 44 | 單顆流體粒子的基礎半徑（px） |
intensity | number | 1 | 潑濺強度，越高墨團越濃稠 |
trail | number | 0.86 | 拖尾殘留（0–1），越高擴散越像水墨 |
interactive | boolean | true | 是否啟用互動（滑鼠與觸控皆可） |
children | ReactNode | — | 疊在流體之上的前景內容 |
可及性
- 使用者系統開啟「減少動態效果」時，只鋪靜態底色、不啟動動畫與互動
- canvas 標記
aria-hidden且pointer-events-none，純視覺層不干擾前景操作 - 離場（
onPointerLeave）與重新按下（onPointerDown）會重置軌跡起點，避免跨區拉出直線