圖形解鎖
九宮格連線解鎖：拖曳畫圖形、成功/失敗回饋動畫。
經典 Android 風格的九宮格圖形鎖：以 pointer 拖曳依序連接圓點，SVG 線段即時跟隨指標，經過的點會漲大充色；跨點連線會自動補上中間穿過的點。放開後立即驗證——正確時綠色脈衝依連線順序擴散，錯誤時整體紅色搖晃並自動清除。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
280
900
<PatternLock />
安裝
npx shadcn@latest add https://webberui.com/r/pattern-lock.json或在 components.json 設定 registries 後，改用 @webberui/pattern-lock 安裝。
安裝依賴後，從 registry JSON（/r/pattern-lock.json 的 files[0].content）複製 pattern-lock.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { PatternLock } from "@/components/ui/pattern-lock";
<PatternLock
pattern={[0, 3, 6, 7, 8]}
onSuccess={() => console.log("解鎖成功")}
onFail={(drawn) => console.log("畫錯了", drawn)}
/>點的索引由左至右、由上至下編號：0 為左上、2 為右上、4 為中心、8 為右下。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
pattern | number[] | — | 正確解鎖圖形：0–8 的點索引序列 |
onSuccess | (drawn: number[]) => void | — | 驗證成功時呼叫，參數為使用者實際畫出的序列 |
onFail | (drawn: number[]) => void | — | 驗證失敗時呼叫，參數為使用者實際畫出的序列 |
size | number | 280 | 元件渲染邊長（px） |
resetDelay | number | 900 | 成功／失敗回饋顯示多久後自動清除（毫秒） |
hint | boolean | false | 是否以淡色虛線顯示正確圖形提示 |
className | string | — | 透傳到外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，關閉搖晃與脈衝動畫，僅以顏色（綠／紅）呈現驗證結果
- 驗證結果透過
aria-live="polite"區域向螢幕閱讀器播報「解鎖成功」或「圖形錯誤」 - SVG 帶有描述性
aria-label，說明這是可拖曳連線的九宮格圖形鎖 - 觸控裝置上以
touch-action: none防止拖曳時頁面跟著捲動，並支援pointercancel中斷還原 - 圖形鎖僅適合作為低強度的便利驗證，重要操作仍應搭配其他驗證方式