The Tavern Anthem: Teaching a Bouncing Ball to Sit on the Voice

Spirefall's main menu is a wall of card art scrolling behind the game's wordmark, and it has a theme song — a tavern drinking number about an archmage who freezes the gold of the Pharaohs old. For a while the menu just played it. Then we decided the menu should invite you to sing along, which turned out to be a much deeper hole than expected.

Why hand-timed lyrics always look slightly wrong

The obvious way to build a karaoke ball is to type in timings by hand: this word at 15.2 seconds, the next at 15.6. We tried it. It looks fine in isolation and subtly awful next to an actual voice, because singers don't land on a grid. They stretch vowels, swallow consonants, and arrive early on the word they want to punch.

So the timings aren't authored at all. We run the isolated vocal stem through a forced-alignment pass — the same class of tool that generates subtitle timings — and get back the start and end of every individual word. A build step maps those word times onto our hand-written transcript and emits a runtime cue map. The ball doesn't approximate the vocal; it sits on it.

Once the alignment is honest, the fudge factors get small. The ball leads the voice by about 0.12 seconds, which isn't a timing correction — it covers the CSS slide between words and the fact that your eye anticipates. Lines reveal about 0.3 seconds early, just enough to read ahead.

The first chorus keeps its words

Here's the part we're most pleased with. The chorus arrives twice, and the first time, every word is redacted. The ball still bounces along the line, tracking words you can't read yet — the letters are replaced with bullets one-for-one, preserving the real spacing, so the dots sit exactly where the words will be. The second chorus reveals them, and by then you want to sing it.

Because all of this derives from playback position rather than session state, the arc replays every single loop. Leave the menu open and the anthem keeps teasing its own chorus, forever.

Three bugs that only exist because singing is continuous

The ball snapped to the corner. Inactive lines are display: none, so measuring a line's word positions in the same frame it becomes visible reads zeroes, and the ball cheerfully parks itself at the top-left. The fix is to position it in a post-render effect, after layout has actually happened. Obvious in hindsight; baffling at 1am.

The ball jumped mid-word. Chorus lines here are sung back-to-back with gaps under a tenth of a second, so revealing the next line on a fixed lead sometimes yanked the ball away while a word was still being held. Now the switch time is clamped so a line is never abandoned before its final word has actually ended — the lead is a preference, not a promise.

The ball loitered. When a section ended on a sustained note followed by seconds of instrumental, the ball sat on the last word like it had forgotten the song. It now hides itself shortly after a line's final word, and waits.

The bits that aren't the ball

Not every line is sung, and the ones that aren't shouldn't get a ball chasing them. Laughs, hums, a shouted Hey! Hey!, and one false start where the singer fumbles a lyric and says something we've redacted all render as dim stage directions instead — present, unhighlighted, no bouncing.

The wordmark is doing its own separate choreography throughout: it waves down during verses to clear the centre for lyrics, and rises again on the chorus downbeat. Near the end, on the line "before a meteor strikes from the sky," three staggered beams streak in from the top right and hit the P, the E, and the A of SPIREFALL, spinning each letter and throwing sparks. That one isn't karaoke — it's just showing off.

And if your system asks for reduced motion, the whole overlay is skipped. It's decoration, and decoration should know when it isn't wanted.

Why put this in a menu at all

A deckbuilder's menu is a place people sit while deciding whether to commit to a run. Ours is trying to tell you what kind of game this is before you've played a card: the fights happen in a tavern, the tone is warm and a bit shabby-grand, and somebody in the corner is already singing. If you find yourself mouthing along to a chorus you've only heard redacted once, the menu did its job.

Spirefall's free demo arrives at Steam Next Fest, October 19–26, 2026.