Inspiration

We wanted to make learning rhythm feel immediate, welcoming, and fun. Traditional drum notation can be intimidating for beginners, while many rhythm games focus more on performance than helping players understand what they are playing.

TempoJam bridges that gap with a mobile-first experience that makes reggae, salsa, samba, cumbia, funk, and Afrobeat easy to explore. Instead of requiring previous musical knowledge, it lets players learn naturally by listening, watching, and playing each rhythm back with two thumbs.

What it does

TempoJam is a two-thumb, call-and-response drum game built for Reddit.

Each round follows a simple loop:

  1. Listen to the drum crew perform a phrase.
  2. Follow the notation and animated beat wheels.
  3. Play the phrase back using two large drum pads.
  4. Receive Perfect, Good, or Miss feedback.

The game includes two modes:

  • Daily Jam: Everyone receives the same daily rhythm sequence and competes for a place on the Reddit leaderboard.
  • Practice: Players can choose any available style, select a difficulty level, and adjust the tempo without worrying about losing.

TempoJam currently features reggae, salsa, samba, cumbia, funk, and Afrobeat. Each style has its own tempo, instruments, rhythmic vocabulary, and original non-human musician character.

How we built it

We built TempoJam as a Devvit Web application that runs directly on Reddit.

The frontend uses Phaser and Vite to deliver responsive gameplay across mobile, tablet, and desktop layouts. Players interact through multitouch drum pads on mobile or keyboard controls on desktop.

The game displays rhythm in two complementary ways:

  • Colorful segmented beat wheels make subdivisions approachable for beginners.
  • VexFlow renders conventional drum notation for players who want to develop reading skills.

All percussion is generated in real time with the Web Audio API. This gives each musical style a distinct sound while allowing Practice mode to change tempo without pitch shifting.

The shared TypeScript rhythm engine handles curated pattern selection, deterministic daily sequences, timing grades, scoring, combos, and life. The server uses Hono, tRPC, Zod, and Devvit Redis to validate completed runs and maintain daily leaderboards.

Challenges we ran into

One of the biggest challenges was making authentic rhythmic ideas playable with only two inputs. Many of these musical styles normally involve several musicians and instruments, so we focused the player's part on two characteristic drum voices while procedural accompaniment supplies the surrounding groove.

Timing was another major challenge. The game needed to feel forgiving for beginners while remaining precise enough to be educational. We addressed this with Web Audio clock scheduling and clearly defined Perfect and Good timing windows.

We also needed the interface to work equally well in narrow portrait screens and wide landscape layouts. The notation, characters, beat wheels, status information, and thumb pads all required deliberate responsive compositions rather than simply scaling one fixed screen.

Finally, competitive scores could not be trusted directly from the browser. We solved this by recording the player's inputs and replaying the deterministic run on the server before accepting a leaderboard score.

Accomplishments that we're proud of

We are especially proud of creating a rhythm game that players can understand without reading a tutorial or knowing traditional music notation.

Other accomplishments include:

  • A deterministic Daily Jam shared by every player.
  • Six distinct world-groove styles with 96 curated rhythm patterns.
  • A two-thumb control system that supports simultaneous hits.
  • Beginner-friendly beat wheels paired with real drum notation.
  • Original procedural percussion with no copyrighted recordings or songs.
  • Server-validated scoring and Redis-powered Reddit leaderboards.
  • Separate responsive layouts for portrait and landscape play.
  • A no-fail Practice mode with adjustable difficulty and tempo.
  • An original crew of colorful, non-human musician characters.
  • Automated tests covering rhythm generation, timing, scoring, daily rotation, run validation, and leaderboard behavior.

What we learned

We learned that rhythm education becomes much more approachable when sound, movement, color, and notation all communicate the same idea.

We also found that simplifying the controls does not require simplifying the music. Two drum pads can still teach syncopation, subdivisions, independence, and the defining accents of different musical styles when the patterns are carefully authored.

From a technical perspective, we learned the importance of using the Web Audio clock instead of visual frame timing for musical events. We also learned that deterministic content generation is useful for more than daily challenges—it allows the client and server to reconstruct and evaluate the same performance independently.

Most importantly, we learned that an educational game works best when learning is part of the play itself rather than a separate lesson players must complete first.

What's next for TempoJam

Next, we want to expand TempoJam with:

  • More rhythm styles and curated pattern collections.
  • Deeper Practice lessons for subdivisions, syncopation, and drum independence.
  • More varied procedural backing ensembles for every genre.
  • Weekly challenges and longer-term Reddit leaderboards.
  • Personal progress tracking and practice statistics.
  • Additional difficulty options for experienced drummers.
  • Improved accessibility settings and customizable visual cues.
  • More character animations, stage themes, and celebratory feedback.
  • New meters and compound rhythms beyond the initial 4/4 catalog.
  • Community events that encourage Redditors to learn and improve together.

Built With

Share this project:

Updates