Vollrath Drum Machine is a 16-step browser sequencer. I built it to find out whether a drum machine could feel immediate and tactile using only browser primitives — no native app, no Web Audio framework, just plain JavaScript and GSAP.
Timing is the whole project
A sequencer UI can look fine in a screenshot and still feel wrong if the playhead drifts or step toggles lag. The visual and audio state have to line up. Getting that right in the browser — with tab throttling, autoplay rules, and varying device behaviour — is more annoying than it sounds.
GSAP handles the interface motion because a drum machine benefits from physical feedback. The lights change, active steps read clearly, controls respond quickly, and presets switch without confusing the grid. That feel was worth spending time on.
No framework by choice
I avoided adding a large framework. It would have mostly moved the interesting timing problems behind an abstraction rather than solving them. The mental model is small enough to hold in your head: a pattern is sixteen steps, a channel owns its active steps and volume, the transport owns tempo and playhead position, and presets are named starting states.
Stack
JavaScript, HTML, CSS, and GSAP. Pattern persistence uses localStorage.
Where it stands
The current version is embedded in the portfolio as an interactive demo. If I rebuilt it I’d isolate the timing engine more cleanly and add text-based pattern export. I wouldn’t make it much bigger. Browser audio always deserves more testing than it gets — different devices and tab states can make a small instrument feel less deterministic than the code suggests.