██╗ ██╗ ██████╗ ████████╗ ████████╗███████╗ ██████╗██╗ ██╗███╗ ██╗ ██████╗ ██╗ ██████╗ ██████╗ ██████╗ ███████╗
██║ ██║██╔═══██╗╚══██╔══╝ ╚══██╔══╝██╔════╝██╔════╝██║ ██║████╗ ██║██╔═══██╗ ██║ ██╔═══██╗██╔═══██╗██╔══██╗██╔════╝
███████║██║ ██║ ██║ ██║ █████╗ ██║ ███████║██╔██╗ ██║██║ ██║ ██║ ██║ ██║██║ ██║██████╔╝███████╗
██╔══██║██║ ██║ ██║ ██║ ██╔══╝ ██║ ██╔══██║██║╚██╗██║██║ ██║ ██║ ██║ ██║██║ ██║██╔═══╝ ╚════██║
██║ ██║╚██████╔╝ ██║ ██║ ███████╗╚██████╗██║ ██║██║ ╚████║╚██████╔╝ ███████╗╚██████╔╝╚██████╔╝██║ ███████║
╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚══════╝ ╚═════╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚══════╝
"The beat goes on. Everything else ends."
browser-based drum machine for generating 4/4 techno loops. no samples. pure synthesis. export to WAV. stare into the void while the kick drum stares back.
- kick — sine wave pitch envelope + click transient + waveshaper distortion. the foundation of all things.
- snare — triangle body + bandpassed noise + high shelf snap. cuts through the existential dread.
- hi-hat — filtered noise + metallic partials. open or closed. like your mind.
- 16-step sequencer — click. unclick. repeat until satisfied (you won't be).
- swing — because perfect timing is a myth.
- WAV export — offline render at 44.1kHz/16-bit. take your loops somewhere that matters.
- presets — classic patterns for when creativity fails you.
git clone https://github.com/yourname/hot-techno-loops
cd hot-techno-loops
npm install
npm run devopen http://localhost:5173. make noise. export. close browser. repeat tomorrow.
| command | what it does |
|---|---|
npm run dev |
dev server with HMR |
npm run build |
production build |
npm run test |
tests (watch mode) |
npm run test:run |
tests (once) |
npm run lint |
find problems |
react 19 — UI rendered at 120bpm
typescript — types for the typeless void
vite 7 — fast like a 909 hat
tailwind v4 — utility classes for utility music
zustand — state management without the ceremony
web audio — oscillators all the way down
src/
├── audio/ # synthesis + sequencing
│ ├── AudioEngine # master bus, utilities
│ ├── KickSynth # thump
│ ├── SnareSynth # crack
│ ├── HatSynth # tss
│ ├── Sequencer # time is a flat circle
│ └── exportWav # escape route
├── components/ # UI
│ ├── StepSequencer # 16 chances to get it right
│ ├── DrumControls # knobs for days
│ ├── Transport # play/stop/export
│ ├── Presets # borrowed patterns
│ └── Terminal # logs for the paranoid
├── store/ # zustand state
└── types.ts # defaults + presets
- no samples — everything synthesized in real-time. no copyright. no dependencies. no excuses.
- 4/4 only — this is techno. we don't do odd time signatures here.
- terminal aesthetic — black, white, monospace. if it looks like a hacker tool, it's working.
- export-first — the browser is just a waypoint. the WAV file is the destination.
PRs welcome. keep it minimal. no feature creep. the void is already full enough.
MIT. do whatever. nothing matters anyway.
> SYSTEM STATUS: OPERATIONAL
> KICK: ARMED
> SNARE: ARMED
> HAT: ARMED
> AWAITING INPUT...