An interactive web application for visualizing and learning guitar scales across the entire fretboard. Master guitar scales with intuitive fretboard patterns, CAGED system visualization, realistic audio playback, and multiple learning modes. Built with Next.js, React, and TypeScript.
- Clickable Note Playback - Click any note on the fretboard to hear realistic guitar tones
- Authentic Guitar Sound - Multi-harmonic synthesis with proper filtering and envelope shaping
- Web Audio API - High-quality audio generation with plucked-string characteristics
- Natural Decay - Notes fade naturally like real guitar strings
- Authentic Fret Markers - Traditional guitar inlay dots on frets 3, 5, 7, 9, 12, 15, 17, 19, 21, 24
- Double Dots on 12th Fret - Properly spaced octave markers like real guitars
- String Names Display - Shows tuning (E-A-D-G-B-E) for easy reference
- Full-Width Mobile Layout - Always spans complete viewport width on mobile devices
- Responsive Sizing - Dynamic fret and note sizing for optimal touch interaction
- Major (Ionian) and Natural Minor (Aeolian) scales
- Harmonic Minor - Minor scale with natural 7th (1-2-♭3-4-5-♭6-7) - Available in 3NPS mode only
- Melodic Minor - Minor scale with natural 6th and 7th (1-2-♭3-4-5-6-7) - Available in 3NPS mode only
- Blues Scale - Minor pentatonic with added ♭5 (1-♭3-4-♭5-5-♭7)
- Bonamassa Blues - Extended blues scale mixing major/minor (1-2-♭3-3-4-♭5-5-6-♭7)
- Minor Pentatonic (5 boxes) with authentic note patterns
- Minor Hexatonic (Minor Pentatonic + 2nd degree)
- Multiple Viewing Modes:
- Triads - Traditional playable CAGED triad shapes (major/minor chord voicings)
- CAGED System - 5 chord shapes with triad chord tones highlighted over pentatonic patterns
- Pentatonic Boxes - 5 classic pentatonic positions
- 3 Notes Per String (3NPS) - 7 modal positions (Ionian through Locrian) + Harmonic/Melodic Minor
- Hexatonic Boxes - 5 pentatonic boxes with added 2nd degree
- Bonamassa Blues - Joe Bonamassa-style blues patterns with blue note highlighting
- Full Neck View - All notes in the scale across the entire fretboard (works with all scale types)
- 12 Musical Keys with enharmonic equivalents (C, C#/Db, D, etc.)
- Smart Notation Toggle - Automatically converts between sharps and flats
- Note Names vs Scale Degrees - Switch between absolute and relative notation
- Real-time Key Display - Shows current key and relative major/minor
- Responsive Design - Optimized for mobile, tablet, and desktop
- Scale Formulas - Shows interval patterns (1-2-♭3-4-5-♭6-♭7) for each mode
- Complete Note Display - All scale notes shown with root note highlighting
- Compact Desktop Layout - Efficient use of screen space with comprehensive information
- Mobile-First Design - Touch-optimized controls and full-width fretboard
- Visual Feedback - Hover effects and smooth transitions throughout
- Professional Styling - Modern dark theme with emerald accent colors
- Triad Shapes Mode - Traditional playable CAGED chord voicings
- 5 moveable triad shapes (E, D, C, A, G)
- Color-coded chord tones: Root (green), Third (amber), Fifth (purple)
- Works with both major and minor triads
- Authentic fingerings based on open chord shapes
- CAGED System - Chord tones highlighted within pentatonic patterns
- Root, 3rd, 5th emphasized over scale patterns
- Visual distinction between chord tones and scale tones
- Perfect for understanding chord-scale relationships
- Bonamassa Blues Mode - Extended blues patterns
- Blue notes (♭5) highlighted in blue
- Major/minor mixing for authentic blues sound
- 5-box system with strategic note additions
- Node.js 18.0 or later
- npm, yarn, or pnpm
-
Clone the repository:
git clone https://github.com/engageintellect/scale-ninja.git cd scale-ninja -
Install dependencies:
npm install # or yarn install # or pnpm install
-
Run the development server:
npm run dev # or yarn dev # or pnpm dev
-
Open http://localhost:3000 in your browser.
- Select a Key: Choose from all 12 musical keys with enharmonic equivalents
- Choose a Scale:
- Major and Minor scales (available in all modes)
- Harmonic Minor and Melodic Minor (3NPS mode only)
- Blues scale (Bonamassa mode only)
- Select View Mode:
- Triads: Traditional CAGED chord shapes - select E, D, C, A, or G shape
- CAGED: Chord tones highlighted over pentatonic patterns
- Pentatonic: 5 classic pentatonic box positions (Major/Minor)
- 3NPS: 3-notes-per-string patterns (7 modal positions + Harmonic/Melodic Minor)
- Hexatonic: Pentatonic boxes with added 2nd degree (Major/Minor)
- Bonamassa Blues: Extended blues patterns with blue note highlighting
- Full Neck: All notes across the entire fretboard (toggle ON)
- Customize Display:
- Toggle between note names and scale degrees
- Switch between sharp (#) and flat (♭) notation
- Click any note to hear it played with realistic guitar tone
- Learn Chord Shapes:
- Use Triads mode to learn moveable chord voicings
- Root notes highlighted in green, thirds in amber, fifths in purple
- Practice transitioning between the 5 CAGED shapes
The application is built with a modular component architecture for maintainability and reusability:
-
Components:
Header- Application title and brandingControlPanel- Interactive controls for key, scale, mode, and notation selectionKeyDisplay- Real-time display of current key, relative key, and mode contextFretboard- Dynamic SVG fretboard with responsive note bubble renderingField- Reusable form field wrapper component
-
Core Logic:
ScaleEngine- Scale generation algorithms for all modes (3NPS, pentatonic, hexatonic, triads, CAGED, Bonamassa blues, full neck)AudioEngine- Web Audio API synthesis for realistic guitar tonestypes- TypeScript definitions and musical constants
- Next.js 15 - React framework with App Router and Turbopack
- TypeScript - Type-safe JavaScript
- Tailwind CSS v4 - Utility-first CSS framework
- React 19 - UI library
- Iconify - Comprehensive icon library
- SVG - Scalable vector graphics for fretboard rendering
- Vercel - Deployment platform
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by various guitar scale visualization tools and music theory resources
- Built with the help of the amazing open-source community
Developed with ❤️ by @engageintellect You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.