Step Sequencer

16-step drum machine with synthesized sounds. Vibecoded in ~20 minutes — no audio files, the kicks and snares are oscillators.

120
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Kick
Snare
Hi-Hat (closed)
Hi-Hat (open)
Clap
Prompt used
Build a Step Sequencer (drum machine) in React with:
- 16-step grid across 5 tracks (kick, snare, closed/open hi-hat, clap)
- Web Audio API drum synthesis — no audio files (oscillator + noise + envelopes)
- Lookahead scheduler (audioCtx.currentTime + 25ms tick + 100ms scheduleAhead) so timing is sample-accurate even when the tab is backgrounded
- BPM slider 60-180, Play/Stop, Clear, Randomize
- Visual playhead column highlight that advances in lockstep with audio
- Pattern persists to localStorage via useLocalStorageState
- Dark theme, purple accents