Short description
A playable Web Audio drum machine for Framer, built as tactile, Rams-inspired hardware. Eleven synth voices, a 16-step sequencer, swing, a filter you shape by dragging the screen, and a one-minute MP3 you can download. Made with Claude Code.
Why I built it
The spark was two things I keep coming back to: Dieter Rams and drums. Braun-era restraint, and the pull of making rhythm. I wanted them in the same object. A piece that looks like considered industrial design and actually plays.
It was also a test. Can an agent build real audio software inside Framer, to a finish I'd ship? Not a mockup. A thing that runs, and that you can walk away with.
What's inside
11 synthesized drum voices. No samples. Every sound is generated live with the Web Audio API.
A 16-step sequencer with per-step probability. Click a step to cycle how often it fires.
Swing, master volume, and a tempo-synced echo.
A low-pass filter you sculpt by dragging the screen.
An OLED display with a waveform that reacts to the audio in real time.
Live pads you can play by hand.
A one-minute MP3 bounce of your pattern, rendered and encoded in the browser, free to download.
A brushed-aluminium build in the spirit of Dieter Rams. One accent colour, honest materials, every knob, key, and screen made natively in the component.
Timing runs on a look-ahead scheduler, so it stays tight while the visuals track the audio clock.
What Claude Code helped with
Wrote the whole audio engine: the eleven voices, the look-ahead scheduler, and the offline render plus in-browser MP3 encode for the download.
Built the hardware look to exact values: the metallic gradients, the layered shadows, the concentric knobs, the dark reactive screen.
Turned dozens of small notes into changes fast: silver finish, glass screens, pill keycaps, hover and press states, all-caps labels, the insert that slides into the device.
The point was range over reach. Design, audio, and code held in one place, shipped without handoffs.
Short description
A playable Web Audio drum machine for Framer, built as tactile, Rams-inspired hardware. Eleven synth voices, a 16-step sequencer, swing, a filter you shape by dragging the screen, and a one-minute MP3 you can download. Made with Claude Code.
Why I built it
The spark was two things I keep coming back to: Dieter Rams and drums. Braun-era restraint, and the pull of making rhythm. I wanted them in the same object. A piece that looks like considered industrial design and actually plays.
It was also a test. Can an agent build real audio software inside Framer, to a finish I'd ship? Not a mockup. A thing that runs, and that you can walk away with.
What's inside
11 synthesized drum voices. No samples. Every sound is generated live with the Web Audio API.
A 16-step sequencer with per-step probability. Click a step to cycle how often it fires.
Swing, master volume, and a tempo-synced echo.
A low-pass filter you sculpt by dragging the screen.
An OLED display with a waveform that reacts to the audio in real time.
Live pads you can play by hand.
A one-minute MP3 bounce of your pattern, rendered and encoded in the browser, free to download.
A brushed-aluminium build in the spirit of Dieter Rams. One accent colour, honest materials, every knob, key, and screen made natively in the component.
Timing runs on a look-ahead scheduler, so it stays tight while the visuals track the audio clock.
What Claude Code helped with
Wrote the whole audio engine: the eleven voices, the look-ahead scheduler, and the offline render plus in-browser MP3 encode for the download.
Built the hardware look to exact values: the metallic gradients, the layered shadows, the concentric knobs, the dark reactive screen.
Turned dozens of small notes into changes fast: silver finish, glass screens, pill keycaps, hover and press states, all-caps labels, the insert that slides into the device.
The point was range over reach. Design, audio, and code held in one place, shipped without handoffs.