Circle of Fifths Interactive

An interactive Circle of Fifths web app built with React + Vite. Rotate the dial to explore keys, see neighboring fourths/fifths, and view common chord progressions. Toggle spelling modes (Auto/Sharps/Flats) to see key names the way you prefer.

What it does

• Interactive dial you can drag or step left/right
• Highlights the current key and its neighboring fourth and fifth
• Shows common progressions for the selected key
• Includes placeholders for substitutions and guitar voicings

Install and run locally

Prerequisites: Node.js (LTS recommended)

1. Install dependencies: npm install
2. Start the dev server: npm run dev
3. Open the local URL shown in the terminal.

Build and preview

• Production build: npm run build
• Preview the build: npm run preview