Rhythm 2000s

Play it in the browser: https://ivanhanloth.github.io/Rhythm2000s/

Inspiration

We grew up with the sounds of early-2000s computers: the Windows XP startup jingle, the "ding" of a pop-up, the dial-up modem, the Mac startup chime. Those clicks and chimes already had a rhythm to them, so we asked: what if Rhythm Heaven was set on a desktop from 2002? Rhythm 2000s turns everyday computing of that era (pop-ups, closing windows, getting mail, hitting refresh) into rhythm minigames.

What it does

Rhythm 2000s plays like Rhythm Heaven: call and response. The computer demonstrates a rhythmic action, then you repeat it in the same rhythm.

A 3D street hub. You start on a British high street around 2000, walk into a net café and sit down at a computer to pick a level.
Two desktop scenes, each with its own actions and 10 levels plus a closing "Heaven" medley:
- Windows XP: pop-ups, closing windows, refreshing, the taskbar, dial-up...
- Mac OS X Aqua (10.0–10.2): the Dock, Save Changes sheets, the beach ball, Rip. Mix. Burn...
Tutorials built in. Before a phrase uses a new action, the game demonstrates it and you play it back before the song carries on.
Feedback on the beat: Perfect / Good / Miss judgements, combo effects, and a results window at the end of each round.
Difficulty from Heaven (×0.5 speed) to Hell (×1.5), three save slots and an in-game latency test.
HackerEditor: a chart editor on the back-row computers, so players can make their own levels, test them and import / export them.
An arcade dance machine with arrows in eight directions, plus a hidden easter egg for players who finish three levels.

Play it in the browser: https://ivanhanloth.github.io/Rhythm2000s/

How we built it

TypeScript + Vite+ for the toolchain (dev server, build, tests, lint and format in one tool).
PixiJS draws the desktop scenes on a fixed 1280×720 canvas, with widgets recreated to look like the originals.
Three.js renders the 3D street and net café, using CC0 props and textures from Poly Haven and period props we made in Tripo and Blender.
The native Web Audio API runs our own "conductor": every sound is scheduled on the audio clock, and every frame is drawn from the current audio time instead of adding up frame deltas.
Charts are JSON files, written in beats rather than milliseconds, and validated by unit tests. The editor writes the same format.
GitHub Actions checks, tests and builds every push and publishes the game to GitHub Pages.

Challenges we ran into

Timing in the browser. A rhythm game lives or dies on timing. We convert each input's timestamp to the audio timeline with AudioContext.getOutputTimestamp(), subtract the output latency and the player's calibration, and judge against that. After play-testing we widened the windows from ±45 / ±100 ms to Perfect ±60 ms and Good ±130 ms, and made very early presses a Miss so mashing doesn't pay off.
Original system sounds aren't on the beat. Many XP and Mac sounds start with tens of milliseconds, sometimes over 100 ms, of silence, so they sounded late. We trim the leading silence and normalise each sample when it loads.
Two renderers in one game. The 3D hub (Three.js) and the 2D levels (PixiJS) each have their own canvas, and switching between them had to feel seamless.
Teaching without text. Like Rhythm Heaven, the game has to show you what to do through sound and animation, so every new action gets a demo right before its first phrase.

Accomplishments that we're proud of

Two full scenes with 22 levels, a chart editor and a dance machine, all built during the hackathon.
Interfaces that feel like the real Windows XP and Mac OS X.
A timing system that follows the audio clock end to end.

What we learned

How browser audio actually works: audio clock vs. frame time, output latency, and why setTimeout is never good enough for rhythm.
How to design call-and-response levels that ramp from easy to hard.
Writing design docs and decision records first kept two people moving fast without stepping on each other.

What's next

Measure latency on more devices, browsers and headphones. Maybe support mobiles.
More 2000s scenes: instant messengers, dial-up, MP3 players, Flash games, Nokia phones.
Original music, and a desktop release wrapped in Electron.