Target Cursor
四角準星游標鎖定並框住目標元素，閒置時自轉，命中目標時張開框住邊界。
四角準星游標。閒置時是一個緩慢自轉的小方框跟隨滑鼠，游標落在命中 targetSelector 的元素上時，四個角括號會平滑張開框住該元素的邊界。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
26
12
2
6
6
<TargetCursor />
安裝
npx shadcn@latest add https://webberui.com/r/target-cursor.json或在 components.json 設定 registries 後，改用 @webberui/target-cursor 安裝。
安裝依賴後，從 registry JSON（/r/target-cursor.json 的 files[0].content）複製 target-cursor.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
用 TargetCursor 包住一塊區域，並在要被鎖定的元素上加 data-target 屬性（可用 targetSelector 自訂）。
import { TargetCursor } from "@/components/ui/target-cursor";
<TargetCursor className="relative h-[320px] w-full rounded-xl border">
<button data-target>Launch</button>
<a data-target href="#">Docs</a>
</TargetCursor>命中判定用 element.closest(targetSelector)，因此目標的任意子元素被指到時也會鎖定整個目標。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
targetSelector | string | "[data-target]" | 要鎖定的目標 CSS 選擇器 |
color | string | "currentColor" | 準星顏色，隨容器文字色 |
spinSize | number | 26 | 閒置時準星方框邊長（px） |
cornerLength | number | 12 | 角括號臂長（px） |
cornerThickness | number | 2 | 角括號線寬（px） |
padding | number | 6 | 鎖定時外框相對目標外擴的留白（px） |
spinDuration | number | 6 | 閒置自轉一圈的秒數 |
dotSize | number | 5 | 中心點直徑（px） |
className | string | — | 容器樣式，界定準星作用範圍與高度 |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染原生游標與內容，不套用自訂準星
- 準星層為
aria-hidden純裝飾；粗指標裝置（觸控）自動還原原生游標 - 顏色預設
currentColor，深淺主題下自動維持對比