Online shop · 2026 · Featured
Muelle
A mechanical keyboard shop where you hear every switch before you buy it.
The project
Online shop for a fictional mechanical keyboard brand: type on your own keyboard and hear the chosen switch, build your keyboard in 3D in five steps with price and stock checked live, and buy with cart, checkout, customer accounts and an admin panel. A concept with fictional data and simulated payment.
What makes it stand out
Each switch sound is synthesized with Web Audio and changes with the plate and case; the 3D keyboard (three.js) is generated from the Spanish layout and splits into its five layers on scroll. The whole site is a circuit board: copper traces that light up as you type. Custom PHP backend: the server recalculates every build's price and reserves its parts in a transaction. Uses components from React Bits, Magic UI, unlumen, shadcn/ui and anime.js, with a strict nonce-based CSP.
Technology
- React
- Three.js
- Web Audio
- Tailwind CSS
- PHP 8
- SQLite / MySQL
- Stripe
↓What it looks like as you scroll
