Vollrath Drum Machine is a 16-step browser sequencer. I made it to see how close I could get to a useful, responsive drum machine with plain JavaScript and GSAP.
Timing is the whole project
A sequencer can look good in a screenshot and still feel wrong if the playhead drifts or a step reacts late. The visual and audio state need to line up. Browser autoplay rules, tab throttling, and device differences make that more fiddly than it should be.
GSAP handles the interface motion. Active steps need to read clearly, controls should react immediately, and changing a preset should not make the grid confusing. That feedback was worth the effort.
No framework by choice
I did not add a framework because the model is small: a pattern has sixteen steps, each channel has active steps and volume, the transport owns tempo and playhead position, and presets are starting states. A bigger abstraction would not have helped much.
Stack
JavaScript, HTML, CSS, and GSAP. Patterns are saved in localStorage.
Where it stands
The demo is embedded in this portfolio. If I revisit it, I would separate the timing code more cleanly and add text-based pattern export. Browser audio still needs more testing than most small projects get; different devices and background tabs can make a neat little instrument behave less predictably than expected.