Syncing a lyrics scroll across 30 phones without sending pixels
I'm building Kantamigo, a web app for guitar nights where friends follow the lyrics on their phones while the guitarist plays. The fun problem was the scroll because the guitarist's screen and every guest's phone have different widths, fonts and line wraps, so a pixel offset means nothing on the other side.
So positions are line based (for now). The performer sends {item, section, line, frac, playing, speed}, where frac is how far into the current line we are and each phone works out its own pixels from that. Lines wrap differently on a small phone, but "verse 2, line 3, halfway" is the same everywhere
The performer sends at most 10 updates a second plus a heartbeat every 2 seconds, and between updates the phones keep scrolling at the given speed so it looks smooth without a flood of messages.
The API runs on more than one instance, and a guest's socket can sit on a different one than the guitarist's. Every instance subscribes to a Redis pub/sub channel per session and forwards events to its local sockets.
Phones drop off all the time at a party (locked screens, bad wifi in the kitchen), so a client never relies on events it missed. On reconnect it gets a full state snapshot and rebuilds from that.
Backend is Go with coder/websocket, frontend is Next.js. Feel free to check it out and please please let me know what do you think: https://kantamigo.com
Top comments (0)