Aetheric UI: Tastbare UI-Komponenten für Webprojekte in reinem Vanilla JS

Wer hat sich nicht schon über flache, seelenlose Schaltflächen im Web geärgert? Ein einfacher Klick genügt – doch das fehlende Feedback erinnert an das Tippen auf einen Touchscreen ohne spürbaren Widerstand. Genau hier setzt Aetheric UI an, eine neue Open-Source-Bibliothek, die Hardware-Elemente wie mechanische Schalter oder Druckknöpfe digital nachbildet – aber ohne den überladenen Skeuomorphismus der 2000er-Jahre.

Mit reinem Vanilla JavaScript, CSS-Tiefeneffekten und minimalem Code-Overhead zeigt das Projekt, wie Web-Interfaces wieder fühlbar werden können. Die Entwicklerin hinter Aetheric Labs, bekannt unter dem Pseudonym Aetheric Labs auf Plattformen wie LinkedIn und X (ehemals Twitter), präsentiert mit ihrer ersten Komponentenwelle einen radikalen Ansatz: Keine Frameworks, keine Abhängigkeiten, nur funktionierende UI-Elemente, die sofort einsatzbereit sind.

Von der Hardware inspiriert: Warum flache Schalter nicht mehr reichen

Schon als Kind hat man gelernt, dass mechanische Schalter ein taktiles Feedback liefern. Ein guter Lichtschalter klickt hörbar, ein Drehknopf bietet spürbaren Widerstand. Web-Oberflächen hingegen reduzieren Interaktionen oft auf einen simplen Mausklick – ohne Haptik, ohne Tiefe, ohne Erlebnis.

Aetheric UI bricht mit dieser Tradition, indem es drei zentrale Prinzipien umsetzt:

• Visuelle Tiefe: Durch geschickte Nutzung von box-shadow, inset-Werten und sanften Verläufen entstehen Elemente, die optisch in den Bildschirm eingesenkt oder erhaben wirken.
• Taktile Animationen: Übergänge werden nicht abrupt, sondern mit leichten Verzögerungen und Widerstandseffekten dargestellt – etwa bei einem Schalter, der sich erst nach einem spürbaren Druck bewegt.
• Echtzeit-Feedback: Jede Interaktion löst eine immediate visuelle oder akustische Rückmeldung aus, ähnlich wie bei physischen Bedienelementen.

Die erste Welle der Bibliothek konzentriert sich auf Schalter und Knöpfe, doch das Ziel ist klar: zukünftige Updates sollen Navigationsleisten, Eingabefelder und Karten umfassen – allesamt mit dem gleichen Fokus auf greifbare Nutzererfahrung.

Vanilla JS als Kernprinzip: Kein Overhead, nur Funktionalität

Frameworks wie React oder Vue.js sind mächtige Werkzeuge – doch sie sind oft überdimensioniert für einfache UI-Komponenten. Aetheric UI beweist, dass eine Bibliothek für Schalter oder Knöpfe keine 100KB an Abhängigkeiten benötigen muss:

• Einzelne Dateien: Jede Komponente ist als eigenständige Datei konzipiert. Ein Kopieren in das Projekt reicht aus, um sie sofort nutzen zu können.
• Null Abhängigkeiten: Keine npm-Pakete, keine Build-Schritte, keine Konfiguration. Die Bibliothek wiegt pro Komponente weniger als 10KB – die meisten liegen sogar unter 4KB.
• Sofortige Integration: Entwickler können die Komponenten direkt in bestehende Projekte einbinden, ohne Code anpassen zu müssen.

Ein konkretes Beispiel ist der Depression Toggle: Ein runder Schalter, der optisch in die Oberfläche eingesenkt wirkt. Beim Aktivieren leuchtet ein kleiner bernsteinfarbener Punkt im Zentrum auf – eine Anspielung auf LED-Anzeigen in Hardware-Geräten. Die gesamte Animation wird über CSS-Übergänge und eine einzige JavaScript-Klasse gesteuert:

