Splash Cursor
游標移動產生流體潑濺與漣漪，以 canvas 2D 近似 fluid simulation。
游標劃過時沿軌跡噴發彩色墨團，重疊處以疊加混色暈開，並帶拖尾逐漸消散，模擬流體潑濺的視覺回饋。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
44
1
0.86
<SplashCursor />
安裝
npx shadcn@latest add https://webberui.com/r/splash-cursor.json或在 components.json 設定 registries 後，改用 @webberui/splash-cursor 安裝。
安裝依賴後，從 registry JSON（/r/splash-cursor.json 的 files[0].content）複製 splash-cursor.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
作為有界的互動容器，把前景內容放進 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）會重置軌跡起點，避免跨區拉出直線