Magnetic Button

磁吸按鈕：游標靠近時被吸向游標偏移，內層文字視差、離開後 spring 回彈。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

磁吸強度strength

0.35

停用按鈕disabled

<MagneticButton />

npx shadcn@latest add https://webberui.com/r/magnetic-button.json

安裝時會一併寫入 --wb-duration-fast CSS 變數到你的全域樣式。

安裝依賴後，複製 magnetic-button.tsx 到你的 components/ui/ 目錄，並在全域 CSS 加入：

npm install motion clsx tailwind-merge

:root {
  --wb-duration-fast: 200ms;
}

import { MagneticButton } from "@/components/ui/magnetic-button";

<MagneticButton onClick={() => console.log("clicked")}>
  開始使用
</MagneticButton>

Prop	型別	預設值	說明
`strength`	`number`	`0.35`	磁吸強度：按鈕偏移量 = 游標相對中心距離 × strength，0 表示完全不動
`springConfig`	`SpringOptions`	`{ stiffness: 260, damping: 18, mass: 0.7 }`	離開後回彈的 spring 參數
`className`	`string`	—	覆蓋預設樣式（預設為實心按鈕，可改為外框等變體）
`children`	`ReactNode`	—	按鈕內容

其餘 <button> 屬性（onClick、disabled、aria-* 等）皆直接透傳。