Smooth Follow Cursor
彈簧物理自訂游標，含 blob 變形跟隨。
以彈簧物理驅動的自訂游標：中心點貼手指、外環延遲收斂，並依游標速度沿運動方向拉伸變形，做出「軟身」的跟隨尾巴。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
38
7
0.4
<SmoothFollowCursor />
安裝
npx shadcn@latest add https://webberui.com/r/smooth-follow-cursor.json或在 components.json 設定 registries 後，改用 @webberui/smooth-follow-cursor 安裝。
安裝依賴後，從 registry JSON（/r/smooth-follow-cursor.json 的 files[0].content）複製 smooth-follow-cursor.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { SmoothFollowCursor } from "@/components/ui/smooth-follow-cursor";
<SmoothFollowCursor color="#8b5cf6" blend className="relative h-[340px] w-full">
{/* 你的內容 */}
</SmoothFollowCursor>;游標效果只作用在此容器內：容器套用 cursor-none 隱藏原生游標，離開容器即恢復。觸控裝置（pointer: coarse）自動停用並保留原生游標。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
color | string | "#6366f1" | blob 外環顏色 |
dotColor | string | "#6366f1" | 中心圓點顏色 |
size | number | 38 | 外環直徑（px） |
dotSize | number | 7 | 中心圓點直徑（px） |
deform | boolean | true | 是否依速度方向拉伸變形 |
stretch | number | 0.4 | 最大拉伸幅度（0–1） |
blend | boolean | false | 以 mix-blend-difference 反相疊色 |
children | ReactNode | — | 容器內容 |
可及性
- 使用者系統開啟「減少動態效果」時，停用自訂游標並保留原生游標
- 觸控裝置自動停用，
overflow-hidden確保變形時的外環不會溢出容器 - 游標層為純視覺疊層，帶
aria-hidden且pointer-events-none，不影響底層互動