KQ-1139 · PATTERN/LOCK

Pattern Lock

A pattern pad whose line's live end is 1:1 under the finger and snaps through every dot its path crosses, taking any free dot lying straight between two it joins; each caught dot pops on a flick up and a springs.snap back and plays the next note of a rising pentatonic phrase, so the pattern is also a melody. A refused pattern shakes and fades after the clear delay, and an accepted one locks with a ripple that runs along the path in the order it was drawn, with a chord. Arrow keys move between the dots, Space or a number key adds one, Backspace takes the last back, Enter finishes as a lift does and Escape clears.

KQ-1139 · PATTERN/LOCK

Draw a pattern for Waylight Pay

step 1 of 2 · 0 dots

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/pattern-lock

Props

label: string; default —; The pad's accessible name, e.g. "Unlock pattern".
value / defaultValue: number[]; default []; The pattern as dot numbers from 1 (reading order), in drawing order. Controlled or uncontrolled.
onValueChange: (pattern: number[]) => void; default —; Fires from the catch that added a dot, the key that removed one, and the clear, with the whole pattern.
onComplete: (pattern: number[]) => boolean | void | Promise<boolean | void>; default —; Asked when a pattern of at least minLength dots is finished. Return true to accept it (ripple and chord), false to refuse it (shake and buzz), nothing to record it neutrally, or a promise of one of those while the pad waits.
minLength: number; default 4; Shorter patterns are refused before onComplete is asked.
grid: 3 | 4 | "3" | "4"; default "3"; Dots per side: a 3 × 3 or a 4 × 4 pad. Changing it clears the pattern.
path: boolean; default true; Draw the line and keep caught dots lit. Off is the private mode: each catch only flashes and pops, the melody is the only trail, and success ripples from the centre so nothing of the pattern shows.
line: number; default 4; The line's weight in px, 2 to 10.
clearDelay: number; default 800; How long a wrong, short or recorded pattern stays on the pad before it fades, in ms.
size: number; default 216; The pad's side in px.
sound: boolean; default false; Play a rising note for each dot, a chord when accepted and a buzz when refused. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the pad and blocks drawing and keys.
className: string; default —; Merged onto the pad's classes.

Prop	Type	Default	Description
label	string	—	The pad's accessible name, e.g. "Unlock pattern".
value / defaultValue	number[]	[]	The pattern as dot numbers from 1 (reading order), in drawing order. Controlled or uncontrolled.
onValueChange	(pattern: number[]) => void	—	Fires from the catch that added a dot, the key that removed one, and the clear, with the whole pattern.
onComplete	(pattern: number[]) => boolean \| void \| Promise<boolean \| void>	—	Asked when a pattern of at least minLength dots is finished. Return true to accept it (ripple and chord), false to refuse it (shake and buzz), nothing to record it neutrally, or a promise of one of those while the pad waits.
minLength	number	4	Shorter patterns are refused before onComplete is asked.
grid	3 \| 4 \| "3" \| "4"	"3"	Dots per side: a 3 × 3 or a 4 × 4 pad. Changing it clears the pattern.
path	boolean	true	Draw the line and keep caught dots lit. Off is the private mode: each catch only flashes and pops, the melody is the only trail, and success ripples from the centre so nothing of the pattern shows.
line	number	4	The line's weight in px, 2 to 10.
clearDelay	number	800	How long a wrong, short or recorded pattern stays on the pad before it fades, in ms.
size	number	216	The pad's side in px.
sound	boolean	false	Play a rising note for each dot, a chord when accepted and a buzz when refused. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the pad and blocks drawing and keys.
className	string	—	Merged onto the pad's classes.