Create rhythms that resonate
A free, browser-based tool for handpan players to compose, layer, and share patterns with professional audio effects.
✨ Key Features
Core Platform
Interactive Handpan Interface
- Visual handpan layout with 10 authentic scales (D Minor Pentatonic, Kurd, Celtic Minor, Hijaz, Major, Integral, Pygmy, Equinox, Sabye, Annaziska)
- Each scale has a unique color theme reflecting its musical character
- Real-time audio synthesis using Web Audio API
- Touch-optimized for mobile and tablet
- Click-to-preview notes while composing
Multi-Layer Pattern Editor
- 16-step sequencer with adjustable length (4-64 steps)
- Layer multiple patterns for polyrhythmic compositions
- Independent volume and effect chains per layer
- Solo/mute controls for isolating parts
- Real-time level meters for mix monitoring
- Recording mode with metronome sync
Professional Audio Effects
- Modular effect system: reverb, delay, chorus, tremolo, filter
- Per-layer effects for complex soundscapes
- Master effects for final mix polish
- Built-in presets (Ambient Space, Cathedral, Lo-Fi Warmth, etc.)
- Save custom effect configurations
- Lazy initialization keeps performance smooth
Pattern Variations
- Humanize: Add natural timing and velocity variations
- Reverse, shift, double, thin patterns
- Euclidean rhythm generator for mathematical patterns
- All processing happens in Web Workers (UI stays responsive)
Pattern Chaining
- Link patterns to build full songs
- Set repetitions and tempo overrides per pattern
- Real-time progress tracking during playback
- Reorder patterns with drag-and-drop
Developer Experience
Export Options
- WAV audio export (44.1kHz, 48kHz, or 96kHz)
- MIDI export for DAW integration
- JSON export for pattern backup
- URL sharing with embedded pattern data
- QR code generation for mobile sharing
Performance & Reliability
- Web Workers for CPU-intensive operations
- Lazy effect initialization reduces memory usage
- Comprehensive error boundaries prevent crashes
- Undo/redo with full history tracking
- LocalStorage persistence (no account required)
Accessibility
- Keyboard shortcuts for all major functions
- Interactive tutorial for new users
- Responsive design (mobile, tablet, desktop)
- Screen reader support
- High contrast color themes
Quick Start
Try It Now
Visit https://handpan-pattern-studio.griffen.codes
Create Your First Pattern
- Select a scale from the dropdown (try D Minor Pentatonic)
- Click notes on the handpan to hear them
- Click cells in the pattern grid to place notes
- Press Space to play your pattern
- Click “Save Pattern” to store it locally
Add Effects
- Open the “Effects” panel on the right
- Enable Reverb and adjust the mix
- Try the “Ambient Space” preset
- Effects update in real-time during playback
Layer Patterns
- Click “Add Layer” in the pattern editor
- Create a complementary rhythm
- Use Solo/Mute to isolate layers
- Adjust individual layer volumes
Share Your Work
- Click “Share” in the pattern editor
- Copy the URL or generate a QR code
- Recipients can open the link to load your pattern instantly
Technology Stack
Frontend
- Next.js 15 with App Router
- React 19 with TypeScript
- Tailwind CSS v4 for styling
- shadcn/ui component library
Audio
- Web Audio API for synthesis and effects
- OfflineAudioContext for background rendering
- AnalyserNode for real-time level metering
Performance
- Web Workers for audio export and pattern processing
- Lazy initialization for effects
- Debounced parameter updates
- React.memo for expensive components
Analytics & SEO
- Vercel Analytics for user tracking
- Speed Insights for performance monitoring
- Open Graph and Twitter Card support
- JSON-LD structured data for search engines
🔗 Links
Start creating patterns that resonate. No installation, no account, just music.
