An Interactive Journey into Mechanical Keyboard Switches

The main interface showing keyboard-only navigation

What happens when you press a key? There’s more engineering craftsmanship in this small component than you might initially suspect. The Switch Comparator is an educational web application that brings the technical world of mechanical keyboard switches to life through interactive 3D visualizations, characteristic diagrams and authentic sound samples.

The Concept

Mechanical keyboard switches come in many varieties: different mechanisms, activation points, tactile feedback and acoustic signatures. Understanding these differences can be overwhelming for newcomers and enthusiasts alike.

The Switch Comparator makes this knowledge accessible through:

• Interactive 3D cross-sections showing internal switch mechanics
• Characteristic diagrams visualizing activation points and force curves
• Authentic sound samples capturing the unique acoustic signature of each switch type
• Keyboard-only navigation creating an immersive, hands-on experience

Detailed switch view with technical specifications

Interactive characteristic diagrams showing activation points

Testing interface for experiencing different switch characteristics

Technical Implementation

The project is built with modern web technologies focused on interactivity and performance:

Frontend Stack:

• SvelteKit - Reactive framework for the application structure
• Three.js - 3D rendering engine for interactive switch models
• Web Audio API - High-quality playback of mechanical switch sounds
• Custom keyboard navigation - Full control using W/A/S/D keys

Key Features:

• Keyboard-only interface with visual navigation indicators
• Real-time 3D model manipulation
• Switch comparison database with technical specifications
• Audio feedback for every interaction
• Playground mode for testing all switches and sounds

Hardware Prototype: Mini-Keyboard Development

To enhance the exhibition experience and explore switch mechanics at a deeper level, I developed a custom mini-keyboard prototype. This hardware component evolved into a comprehensive project spanning 3D design, Arduino programming and advanced sensor integration.

Hardware Components

The custom keyboard includes:

• Arduino Nano 33 BLE Sense - Compact microcontroller with Bluetooth LE capabilities
• Hall-effect sensors - Analog position sensing providing 100+ states instead of binary on/off
• 4 mechanical switches - Cherry MX and variants for testing different switch types
• 9 V battery power - Portable operation with LED status indicator
• Hardware filtering circuit - Capacitor-based signal stabilization
• Custom 3D printed enclosure - Designed from scratch in Tinkercad

Custom keyboard prototype with Hall-effect sensors

Close-up of Hall-effect sensor with capacitor for signal filtering

Arduino Nano 33 BLE Sense microcontroller

Complete hardware assembly with all components

Close-up of circuit board and wiring

3D Design and Enclosure

The keyboard enclosure was designed iteratively using Tinkercad, a browser-based 3D modeling tool perfect for rapid prototyping:

• Component modeling - Arduino Nano, 9V battery and LED modeled at actual size using Tinkercad’s component library
• Iterative design - Multiple design variants tested and 3D printed
• Custom switch mounting - Precision holes for Cherry MX switch fitting
• Internal cable management - Routed wiring for clean assembly

The simplicity of Tinkercad enabled quick iteration cycles. Design modifications could be 3D printed within hours for immediate testing.

3D printed enclosure showing internal component layout

Cherry MX switch mounting detail

Arduino Development and Signal Optimization

Programming the Arduino Nano presented interesting challenges, particularly around Hall-effect sensor signal quality:

Development Environment:

• Initially attempted on Manjaro OS (compatibility issues)
• Successfully migrated to Arch Linux with Arduino IDE
• Git version control via private GitHub repository

Signal Processing Challenge:

The Hall-effect sensor initially produced irregular, noisy readings. I implemented a dual-approach solution:

1. Software Averaging - Custom algorithm in Arduino IDE smoothed sensor fluctuations
2. Hardware Filtering - Hand-soldered capacitor to the sensor circuit for physical signal stabilization

Raw Hall-effect sensor data showing irregular fluctuations

Improved signal quality after software averaging algorithm

Final optimized signal with both software and hardware filtering

This combination achieved stable, reliable position sensing with over 100 discrete states per key press, far exceeding the binary on/off of traditional keyboard switches.

Integration with Web Application

The Hall-effect sensor data transforms the physical key press into continuous position information, making the digital cross-section animation in the web app much more immersive and responsive during live demonstrations.

Original plan: Bluetooth LE communication between Arduino and web app Final implementation: Wired connection (BLE library deprecated during development)

The prototype successfully demonstrates how advanced sensor technology can create richer interactions with digital interfaces, bridging the gap between physical tactile experience and virtual visualization.

Design Process

The project followed a user-centered design approach:

• User journey mapping to understand interaction flows
• UI/UX sketches and wireframes in Figma
• Iterative prototyping with Three.js for 3D visualizations
• Testing keyboard-only navigation patterns
• Exhibition-focused hardware integration

Research and Ideation

Mind mapping mechanical switch characteristics and features

Reference image of Cherry MX switch mechanics (Source: Cherry MX product documentation)

Comprehensive overview of different Cherry MX switch types

User Experience Design

User journey and interaction flow mapping

UI/UX design process in Figma

Playground mode for testing all switches

The Result

The application was successfully deployed as a demonstration project, offering an engaging way to explore mechanical switch technology. The combination of web and hardware components created a unique educational tool that works both as a standalone web application and as an enhanced exhibition piece.

What I Learned

This project taught me how to bridge digital and physical interaction design. It challenged me to think about accessibility through constraint (keyboard-only navigation) and how hardware prototypes can enhance digital experiences. Working with Hall-effect sensors, real-time 3D rendering and audio synchronization pushed my technical skills while maintaining a focus on user experience.

The Switch Comparator demonstrates that technical subjects can be made engaging and accessible through thoughtful interaction design and multi-sensory experiences.