NotYousha/web-liquid-glass

Web Liquid Glass

Ein produktionsreifes Glasmaterial für Websites, extrahiert aus einer echten Next.js + Tailwind-Seite. Der vollständige funktionierende Quellcode befindet sich in reference/:

• reference/liquid-glass.css: das gesamte Material (Token, Oberfläche, Varianten, geformtes Glas, Brechung, Degradation). Etwa 2.200 Zeilen mit ausführlichen Kommentaren zu jedem Wert. Lies den benötigten Abschnitt, nicht die gesamte Datei.
• reference/glass.tsx: die <Glass>-React-Komponente und der SVG-Refraktionsfilter.
• reference/glass-specular.tsx: das spekuläre Highlight mit Zeiger- und Neigungsverfolgung.

Die Referenz importiert zwei Hilfsfunktionen der Seite (cn und LITE_CLASS aus einem Lite-Mode-Modul). Ersetze sie durch das eigene cn/clsx des Projekts und einen Klassennamen für „Effekte aus“. Regeln mit den Namen sky-*, kiosk-* und gebetsbezogene Selektoren sind seiten-spezifische Beispiele für Varianten. Entferne sie oder verwende sie als Vorlagen.

Was Glas ist

Glas besteht aus vier Teilen. Eine Webversion wirkt billig, wenn sie nur den ersten Teil enthält:

1. Material: Unschärfe UND eine Sättigungserhöhung (etwa 200%). Unter ~150% wirkt es wie graues Plastik. Füge Helligkeitsanhebung und Kontrastreduzierung hinzu, damit sich der dahinterliegende, bewegte Inhalt zu einer weichen Waschung auflöst.
2. Rand: Ein heller Haarstrich, an dem das Licht die Kante trifft, auf der gegenüberliegenden Seite dunkler. Unschärfe ohne Rand wirkt nie wie Glas.
3. Glanz: Ein weiches, spekuläres Highlight innerhalb der Oberkante.
4. Tiefe: Ein breiter, sehr weicher Schatten mit geringer Deckkraft, kein enger Kartenschatten.

