Canti: Music-Based Language Learning App Design
Fareed Kilani
Canti
Turn the songs you love into language you remember.
Canti is a music-language learning app that transforms real songs into short, focused lessons. Learners can search for a song, listen to an official preview, follow a selected lyric passage and explore its meaning, vocabulary, pronunciation, rhythm and cultural context.
Role
Product design, UX, branding and development
Platform
Responsive web application
Created for
The Replit × Musixmatch Musicathon
Core integrations
Musixmatch, ElevenLabs, Cyanite, Songstats and JamBase
Why I built it
Music teaches parts of language that textbooks miss.
People often remember the words to a song in another language long before they understand what those words mean.
Music gives language rhythm, emotion, repetition and context. Yet most language-learning products separate those elements into disconnected exercises and generic phrases.
Canti began with a simple question: what if the music people already love could become the lesson?
The idea
Start with a song, not a syllabus.
Instead of choosing a chapter or completing a traditional lesson path, learners begin by searching for music they already care about.
Canti checks whether a usable lesson can be created, plays an official 30-second preview and presents a short licensed lyric passage. The learner then moves through several focused learning modes before completing a recall activity.
The result is a lesson built around something familiar, emotional and easier to remember.
Designing an interface that feels like music
Learning should not interrupt the song.
The interface needed to feel closer to a premium music product than a traditional educational dashboard.
The visual identity grew from the structure of synced lyrics: horizontal passages, active lines, timing marks and annotation layers. Warm, quiet surfaces keep the content readable while cyan and violet highlights show where the learner is listening or interacting.
Motion follows the timing of the song, and each learning mode stays connected to the selected lyric line. The user never feels as though they have left the music to enter a separate lesson.
Designing around real constraints
Real music makes the product better, but also more complicated.
Canti could not assume that every song had licensed lyrics, synced timing or a playable preview.
Instead of allowing users to reach a broken lesson, I designed a lesson-availability gate that checks whether enough material exists before the experience begins.
The product uses official 30-second previews rather than hosting commercial songs. It displays only the short lyric passage required for the lesson, never the full lyric, and maintains clear attribution throughout the experience.
A prepared lesson path also ensures the core experience remains available when live song search or external music services cannot return everything required.
This turned licensing and API limitations into visible product rules rather than hidden technical failures.
One lesson, multiple systems
Canti brings several services together around a single learner journey:
Musixmatch for track matching, lyric availability, attribution and synced timing
ElevenLabs for pronunciation and voice practice
Cyanite for mood, genre, tempo and energy
Songstats for artist and track momentum
JamBase for additional live-artist context
n8n for automation hooks
Each integration supports the lesson, but none of them is presented as a separate feature. The learner sees one connected experience.
The result
A working learning product, not just a visual concept.
The completed Musicathon demo can search real songs, determine whether a lesson can be created, play an official preview, highlight synced lyric lines, open five learning modes, generate pronunciation practice, complete a quiz and produce a final memory card.
Canti began as a single prepared lesson and evolved into a full product flow capable of turning real music into an interactive learning experience.
What I learned
The most important part of Canti was not adding education on top of music. It was recognizing that the music itself could become the memory system.
The rhythm helps learners pronounce the words. Repetition helps them recall those words later. Emotion gives the language a reason to stay with them.
Lyrics teach what textbooks miss.
Like this project
Posted Jul 31, 2026
Developed Canti, a music-based language learning app for the Replit × Musixmatch Musicathon.
Likes
1
Views
0
