Pickers
2D matrix pad
The matrix pad trades a pair of sliders for a single square, where the horizontal and vertical positions are two separate values. A crosshair follows the dot all the way to the edges, so both axis positions can be read off without watching the numbers, and the live figures print underneath. Arrow keys nudge by two and shift-arrow by ten, so the control is never drag-only.
npx shadcn@latest add @minflow/matrix-padWhere to use it
- Paired continuous parameters that are tuned against each other: attack and decay, blur and spread, x and y offset.
- Sound, motion, and layout tools, where the relationship between the two values is what the user is feeling for.
- Never for two values that have nothing to do with each other; two sliders label themselves better.
Variations
Bare pad
The default x and y axes, for a coordinate that has no better name than its position.
Named axes
When the two parameters have real names. The labels print alongside the live figures, so the read-out explains itself.
Driven from state
When the pair feeds something else on the page, such as a live preview, and the pad is the input rather than the record.