Last May, I mocked up a Spotify Karaoke prototype in Figma — this March, I brought it to life.

It started out as a static exploration in interaction with hard coded lyrics... I even timestamped the song myself to pull the synced lyrics from a .json. After building that, I realized — why couldn't I just make the app itself?

With Claude Code, I pulled the interactions into an Electron app and fetched the lyrics from the Spotify API, using LRCLIB to get synced lyrics and Genius API as a fallback.

As someone who often listens and sings along to non-English songs, I realized romanizing or transliterating the lyrics would be huge. My karaoke player uses wanakana and kuroshiro for Japanese, pinyin-pro for Mandarin, hangul-romanization for Korean, and transliteration as a fallback for other scripts.

As a quality of life improvement, users can toggle the opacity of the lyrics to see other desktop windows underneath!

This project was built with Figma, Claude Code, and a lot of custom icon work.

The demo above doesn't use the Spotify SDK, but feel free to clone my repo and set up your own SDA to try it out! Or, free to ask me to add you as a tester - I only have one spot left!