Smooth Follow Cursor

以彈簧物理驅動的自訂游標：中心點貼手指、外環延遲收斂，並依游標速度沿運動方向拉伸變形，做出「軟身」的跟隨尾巴。

Smooth Follow Cursor 是用 React、Tailwind CSS 與 Motion 的 spring 做的自訂滑鼠游標（custom cursor／游標跟隨特效）元件，包住一個區塊後，該區塊內的原生游標會換成一個中心圓點加一圈延遲跟隨的外環；按下滑鼠時外環縮小、圓點放大。

Playground

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SmoothFollowCursor/>

    </div>
  );
}

適用情境

• 作品集、設計工作室首頁的主視覺區，讓游標本身成為互動回饋的一部分。
• 產品發表頁或活動頁的 hero 區塊，搭配大字標題與深色背景。
• 互動展示、作品牆這類以瀏覽為主、表單較少的區塊。
• 不適合：表單、文字編輯區或需要精準點選的後台介面，原生游標比較好用；若只是想讓單一按鈕有吸附感，改用 Magnetic Button。

安裝

npx webberui@latest add https://webberui.com/r/smooth-follow-cursor.json

使用

import { SmoothFollowCursor } from "@/components/ui/smooth-follow-cursor";

<SmoothFollowCursor color="#8b5cf6" blend className="relative h-[340px] w-full">
  {/* 你的內容 */}
</SmoothFollowCursor>;

游標效果只作用在此容器內：容器套用 cursor-none 隱藏原生游標，離開容器即恢復。觸控裝置（pointer: coarse）自動停用並保留原生游標。

範例

只在 hero 區塊啟用

游標效果只作用在包住的容器內，把它放在首頁 hero 外層，頁面其他區塊維持原生游標。

import { SmoothFollowCursor } from "@/components/ui/smooth-follow-cursor";

export function Hero() {
  return (
    <SmoothFollowCursor className="relative flex min-h-[70vh] items-center justify-center bg-neutral-950">
      <h1 className="text-5xl font-semibold text-white">品牌設計與網站開發</h1>
    </SmoothFollowCursor>
  );
}

深淺交錯的背景：開啟反相疊色

blend 會讓游標層使用 mix-blend-difference，經過黑底與白底時都看得清楚。

<SmoothFollowCursor blend color="#ffffff" dotColor="#ffffff" className="relative h-96 w-full">
  <div className="grid h-full grid-cols-2">
    <div className="bg-white" />
    <div className="bg-black" />
  </div>
</SmoothFollowCursor>

關閉變形、做成精簡的圓環游標

deform={false} 停用依速度拉伸，再調小 size 與 dotSize，就是一個單純跟隨的圓環。

<SmoothFollowCursor
  deform={false}
  size={24}
  dotSize={4}
  color="#0ea5e9"
  dotColor="#0ea5e9"
  className="relative h-80 w-full"
>
  {/* 你的內容 */}
</SmoothFollowCursor>

Props

可及性

• 使用者系統開啟「減少動態效果」時，停用自訂游標並保留原生游標
• 觸控裝置自動停用，overflow-hidden 確保變形時的外環不會溢出容器
• 游標層為純視覺疊層，帶 aria-hidden 且 pointer-events-none，不影響底層互動

常見問題

可以在 Next.js App Router 使用嗎？

可以。檔案開頭已有 "use client"，在 Server Component 頁面中直接 import 即可。元件首次渲染與 SSR 一致，掛載後才依「減少動態效果」設定決定是否啟用，不會造成 hydration 不一致。

可以套用到整個網站嗎？

元件只在自己的容器內生效，並在容器上套用 overflow-hidden。想要全頁效果，可以把它包在版面最外層，但要注意 overflow-hidden 會影響內部的 sticky 或溢出內容。

color 要用什麼格式？

外環在未開啟 blend 時，背景色是在 color 後面直接接上 1a 透明度，所以請用 6 位數的 hex 色碼，例如 #8b5cf6。開啟 blend 時外環背景直接使用 color。

拉伸幅度怎麼調？

stretch 控制最大拉伸幅度（0–1，預設 0.4），數值越大尾巴越軟；deform={false} 則完全關閉變形。

觸控裝置和減少動態效果會怎麼處理？

只有滑鼠指標會觸發游標層，觸控裝置（pointer: coarse）保留原生游標。系統開啟「減少動態效果」時，元件只渲染一般容器與內容，不顯示自訂游標。