Interval Vector Chart
interval-vector-chartVisualizersThe harmonic fingerprint of a chord, in six bars.
$ pnpm dlx shadcn@latest add @pluginui/core-interval-vector-chartInstall
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-interval-vector-chart.jsonUsage
Connect the documented props to your application or host.
import { IntervalVectorChart } from "@/components/ui/interval-vector-chart"
// Either the six counts directly…
<IntervalVectorChart vector={[0, 0, 1, 1, 1, 0]} />
// …or the notes, and it computes them.
<IntervalVectorChart notes={[60, 64, 67]} glyphStyle="musical" />About Interval Vector Chart
The interval-class vector counts every interval in a set of notes, folded into six classes: m2, M2, m3, M3, P4 and the tritone. An interval and its inversion connect the same two pitch classes, so a fourth up is a fifth down. Drawing the result is useful because it is invariant under transposition and inversion, describing how a sonority sounds regardless of its spelling. Every major triad in every key draws the same three bars; every minor triad does too, because the two are reflections. Read the shape as character: weight on the right-hand bars is tension (the last bar is literally the tritone count), weight in the middle is sweetness, and a perfectly flat profile is the all-interval tetrachord. It contains every class exactly once and sounds like nothing in particular. Supply the six counts if you have them, or pass notes to calculate them.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| vector | number[] | — | The six interval-class counts (m2, M2, m3, M3, P4, TT). Takes precedence over notes. |
| notes | number[] | — | MIDI notes to compute the vector from. Reduced mod 12 and de-duplicated, so a doubled octave does not change the fingerprint. |
| glyphStyle | "musical" | "emoji" | "musical" | Bar labels: musical glyphs (♭2, ♭3, TT) under the bars, or emoji over them. |
| height | number | 88 | Height of the bars in pixels, excluding counts and glyphs. |
| showCounts | boolean | true | Show the count above each bar. |
| label | string | "intervals" | Caption under the chart. Pass an empty string for none. |
| barColors | string[] | — | Per-class colours, six of them, running consonant → dissonant. Ignored when color is set. |
| color | string | — | A single colour for every bar, overriding the per-class palette. |
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.