Beschreibung
liquid-glass-js ist eine quelloffene JavaScript-Bibliothek, die den Liquid-Glass-Effekt aus Apples aktueller Designsprache über WebGL im Browser nachbildet. Statt eines einfachen CSS-Weichzeichners berechnet die Bibliothek eine mehrschichtige Refraktion mit getrennten Berechnungen für Kante, Lichtsaum und Basisfläche, dazu formsensitive Normalen je nach gewähltem Elementtyp und eine adaptive Gaußsche Weichzeichnung. Container- und Button-Komponenten lassen sich in drei Formen erzeugen, als abgerundetes Rechteck, als Kreis oder als Pille, und über ein verschachteltes Glass-System ineinander stapeln: Kind-Elemente greifen dabei auf die bereits gerenderte Ausgabe ihres übergeordneten Containers zurück. Für die Erfassung des Hintergrunds, auf dem die Refraktion basiert, nutzt die Bibliothek html2canvas, ansonsten kommt sie ohne weitere Abhängigkeiten aus.
Vorausgesetzt werden WebGL 2.0, ES6+-JavaScript und die HTML5-Canvas-API im Zielbrowser. Ein Paket über npm gibt es bislang nicht, die Bibliothek wird als reines Vanilla-JavaScript per Copy-paste der Kern-Dateien, Container-Klasse, Button-Klasse und zugehörige Stylesheets, ins eigene Projekt eingebunden; für den Einsatz in React braucht es ein manuelles Wrapping über useRef und useEffect. Weil jede Glass-Instanz WebGL-Rendering sowie eine Seiten-Erfassung über html2canvas erfordert, sinkt die Bildrate spürbar, sobald mehrere Instanzen gleichzeitig aktiv sind, und eine strikte Content Security Policy blockiert die CDN-Einbindung von html2canvas, wenn sie nicht angepasst wird.
Gegenüber einem einfachen CSS-backdrop-filter oder der entsprechenden Tailwind-Utility-Klasse liefert liquid-glass-js eine echte, shaderbasierte Lichtbrechung statt einer reinen Unschärfe, mit spürbar höherem Rendering-Aufwand. Die Bibliothek eignet sich deshalb für gezielt eingesetzte Premium-Akzente wie Hero-CTAs oder herausgehobene Karten, nicht für einen flächendeckenden Einsatz auf einer ganzen Seite, wo eine leichtgewichtige Blur-Lösung die praktikablere Wahl bleibt.
