Gooey Button
液態黏滯效果按鈕：底部液滴以 SVG goo 濾鏡融合，懸停時湧起覆蓋按鈕，點擊處噴濺出黏稠液滴。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<GooeyButton />
安裝
npx shadcn@latest add https://webberui.com/r/gooey-button.json或在 components.json 設定 registries 後，改用 @webberui/gooey-button 安裝。
安裝依賴後，從 registry JSON（/r/gooey-button.json 的 files[0].content）複製 gooey-button.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { GooeyButton } from "@/components/ui/gooey-button";
<GooeyButton onClick={() => save()}>懸停看看液體</GooeyButton>
<GooeyButton variant="danger">刪除專案</GooeyButton>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | 'default' | 'danger' | 'default' | 視覺變體：default 中性色、danger 紅系（危險操作用） |
className | string | — | 覆蓋預設樣式 |
children | ReactNode | — | 按鈕內容 |
其餘 <button> 屬性（onClick、disabled、aria-* 等）皆直接透傳。
細節
- goo 濾鏡：液體層套上 SVG
feGaussianBlur+feColorMatrix濾鏡——先模糊、再拉高 alpha 對比，使相鄰的圓形液滴融成一團有機的黏滯形狀；濾鏡 id 以useId產生，同頁多顆按鈕不會互相污染 - 靜置與湧起：靜置時液滴沉在按鈕底部只露出一抹弧線；懸停或鍵盤 focus-visible 時液體「甦醒」湧起覆蓋整顆按鈕，各滴以不同週期上下湧動形成錯落的液面
- 點擊噴濺：在按下的座標噴出一團液滴、快速擴散淡出，並經同一 goo 濾鏡與液面黏連；鍵盤（Enter／空白鍵）觸發時從按鈕中心噴濺
- 按壓回饋：
whileTap時整顆按鈕輕微縮放
可及性
- 液體層與濾鏡皆標記
aria-hidden，純裝飾不干擾輔助科技；文字內容置於獨立圖層之上，不受濾鏡模糊影響、維持清晰可讀 - 完整鍵盤支援：
focus-visible時同樣喚醒液體，Enter／空白鍵觸發置中噴濺 - 使用者系統開啟「減少動態效果」時：移除液滴的循環湧動與點擊噴濺，懸停僅以單次過場讓液面靜態抬升，不做任何往復動畫
- 觸發元件本身即
<button>，disabled、focus-visible外框、鍵盤操作等原生語意完整保留