All work3D
Keeb
3D configurator for a mechanical keyboard
A keyboard configurator in the browser. Customers choose keycap colors, case, switches and underglow, and see and hear every change instantly. The model and the sounds are generated entirely in code.
- Type
- Product
- Year
- 2026
- Role
- 3D and frontend
- Stack
- Three.js, Web Audio, React, TypeScript
- Links
- Try the demo
Challenge
A configurator has to look as good as a product photo and load faster than one, on phones too.
Approach
There’s no model file to load: the keyboard is built from shared geometries, with every legend in a single texture. Switch sounds are synthesized with Web Audio and change with the switch type and case material.
What we built
- 68 keys from shared geometries and one texture
- Five colorways, four aluminum finishes and polycarbonate
- Linear, tactile and clicky switches, with sound
- Price summary and a shareable link for every build
