BeatKey
experimentInteractive mechanical keyboard keycap — blueprint-style 3D animation with Web Audio API sound synthesis.
Press the keycap or hit any key to hear the switch. Three sound profiles: thock, clack, and synth.
How it works
The keycap shape is extracted from a real Cherry MX STL file using a custom Node.js script that computes cross-section SVG paths. The animation uses cubic-bezier curves to simulate spring resistance with physically accurate 4mm travel distance.
Sound triggers at the 47ms mark — matching the actuation point of a real Cherry MX switch at 2mm travel depth. All three profiles are synthesized in real-time with the Web Audio API.