<div class="depression-toggle" id="toggle-1"></div>

const toggle = document.getElementById('toggle-1');
toggle.addEventListener('click', () => {
  toggle.classList.toggle('active');
});

Der Code zeigt, wie wenig Aufwand nötig ist, um ein taktiles Erlebnis zu schaffen – ohne komplexe Logik oder externe Bibliotheken.

Die erste Welle: Fünf Komponenten mit Hardware-Flair

Die initiale Veröffentlichung umfasst fünf Komponenten, die jeweils ein anderes physikalisches Bedienelement nachahmen:

• Depression Toggle: Ein eingesenkter, runder Schalter mit LED-ähnlichem Lichtpunkt im aktiven Zustand.
• Half-Pill Toggle: Ein pilzförmiger Schalter mit zwei Hälften, wobei immer eine Seite eingesenkt und die andere erhaben ist – ähnlich einem mechanischen Kippschalter.
• Sliding Toggle: Der dramatischste Vertreter: Ein Schalter mit bernsteinfarbenem Licht, das sich beim Aktivieren von links nach rechts ausbreitet. Der Knopf wirft dabei einen harten Schatten.
• Toggle Pack: Ein Bundle aller drei Schaltertypen für schnelle Integration.
• Hardware Button: Ein pilzförmiger Knopf, der sich beim Drücken leicht eindrückt. Der Label-Text kann frei angepasst werden – das Demo zeigt eine einfache Textänderung, doch die Logik ist vollständig offen.

Jede Komponente nutzt CSS für das visuelle Design und Vanilla JS für die Interaktionen. Die Animationen werden über transition-Eigenschaften gesteuert, während die Zustandsänderungen (aktiv/inaktiv) durch das Hinzufügen oder Entfernen einer CSS-Klasse ausgelöst werden. Das Ergebnis ist eine Bibliothek, die nicht nur leichtgewichtig ist, sondern auch performant bleibt – selbst auf älteren Geräten.

Was kommt als Nächstes? Navigationsleisten, Eingabefelder und mehr

Die Entwicklerin plant, die Bibliothek in regelmäßigen Wochen-Releases zu erweitern. Geplante Komponenten für zukünftige Wellen umfassen:

• Navbars mit taktilen Menüpunkten
• Eingabefelder mit Widerstandseffekten
• Karten mit physikalischer Tiefe
• Fortschrittsbalken mit Haptik-Feedback

Jede neue Welle wird freitags veröffentlicht, begleitet von kurzen Erklärungen und Demo-Videos auf den Social-Media-Kanälen der Entwicklerin. Interessierte können den Fortschritt live auf LinkedIn oder X verfolgen – oder die Komponenten direkt herunterladen.

Fazit: Eine Bibliothek für die nächste Generation von Web-Interfaces

Aetheric UI ist mehr als nur eine Sammlung hübscher Schaltflächen. Es ist ein Statement dafür, dass Web-Interfaces nicht länger seelenlos sein müssen. Durch die Kombination von CSS-Tiefe, Vanilla-JS-Effizienz und einer klaren Design-Philosophie zeigt das Projekt, wie taktile Erlebnisse auch in rein digitalen Umgebungen möglich sind.

Ob für Prototypen, persönliche Projekte oder kommerzielle Anwendungen – die Bibliothek bietet eine einfache, aber wirkungsvolle Lösung für Entwickler, die ihren Nutzern ein fühlbares Erlebnis bieten möchten. Mit zukünftigen Updates wird das Angebot noch breiter, sodass bald kaum ein Web-Projekt ohne taktile Elemente auskommen muss.

Wer die ersten Komponenten ausprobieren möchte, findet sie unter aethericlabs.lemonsqueezy.com – ohne Anmeldung, ohne versteckte Kosten, und mit der Gewissheit, dass jede Zeile Code für Performance und Nutzerfreundlichkeit optimiert wurde.