Liquid Glass React auf GitHub ansehen
Liquid Glass React ist eine React-Komponente, die Apples Liquid-Glass-Effekt nachbildet. Du legst beliebigen Inhalt hinein, etwa einen Button oder eine Karte, und er bekommt den Glas-Look.
Es ist eine Code-Bibliothek, kein Agent-Skill: Dein KI-Agent schreibt den Code, der sie nutzt.
Es ist kostenlos unter der MIT-Lizenz. Am 28. Oktober 2026 hatte das Repository auf GitHub rund 6.500 Sterne.
Was es tut
- Biegt und bricht den Hintergrund an den Rändern, wie echtes Glas.
- Du kannst einstellen, wie stark das Glas mattiert ist, sowie Eckenradius, Farbsättigung und chromatische Aberration.
- Ränder und Glanzlichter nehmen das Licht darunter auf, wie bei Apple.
- Reagiert auf Hover und Klicks, mit einer Elastizitäts-Einstellung, die ihm ein „flüssiges“ Gefühl gibt.
- Hat vier Brechungsmodi. Laut README ist der Shader-Modus am genauesten, aber nicht am stabilsten.
Was du vorher wissen solltest
Das README warnt, dass Safari und Firefox den Effekt nur teilweise unterstützen: Die Verschiebung, also das Biegen des Hintergrunds, ist dort nicht sichtbar. Der volle Effekt zeigt sich also in Chromium-basierten Browsern, und manche Besucher sehen eine einfachere Version. Außerdem braucht das Glas etwas dahinter, etwa ein Bild oder einen Verlauf, damit es wie Glas aussieht.
So installierst du es
npm install liquid-glass-reactBitte dann deinen Agenten, einen Button oder eine Karte mit der Komponente LiquidGlass zu umschließen und sie anzupassen, zum Beispiel weniger Milchglas oder eine rundere Form. Im README ist eine Live-Demo verlinkt.