Brechung (das Verbiegen von Inhalten an der Kante) ist ein fünfter Teil und der einzige, den das Web nicht günstig umsetzen kann. Dafür wird backdrop-filter: url(#svg-filter) benötigt, was nur in Chromium funktioniert.

Wohin mit Glas

Setze Glas auf die Navigationsebene (Leisten, Kapsel-Navigationen, schwebende Bedienelemente, Blätter), nicht auf den Hauptinhalt. Der Textkontrast auf Glas hängt von dem ab, was dahinter scrollt, und kann daher nicht garantiert werden. Behalte undurchsichtige Karten als Standard für Inhalte bei und mache Glas pro Oberfläche opt-in (.lg).

Regeln, die viel Zeit kosten

1. Das Glas-CSS muss in derselben Datei wie @tailwind base innerhalb von @layer stehen. Tailwind löst @layer pro Datei auf, daher führt eine separate CSS-Datei zu einem Fehler bei @layer base. Das Entfernen des Wrappers macht die Regeln ungeschichtet, und ungeschichtete Regeln überschreiben jede Tailwind-Dienstprogrammklasse. .lg { position: relative } überschreibt dann still fixed auf einer Navi.
2. Schreibe niemals --x: calc(var(--x) * 0.7). Es handelt sich um einen Zyklus: Ungültig zum Zeitpunkt der Berechnung des Werts, fällt es still auf den geerbten Wert zurück, ohne Fehlermeldung. Verwende eine zweite Variable (--lg-clarity-bump, --lg-press).
3. Eine Glasoberfläche hat genau eine Kante, und ::before zeichnet sie. Zwei Kanten (ein ::before-Rand plus eingelassene box-shadow-Fasen oder ein gespreizter Schatten außerhalb der Border-Box) ergeben einen „Doppelrahmen“, den keine noch so feine Alpha-Anpassung behebt.
4. corner-shape wird nicht vererbt. Wenn die Oberfläche corner-shape: squircle hat, benötigt jedes Pseudoelement, das auf der Grenze zeichnet, sowohl border-radius: inherit als auch corner-shape: inherit, sonst folgt der Rand einer anderen Kurve als der Körper.
5. Kein backdrop-filter auf Glas, das in Glas verschachtelt ist. Es tastet einen bereits getönten Hintergrund ab und wird trüb. Ein Auswahl-Chip innerhalb einer Glasleiste (.lg-chip) ist eine getönte Linse ohne eigene Unschärfe.
6. Animieren keine geerbte benutzerdefinierte Eigenschaft auf :root. Es invalidiert den Stil des gesamten Dokuments: etwa 11,6 ms pro Frame auf einer Seite mit 60 Oberflächen, gegenüber 2 ms, wenn der gleiche Wert pro Element geschrieben wird.
7. Leisten verwischen bei jedem Scroll-Frame neu. Gib .lg-bar einen kleineren Unschärferadius plus contain: paint. Wenn ein Gerät immer noch ruckelt, setze --lg-blur-bar: 0px; der Rand und der Glanz tragen den Großteil des Looks.
8. Glasiertes Glas nicht abflachen, um einen Fehler zu beheben. Eine nahezu undurchsichtige „einfarbige“ Leiste verliert den Look. Finde stattdessen die geometrische Ursache (Masken, die den Körper an der Kante ausdünnen, ein verdoppelter Rand).
9. Eine SVG-Refraktionslinse darf niemals über ihre eigene Box hinaus tasten. Chrome gibt dort Transparent zurück, und der ursprüngliche Inhalt erscheint als Geisterbild.

Safari und iPhone

WebKit unterstützt backdrop-filter, lehnt aber SVG-Filter darin ab, daher erhält Safari weniger als Chrome: nie eine Brechung. Was Safari brechen kann, ist seine eigene Symbolleiste. Setze viewportFit: "cover", damit die Seite darunter läuft, dann wird env(safe-area-inset-*) für die Navigation und Fußzeile obligatorisch.

Barrierefreiheit und Fallbacks (immer ausliefern)

Jede Oberfläche muss zu einem nahezu undurchsichtigen Farbton degradieren, der ähnlich aussieht und nichts pro Frame kostet:

• @media (prefers-reduced-transparency: reduce)
• @supports not (backdrop-filter: blur(1px))
• @media (prefers-contrast: more): ein stärkerer Farbton und eine solide Kante
• eine Root-Klasse wie .lg-off, die alle Glasoberflächen auf einmal deaktiviert (für einen Benutzer-Schalter oder einen Energiesparmodus)

Gib Leisten ihren eigenen, höheren maximalen Farbton (--lg-tint-max-bar), damit Navigationslinks den Textkontrast behalten, wenn Inhalt darunter scrollt.

Wie anwenden

1. Kopiere den Token-Block und den Oberflächenabschnitt aus reference/liquid-glass.css in die Haupt-CSS-Datei des Projekts, innerhalb seiner vorhandenen @layer-Blöcke (Regel 1).
2. Ordne die Farb-Token der Palette des Projekts zu. Die Referenz verwendet shadcn-artige hsl(var(--card))-Token.
3. Verwende <Glass> aus reference/glass.tsx oder die einfachen Klassen .lg, .lg-bar, .lg-nav, .lg-pane, .lg-chip und .lg-refract.
4. Füge das spekuläre Highlight aus reference/glass-specular.tsx nur dort hinzu, wo es seinen Preis wert ist (Heldensteuerung, Hauptnavigation), und beachte prefers-reduced-motion.
5. Überprüfe in Chrome UND Safari, in hell UND dunkel, über einem belebten Foto und über einfachem Text.

Fertige Steuerelemente: Glisse

Glisse von Kelvin Zhang (npm install glisse, MIT, React 18+, keine weiteren Abhängigkeiten) liefert interaktive Liquid-Glass-Steuerelemente mit dem bereits integrierten „Drücken zum Linsen“-Verhalten: Button, Switch, Slider, TabBar, SegmentedControl, Menu, Input, SearchField und eine einfache Glass-Oberfläche. Seine Stile werden vom JS-Bundle injiziert, es muss also keine CSS-Datei importiert werden.

Wann was verwenden:

• Glisse für Steuerelemente: Schalter, Slider, Tab-Leisten und segmentierte Steuerelemente, deren Daumen beim Ziehen in eine Linse aufsteigt. Das von Hand zu bauen, ist Tage Arbeit.
• Dieses Material für Oberflächen: Navigationsleisten, Kapsel-Navigationen, Panels, Blätter, Karten über Fotos und alles, was zu einem bestehenden Designsystem oder Tailwind-Theme passen muss.

Fallstricke bei der Kombination:

1. Beide verwenden das Präfix lg-. Glisse definiert .lg-glass, .lg-button, .lg-tab-bar und die Variablen --lg-blur, --lg-tint, --lg-rim und --lg-filter, die mit den Token dieses Materials kollidieren. Auf einer Seite, die beide verwendet, benenne das Präfix dieses Materials um (z. B. in ylg-) oder beschränke Glisse auf einen Wrapper, der diese Variablen zurücksetzt. Ansonsten stimmen sie sich gegenseitig stillschweigend nach.
2. Glisses Dark Mode orientiert sich an data-theme="dark" oder prefers-color-scheme, nicht an Tailwinds .dark-Klasse. Bei klassenbasiertem Dark Mode setze data-theme auf <html> zusammen mit .dark, sonst bleibt Glisse hell.
3. Glisse behandelt prefers-reduced-motion, aber nicht prefers-reduced-transparency oder prefers-contrast. Füge die Fallbacks aus dem Barrierefreiheitsabschnitt dieser Skill um die Glisse-Steuerelemente hinzu.
4. Glisses .lg-glass zeichnet bereits eine Kante mit einem eingelassenen box-shadow. Füge keinen ::before-Rand darauf hinzu (Regel 3: nur eine Kante).