Consonance Matrix
consonance-matrixVisualizersWhich of the twelve notes fit what you are playing.
$ pnpm dlx shadcn@latest add @pluginui/core-consonance-matrixInstall
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-consonance-matrix.jsonUsage
Connect the documented props to your application or host.
import { ConsonanceMatrix } from "@/components/ui/consonance-matrix"
<ConsonanceMatrix
referencePcs={[0, 4, 7]}
histogram={[10, 0, 6, 0, 8, 6, 0, 9, 0, 6, 0, 4]}
chordWeight={0.5}
rootPc={0}
/>About Consonance Matrix
A playing aid rather than an analysis: twelve cells, C through B, each shaded by how well the note agrees with the current harmony. Bright means it will land; dim means it will fight. The useful context combines two sources: the held chord changes quickly and reflects what your hands are doing, while the tonal histogram changes slowly and reflects the key. Either alone is less useful. The chord alone relights the whole row on every change and loses the key; the histogram alone never responds to you. A note belonging to both glows brightest, showing which note will sound most resolved. The shading is min-max normalised across the twelve cells, not absolute. Raw consonance scores cluster in a narrow band, so an absolute scale would make all twelve cells nearly the same grey. Normalising against the current spread reveals a ranking, which means there is always a brightest and dimmest cell. Read it as a ranking, not a set of verdicts. This uses the same maths as the reference hardware's strum-bar LEDs.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| referencePcs | number[] | — | Pitch classes sounding now, typically the held chord. Values are reduced mod 12, so raw MIDI works. |
| histogram | number[] | — | Length-12 pitch-class weights in CHROMATIC order (0 = C … 11 = B): the tonal field the piece has established. Units are arbitrary. |
| chordWeight | number | 0.5 | How much the held chord counts against the histogram. 1 is the chord alone, 0 the histogram alone. |
| rootPc | number | — | Marks this pitch class as the root/tonic with a tick beneath its cell. |
| labels | boolean | true | Draw the note name in each cell. |
| height | number | 44 | Height of the cells in pixels. |
| color | string | — | Cell colour. Defaults to the --uikit-accent token; brightness varies per cell. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.