Learn handpan fundamentals through interactive play
A web-based learning portal that helps drummers and musicians master handpan scales with guided lessons, practice modes, and memory challenges.
✨ Key Features
Core Learning Platform
- Three Learning Modes — Learn (guided lessons), Practice (free exploration), Challenge (memory games)
- 15 Authentic Scales — From traditional D Minor to exotic Raga Desh, each with cultural context
- Interactive Handpan Visualization — Circular layout matching real handpan geometry
- Web Audio Synthesis — Realistic handpan-like tones generated in real-time
- Progressive Lessons — Four-stage curriculum from center note basics to melody creation
Developer Experience
- Keyboard Shortcuts — Spacebar for center note, keys 1-8 for surrounding notes
- Responsive Design — Works seamlessly on mobile, tablet, and desktop
- Theme Toggle — Beautiful light and dark modes with zen aesthetic
- Volume Control — Master volume with mute functionality
- Real-time Feedback — Visual and audio cues for every interaction
Educational Content
- Scale Theory — Origin, mood, and musical characteristics for each scale
- Cultural Context — Learn where scales come from and how they’re traditionally used
- Note Information — Detailed explanations when clicking notes in Learn mode
- Highlighted Guidance — Visual cues show which notes to focus on during lessons
Quick Start
Try it online
Visit handpan-scales-studio.griffen.codes — no installation needed.
Basic workflow
- Choose a scale from the sidebar (D Minor is great for beginners)
- Start with Learn mode and follow the four progressive lessons
- Switch to Practice mode for free exploration
- Try Challenge mode to test your memory with sequence games
Technology Stack
- Next.js 15 with App Router and React 19
- Tailwind CSS v4 with custom design tokens for zen aesthetic
- Web Audio API for real-time sound synthesis
- shadcn/ui component library
- Vercel Analytics for usage tracking
- TypeScript for type safety
🔗 Links
- Live App: https://handpan-scales-studio.griffen.codes
- Pattern Studio: https://handpan-pattern-studio.griffen.codes
Give it a try if you’ve been curious about handpan but haven’t taken the leap yet. The Learn mode will have you playing simple melodies in minutes.
