Interactive music theory tool for guitarists. Explore scales, modes, and chords across three synchronized views — chromatic circle, circle of fifths, and a full 15-fret guitar fretboard.

What It Does #

• Select any tonic, scale family, and mode — all three views update instantly
• Click any chord degree to highlight its tones across the fretboard and circles
• 8 scale families: Diatonic, Harmonic Minor, Jazz Minor, Pentatonic, Diminished, Whole Tone, Minor Blues, Major Blues
• 23+ tunings across guitar, bass, ukulele, banjo, violin, cello, and mandolin
• MIDI input support via Web MIDI API
• Sound playback with acoustic piano samples on every interaction
• Shareable permalink encodes full app state

How It Works #

All state lives in a single AppState object managed by useReducer. Every interaction dispatches an action, and the reducer produces a new state that flows through a three-phase computation pipeline:

1. Scale membership — maps tonic + intervals → note names using enharmonic spelling
2. Chord analysis — derives chord quality, Roman numerals, and chord tones per degree
3. UI bitmasks — overlays manual toggles and MIDI highlights

The output is NoteNode[12] — 12 objects, one per chromatic semitone — that drive every visual. No component holds music logic.

Tech Stack #

• React 19 + TypeScript 5
• Vite 6
• Raw SVG rendering (no D3 or charting library)
• useReducer + Context for state
• Web MIDI API
• smplr for audio playback
• Vitest + Biome

Design Notes #

The fretboard and circles share the same NoteNode[] data source with no intermediate transformation — what you click in the circle is exactly what lights up on the neck. Enharmonic spelling is handled by a dedicated algorithm that resolves correct note names (Bb vs A#, Fb vs E) based on the active key signature, so the display always matches standard music notation.