KO·PADS: Keys you can feel before you touch them

On Uiverse I stumbled upon a small set of four keys by Praashoo7: two light grey ones with minus and plus, a red RECORD key and a dark PLAY key. They look as if someone had unscrewed them from a real device. The inspiration was the EP-133 K.O. II by Teenage Engineering.

I wanted to find out how far that feeling carries when you build a whole device from it. The result is KO·PADS: a playable mini sampler in the browser.

Try it: KO·PADS live

What is neumorphism?

Neumorphism, also called soft UI, sits between flat design and skeuomorphism. It doesn't imitate materials like leather or brushed metal. Instead, it shapes surfaces purely from light and shadow. For the keys, it comes down to three layers:

• A soft drop shadow lifts the key off the case.
• A light inner edge shows where the light hits.
• An inner shadow when pressed makes the key sink in.

Technically, that's just a few lines of box-shadow. The effect is still remarkable: the eye reads height, and the brain adds weight and resistance. You know how the key will feel before you touch it. That very anticipation is what makes an interface inviting.

What the device can do

• 12 pads with synthesized drums, all generated live with the Web Audio API
• 4 groups: drums, percussion, lo-fi and a synth where the pads play notes
• PLAY, RECORD and ERASE: a demo loop plays, pad hits are recorded on top and played back on every pass
• Two knobs for filter and pitch, controllable with mouse, touch, scroll wheel and keyboard
• An LCD with a step display and an LED level meter. And of course the volume goes up to 11.

What I learned along the way

The road to the finished page was less straightforward than the result suggests. A few takeaways:

• Light needs a direction. As soon as shadows fall diagonally on one element and vertically on another, everything looks skewed, even though every edge is straight.
• Real 3D isn't always better. A device tilted with CSS 3D looked like a product photo, but some keys could no longer be clicked. When elements lie in the same 3D plane, the browser sometimes hits the key and sometimes the case underneath. A straight view with a visible case edge and a soft floor shadow looks almost as three-dimensional and works reliably.
• Shadows must not rotate along. At first, the whole knob rotated together with its shadow. Only splitting it into a fixed base and a rotating cap made the effect believable.
• Small browser quirks matter. The original sits so neatly square inside its black frame because buttons don't inherit the font size. With font: inherit the keys suddenly became larger than their frame.
• Neumorphism has a contrast problem. Grey on grey looks elegant but is hard to read. That's why the labels use dark text, all controls have visible focus outlines, and everything works with the keyboard.

Technology

The page works without a framework, without dependencies and without a build step: HTML, CSS and vanilla JavaScript as ES modules, hosted on GitHub Pages. All sounds are created in the browser from oscillators, noise and filters. The only audio file is the demo loop, and even that is generated by a small Python script.

The code is split into classes with clear responsibilities: an audio engine, an instrument, sound groups, a looper with lookahead scheduling, the display, the knobs and a controller that ties everything together. The looper and the knobs report changes as events and know nothing about the interface.

My conclusion

Neumorphism isn't a style for every interface. But where an interface is meant to be fun, it brings back something flat design has lost: the feeling of holding something real.