Build a mechanical keyboard in 3D: keycaps, case, switches and underglow. Then type on it and hear it.
Graphite keycaps on a space grey aluminium case.
Keeb is a product configurator for a 65% mechanical keyboard. Everything is generated in code with three.js: the sculpted keycaps and their legends, the case, the lighting and the sound of every switch.
The problem
Configurators either show flat swatches or ship heavy 3D models that take seconds to load. This one had to feel like a product shot, respond instantly to every option and still work on a phone.
The approach
The keyboard is procedural: 68 keycaps from a handful of shared tapered geometries, each row sculpted like a real Cherry profile, all legends drawn into one canvas texture. Image-based lighting and soft shadows make the materials read as aluminium, frosted polycarbonate and PBT plastic. Press a key on your real keyboard and the 3D key goes down. The switch sounds are synthesized with Web Audio, different for linear, tactile and clicky switches and for each case material, so not a single audio file is loaded. The whole build lives in the URL.
- Procedural keyboard: layout, sculpted keycaps, legend atlas
- Materials and lighting: environment light, soft shadows, underglow
- Key presses from the physical keyboard, mouse and touch
- Synthesized switch sounds per switch type and case
- Configurator UI, price summary and shareable builds
- Five keycap colourways, legends on or off
- Aluminium in four colours, or frosted polycarbonate
- Linear, tactile and clicky switches, each with its own sound
- Underglow in five colours
- Camera presets plus free orbit
- A link for every build
A product page you can play with: no 3D model files, no audio files, and the switches really do sound different.
