Clef
Clef is a web app that teaches a true beginner to read music, one note at a time. It is currently in active development, and already a real, playable product rather than a prototype.
Creative & Technical
Product, Design & Development
In active development
In Development Active Build
The Challenge
Understanding the problem space and identifying key obstacles.
Reading music is the wall most beginners hit first. The notes on the staff feel like a foreign alphabet, and the usual options are either dense theory apps or static flashcards that never quite build real fluency. A learner needs fast, forgiving, repetitive practice that actually sticks, not another lecture.
The goal was a calm, focused trainer that turns staff reading into quick, game-like reps: name a note, place a note, recognize it by ear, and see steady progress. It had to feel instant and effortless, work for both treble and bass clef, and stay light enough to load anywhere, while still keeping a learner's streaks and progress safe.
Learn to read the staff, one note at a time.
The Solution
Our approach to solving the challenge through design and technology.
We built Clef as a focused practice tool, deliberately lightweight, and grew it into a full learning loop. The project is still evolving, with new modes and content added as it develops.
How we built it
- ✓
No framework, no build step: The entire interactive app is hand-coded in vanilla JavaScript, which keeps it fast, dependency-free, and easy to load on any device.
- ✓
Real practice modes: Name the note, place the note, and an ear-training mode, across treble, bass, and grand staff, with answers given as letter names or on a piano keyboard.
- ✓
Built to keep learners coming back: Daily lessons, a pass-and-play duet mode, songs, streaks, accuracy tracking, and a leaderboard turn drills into a habit.
- ✓
Optional cloud accounts: A light serverless layer with its own authentication backs up streaks and progress so a learner can pick up where they left off on any device.
Experience It Live
Try the trainer we are building. Name notes, place them on the staff, and train by ear, then watch your streak and accuracy climb. Clef is in active development, so expect it to keep growing.
Name the note and place the note exercises on treble, bass, and grand staff
Ear training, daily lessons, and a pass-and-play duet mode
Streaks, accuracy tracking, and a leaderboard to stay motivated
Answer with letter names or a piano keyboard, with optional synced progress
Performance That Matters
Built for speed and optimized for every device. Real metrics from real users.
Music practice happens in short bursts, often on a phone between other things, so Clef had to feel quick and tactile on a small screen.
Instant and tactile Notes, taps, and feedback respond immediately, so a quick practice session never feels like waiting on a heavy app to load.
Readable musical staff The staff, notes, and piano keyboard scale cleanly to small screens, keeping the note the learner is reading clear and large enough to tap.
Light by design With no framework and no build step, the app loads fast and runs smoothly even on modest phones and slow connections.
Measurable Impact
A real, playable product that is still actively growing with new modes and content.
Hand-coded in vanilla JavaScript, with no framework or bundler.
Optional accounts back up streaks and progress across devices.
Ready to Create Something Extraordinary?
Let's work together to build a solution that drives real results for your business.