Professional DJ Harmonic Mixing & Tempo Analysis Tool
A high-fidelity React application featuring a stunning "Deep Space Glass" UI aesthetic for DJs to calculate harmonic mixing keys and tempo ranges using the Camelot Wheel system.
- Circle of Fifths Integration - Professional music theory implementation
- Camelot Wheel System - Industry-standard key notation (1A-12A, 1B-12B)
- Dual Input Modes:
- Note Mode: Select by musical note (C, G, D, etc.) + Major/Minor
- Code Mode: Direct Camelot code selection
- Real-time Matching Algorithm:
- Relative keys (Energy Switch)
- Dominant keys (Energy Boost)
- Subdominant keys (Energy Drop)
- BPM Range Calculator with slider (20-300 BPM)
- Mix Range: ±8% for seamless transitions
- Wide Range: ±16% for creative mixing
- Half-Time & Double-Time calculations
- Increment/decrement buttons for precise control
- Deep Space Glassmorphism aesthetic
- Ambient orb lighting effects
- Translucent panels with backdrop blur
- Color-coded gradients:
- 🔵 Cyan/Blue for Major keys
- 🔴 Pink/Rose for Minor keys
- Responsive layout (Mobile tabs, Desktop 70/30 split)
- Custom thin scrollbars
- Node.js 18+ and npm (or yarn/pnpm)
# Clone the repository
git clone <your-repo-url>
cd harmonicmatcher
# Install dependencies
npm install
# Start development server
npm run devThe app will open at http://localhost:3000
# Create optimized build
npm run build
# Preview production build
npm run previewharmonicmatcher/
├── src/
│ ├── HarmonyMatch.jsx # Main application component
│ ├── App.jsx # Root component
│ ├── main.jsx # React entry point
│ └── index.css # Tailwind directives
├── index.html # HTML template
├── package.json # Dependencies
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind configuration
└── postcss.config.js # PostCSS configuration
- Use the slider or +/- buttons to set your track's tempo
- View compatible BPM ranges instantly
- Note Mode: Choose a note (C-B), then select Major or Minor
- Code Mode: Click a Camelot code directly (e.g., 8B, 5A)
The right panel shows compatible keys:
- Energy Switch: Same key number, opposite mode (8A ↔ 8B)
- Energy Boost: Next key clockwise (+1)
- Energy Drop: Previous key counter-clockwise (-1)
Use the displayed matches to transition between tracks harmonically!
Major Keys (B-codes): C → G → D → A → E → B → F# → Db → Ab → Eb → Bb → F
Minor Keys (A-codes): A → E → B → F# → Db → Ab → Eb → Bb → F → C → G → D
1A = Ab Minor | 1B = B Major
2A = Eb Minor | 2B = F# Major
3A = Bb Minor | 3B = Db Major
4A = F Minor | 4B = Ab Major
5A = C Minor | 5B = Eb Major
6A = G Minor | 6B = Bb Major
7A = D Minor | 7B = F Major
8A = A Minor | 8B = C Major
9A = E Minor | 9B = G Major
10A = B Minor | 10B = D Major
11A = F# Minor | 11B = A Major
12A = Db Minor | 12B = E Major
- Framework: React 18.3 (Functional Components + Hooks)
- Build Tool: Vite 5.4
- Styling: Tailwind CSS 3.4
- Icons: Lucide React 0.454
- Language: JavaScript (ESM)
- Mobile (< 1024px): Tab-based navigation with vertical stacking
- Desktop (≥ 1024px): 12-column grid layout
- Tempo: Full width
- Key Selection: 8 columns (67%)
- Matches: 4 columns (33%)
- Background: Pure Black (#000000)
- Glass Panels: White 4% opacity + backdrop blur
- Major Keys: Cyan 500 → Blue 600 gradient
- Minor Keys: Pink 500 → Rose 600 gradient
- Text Primary: White 100%
- Text Secondary: White 40%
- System fonts (San Francisco, Segoe UI, Roboto)
- Antialiased rendering
MIT License - feel free to use this project for personal or commercial purposes.
- Music theory based on the Circle of Fifths
- Camelot Wheel system popularized by Mixed In Key
- Designed for professional DJs and music producers
Built with ❤️ for the DJ community