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.
Like what you saw?
There's more where that came from.