{"$schema":"https://ui.shadcn.com/schema/registry.json","author":"Kaiyu Hsu ","categories":["controls","geometric"],"dependencies":["lucide-react","motion"],"description":"Android's 9-dot pattern lock — glowing trail, dot ripples, red shake on a wrong draw, green on unlock.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { LockOpen } from \"lucide-react\";\nimport { AnimatePresence, MotionConfig, motion, useAnimate, useReducedMotion } from \"motion/react\";\n\nconst GRID = 3;\nconst CELL = 92;\nconst PAD = 46;\nconst BOARD = CELL * (GRID - 1) + PAD * 2;\nconst HIT_RADIUS = 30;\nconst CORRECT = [0, 3, 6, 7, 8];\n\ntype Phase = \"idle\" | \"drawing\" | \"error\" | \"success\";\n\nconst dotPosition = (index: number) => ({\n x: PAD + (index % GRID) * CELL,\n y: PAD + Math.floor(index / GRID) * CELL,\n});\n\nconst STROKE: Record = {\n drawing: \"#38bdf8\",\n error: \"#ef4444\",\n idle: \"#38bdf8\",\n success: \"#34d399\",\n};\n\nexport const PatternUnlock = () => {\n const [path, setPath] = useState([]);\n const [phase, setPhase] = useState(\"idle\");\n const [cursor, setCursor] = useState<{ x: number; y: number } | null>(null);\n const [scope, animate] = useAnimate();\n const boardRef = useRef(null);\n const timersRef = useRef[]>([]);\n const reduceMotion = useReducedMotion() ?? false;\n\n useEffect(() => {\n const timers = timersRef.current;\n return () => {\n for (const timer of timers) {\n clearTimeout(timer);\n }\n };\n }, []);\n\n const queue = useCallback((fn: () => void, ms: number) => {\n timersRef.current.push(setTimeout(fn, ms));\n }, []);\n\n const localPoint = (clientX: number, clientY: number) => {\n const rect = boardRef.current?.getBoundingClientRect();\n if (!rect) {\n return null;\n }\n // Rect is in screen pixels; dots are in board pixels. They differ when an ancestor is scaled.\n const scale = rect.width / BOARD;\n return { x: (clientX - rect.left) / scale, y: (clientY - rect.top) / scale };\n };\n\n const capture = useCallback((point: { x: number; y: number }) => {\n setPath((previous) => {\n for (let index = 0; index < GRID * GRID; index += 1) {\n if (previous.includes(index)) {\n continue;\n }\n const dot = dotPosition(index);\n if (Math.hypot(dot.x - point.x, dot.y - point.y) < HIT_RADIUS) {\n return [...previous, index];\n }\n }\n return previous;\n });\n }, []);\n\n const finish = useCallback(() => {\n setCursor(null);\n setPath((current) => {\n if (current.length === 0) {\n setPhase(\"idle\");\n return current;\n }\n if (current.join(\",\") === CORRECT.join(\",\")) {\n setPhase(\"success\");\n queue(() => {\n setPhase(\"idle\");\n setPath([]);\n }, 2200);\n } else {\n setPhase(\"error\");\n if (scope.current && !reduceMotion) {\n void animate(\n scope.current,\n { x: [0, -12, 12, -8, 8, 0] },\n { duration: 0.4, ease: \"easeInOut\" },\n );\n }\n queue(() => {\n setPhase(\"idle\");\n setPath([]);\n }, 800);\n }\n return current;\n });\n }, [animate, queue, reduceMotion, scope]);\n\n const points = path.map(dotPosition);\n const stroke = STROKE[phase];\n\n return (\n \n
\n \n {phase === \"success\" ? (\n \n \n Unlocked\n \n ) : (\n \n {phase === \"error\" ? \"Try again\" : \"Draw your pattern\"}\n \n )}\n \n\n
\n {\n event.currentTarget.setPointerCapture(event.pointerId);\n setPath([]);\n setPhase(\"drawing\");\n const point = localPoint(event.clientX, event.clientY);\n if (point) {\n capture(point);\n setCursor(point);\n }\n }}\n onPointerMove={(event) => {\n if (phase !== \"drawing\") {\n return;\n }\n const point = localPoint(event.clientX, event.clientY);\n if (point) {\n capture(point);\n setCursor(point);\n }\n }}\n onPointerUp={finish}\n onPointerCancel={finish}\n >\n \n {points.length > 0 && (\n `${p.x},${p.y}`)\n .join(\" \")}\n fill=\"none\"\n stroke={stroke}\n strokeWidth=\"4\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n opacity={0.85}\n style={{ filter: `drop-shadow(0 0 8px ${stroke})` }}\n />\n )}\n \n\n {Array.from({ length: GRID * GRID }, (_, index) => {\n const dot = dotPosition(index);\n const active = path.includes(index);\n return (\n \n \n {active && (\n \n )}\n \n );\n })}\n
\n
\n\n

The pattern is an L — start top-left

\n \n \n );\n};\n","path":"/pattern-unlock.tsx","target":"uicapsule/pattern-unlock/pattern-unlock.tsx","type":"registry:file"},{"content":"\"use client\";\n\nimport { PatternUnlock } from \"./pattern-unlock\";\n\nconst Preview = () => (\n
\n \n
\n);\n\nexport default Preview;\n","path":"/preview.tsx","target":"uicapsule/pattern-unlock/preview.tsx","type":"registry:file"}],"homepage":"https://www.uicapsule.com/ui/pattern-unlock","name":"pattern-unlock","registryDependencies":[],"title":"Pattern Unlock","type":"registry:block"}