KO·PADS: Tasten, die man fühlt, bevor man sie berührt

Auf Uiverse bin ich über ein kleines Set aus vier Tasten von Praashoo7 gestolpert: zwei hellgraue mit Minus und Plus, eine rote RECORD- und eine dunkle PLAY-Taste. Sie sehen aus, als hätte jemand sie von einem echten Gerät abgeschraubt. Vorbild war der EP-133 K.O. II von Teenage Engineering.

Ich wollte wissen, wie weit dieses Gefühl trägt, wenn man ein ganzes Gerät daraus baut. Herausgekommen ist KO·PADS: ein spielbarer Mini-Sampler im Browser.

Ausprobieren: KO·PADS live

Was ist Neumorphismus?

Neumorphismus, auch Soft UI genannt, liegt zwischen Flat Design und Skeuomorphismus. Er bildet keine Materialien wie Leder oder gebürstetes Metall nach. Stattdessen formt er Oberflächen allein aus Licht und Schatten. Bei den Tasten sind es im Kern drei Schichten:

• Ein weicher Schlagschatten hebt die Taste vom Gehäuse ab.
• Eine helle Kante innen zeigt, wo das Licht auftrifft.
• Ein Innenschatten beim Drücken lässt die Taste einsinken.

Technisch sind das nur ein paar Zeilen box-shadow. Die Wirkung ist trotzdem erstaunlich: Das Auge liest Höhe, das Gehirn ergänzt Gewicht und Widerstand. Man weiß, wie sich die Taste anfühlen wird, bevor man sie berührt. Genau dieses Vorgefühl macht ein Interface einladend.

Was das Gerät kann

• 12 Pads mit synthetisierten Drums, alles live mit der Web Audio API erzeugt
• 4 Groups: Drums, Percussion, Lo-Fi und ein Synth, bei dem die Pads Töne spielen
• PLAY, RECORD und ERASE: ein Demo-Loop läuft, Pad-Schläge werden darüber aufgenommen und bei jedem Durchlauf mitgespielt
• Zwei Drehregler für Filter und Tonhöhe, bedienbar mit Maus, Touch, Mausrad und Tastatur
• Ein LCD mit Step-Anzeige und eine Pegel-LED-Kette. Die Lautstärke geht natürlich bis 11.

Was ich dabei gelernt habe

Der Weg zur fertigen Seite war weniger geradlinig, als das Ergebnis vermuten lässt. Ein paar Erkenntnisse nehme ich mit:

• Licht braucht eine Richtung. Sobald Schatten auf einem Element diagonal und auf einem anderen senkrecht fallen, wirkt alles schief, obwohl jede Kante gerade ist.
• Echtes 3D ist nicht immer besser. Ein mit CSS-3D gekipptes Gerät sah aus wie ein Produktfoto, aber einige Tasten ließen sich nicht mehr anklicken. Liegen Elemente in derselben 3D-Ebene, trifft der Browser beim Klick mal die Taste und mal das Gehäuse darunter. Eine gerade Ansicht mit sichtbarer Gehäusekante und weichem Bodenschatten wirkt fast genauso plastisch und funktioniert zuverlässig.
• Schatten dürfen sich nicht mitdrehen. Bei den Drehreglern rotierte anfangs der ganze Knopf samt Schatten. Erst die Trennung in einen festen Sockel und eine drehende Kappe hat den Effekt glaubwürdig gemacht.
• Kleine Browser-Eigenheiten zählen. Dass das Original so sauber quadratisch im schwarzen Rahmen sitzt, liegt daran, dass Buttons die Schriftgröße nicht erben. Mit font: inherit wurden die Tasten plötzlich größer als ihr Rahmen.
• Neumorphismus hat ein Kontrastproblem. Grau auf Grau sieht edel aus, ist aber schwer zu lesen. Deshalb haben die Beschriftungen dunkle Schrift, alle Bedienelemente sichtbare Fokusrahmen und vollständige Tastaturbedienung.

Technik

Die Seite kommt ohne Framework, ohne Abhängigkeiten und ohne Build aus. HTML, CSS und Vanilla JavaScript als ES-Module, gehostet auf GitHub Pages. Alle Klänge entstehen im Browser aus Oszillatoren, Rauschen und Filtern. Die einzige Audiodatei ist der Demo-Loop, und auch der wird von einem kleinen Python-Skript erzeugt.

Der Code ist in Klassen mit klaren Aufgaben getrennt: eine Audio-Engine, ein Instrument, Sound-Groups, ein Looper mit Lookahead-Scheduling, Display, Drehregler und ein Controller, der alles verbindet. Looper und Regler melden Änderungen als Events und wissen nichts von der Oberfläche.

Mein Fazit

Neumorphismus ist kein Stil für jedes Interface. Aber dort, wo ein Interface Spaß machen soll, bringt er etwas zurück, das Flat Design verloren hat: das Gefühl, etwas Echtes in der Hand zu haben.