Syntho

Chord Readout

chord-readoutVisualizers

The composite card: a chord symbol big enough to read at a glance, then the supporting detail underneath in decreasing order of how often you need it — note names and the raw set encoding, the Forte set class, the interval-vector chart, and a self-consonance meter. It is arranged that way on purpose. The symbol answers what am I playing, which is the question almost every time; everything below answers why does it sound like that, which you ask occasionally and want in full when you do. The two halves come from genuinely different traditions, and that is the point of putting them together: the chord name is tonal thinking, with roots and qualities and inversions, while the set class is atonal thinking, with no root at all — just interval content, where a major and a minor triad are the same shape reflected. Seeing both at once is how you notice that the sonority you reached for by ear has a structure. Chord naming is dependency-free: a ranked search over a quality dictionary that reads inversions from the bass note and reports the runners-up rather than pretending an ambiguous chord has one answer.

sounding
Cmaj7
major seventh
NotesC, E, G, B
PC set{0, 4, 7, 11}
Chroma100010010001
Set number2193
Forte4-20
Prime form[0158]
Set classMajor-seventh Chord
Consonance
0.51
Mirror

Am/C is the inversion test — C is in the bass, but A is still the root, so it names as Am rather than a rootless C6. The diminished seventh is symmetric: all four rotations are equally valid names, and the alternatives say so.

Install

Copies the source into your project. Anything it depends on comes with it.

$ npx shadcn add @syntho-ui/chord-readout

Pulls in

control-themeconsonancepc-set-analysisinterval-vector-chart

First time? Add the registry to your components.json once:

components.json
{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

example.tsx
import { ChordReadout } from "@/components/ui/chord-readout"

// The lowest note is the bass, so inversions name themselves.
<ChordReadout notes={[60, 64, 67, 71]} showFlags />

Props

PropTypeDefaultDescription
notesnumber[]—The sounding MIDI notes. The lowest is treated as the bass, so inversions name themselves.
showFlagsbooleanfalseShow the set-class property flags — Mirror, Z-Set and counterpart, Combinatorial, and so on.
showChartbooleantrueShow the interval-vector chart inline.
showConsonancebooleantrueShow the self-consonance meter.
glyphStyle"musical" | "emoji""musical"Glyph style for the embedded interval-vector chart.
colorstring—Accent colour. Defaults to the --uikit-accent token.

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 slider and switch roles with live aria-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.
All controlsStart building