kennedys0/taste-style-glassmorphism

Diese Fähigkeit nur verwenden, nachdem ein Benutzer sie explizit ausgewählt hat oder eine bestätigte Projektkonfiguration dies festlegt. Bei unerklärten neuen UI-Anfragen stattdessen einen Stilauswähler wie [Stilauswähler] verwenden, anstatt über den Geschmack des Benutzers zu entscheiden. Bestehende Marke, Barrierefreiheit und Benutzerüberschreibungen haben Vorrang vor allen folgenden Beispielen. Die folgende Stilrichtlinie ist keine Erlaubnis, vor der Stilauswahl mit der UI-Codierung zu beginnen.

Stilpaket: Glas-Morphismus

ID: glassmorphism Signatur: Sichtbar bereifte, durchscheinende Oberflächen, die über differenzierten Licht-/Farbschichten schweben, mit klarem Inhalt und funktionaler Tiefe.

Dies ist ein Opt-in-Stil, nicht die Standardeinstellung der Engine. Aktiviere ihn nur, wenn er vom Benutzer ausgewählt oder durch das etablierte Projektdesignsystem festgelegt wird. Respektiere Produktanatomie, Markenausrichtung, Barrierefreiheit und bestehende Interaktionen. Eine generische dunkle Seite mit einem blauen Button qualifiziert sich nicht als Glas-Morphismus.

Gut geeignet / Abwägungen

• Funktioniert gut für: Ausdrucksstarke Portfolios, Produkt-Landingpages, Navigations-Overlays, Medienoberflächen, kreative Dashboards und begrenzte UI-Demos.
• Mit Vorsicht verwenden bei: Dichten Datentabellen, Langtext-Lesen, barrierefreiheitskritischen Formularen oder unvorhersehbaren Fotos hinter Text. Platziere hochdichte Inhalte auf angemessen deckenden oder stark getönten Oberflächen.
• Richtungsreferenzen: Eine helle, milchig bereifte Scheibe mit weichem blauen Atmosphärenlicht und sanfter abgerundeter Geometrie; oder ein dunkles, rauchig-getöntes Glassystem mit durchscheinenden Schieferplatten, gedämpfter violett/cyanfarbener Beleuchtung und lesbaren Bedienelementen. Beide sind gültig. Keines erzwingt eine feste Markenfarbpalette.

Qualitätssicherung der Glas-Materialtreue – obligatorisch

Bevor eine Glas-Morphismus-Seite als vollständig bezeichnet wird, muss der erste Viewport sichtbar als Glaskomposition lesbar sein. Wenn der Benutzer diesen Stil gewählt hat, ist ein großer schlichter Hintergrund plus Typografie und ein konventioneller Button ein MISSERFOLG, selbst wenn CSS-Variablen glass heißen.

Eine erfolgreiche prominente Glaskomponente demonstriert alle der folgenden Punkte:

1. Hintergrundtiefe: Ein bedeutungsvoller differenzierter Hintergrund hinter der Oberfläche (weiche Lichtfelder, kontrollierte Farbverläufe, Formen, für das Projekt bereitgestellte Fotografie oder vorhandener App-Inhalt). Glas braucht etwas, das es sichtbar filtert. Zielgerichtete Farbverläufe und Umgebungsfarbformen sind von der Taste Engine Anti-Slop-Regelung für Glas-Morphismus ausdrücklich erlaubt, wenn sie sichtbares Licht etablieren, das durch eine Scheibe fällt. Sie sind nicht grundsätzlich Schlampigkeit.
2. Durchscheinen: Das Panel lässt zu, dass etwas Hintergrund-Chroma/Luminanz seine Erscheinung beeinflusst. Vermeide vollständig deckende dunkle Karten, die als Glas vermarktet werden.
3. Mattierung: backdrop-filter: blur(...) (und -webkit-backdrop-filter falls erforderlich) macht Hintergrunddetails innerhalb der Scheibe sichtbar weicher, während der nahe liegende exponierte Hintergrund klarer bleibt. Ein unscharfer Hintergrund allein ist kein mattiertes Glas.
4. Lesbare Kante und Tiefe: Weiche helle Haarfein-/Hervorhebung, leichter innerer Glanz, abgerundete Silhouette wo angemessen, und zurückhaltender Schatten oder Trennung. Glas sollte eine wahrnehmbare Grenze haben, keine flache graue Platte.
5. Inhaltsklarheit: Text, Fokusindikatoren, Steuerungszustände und Aktionen bleiben über den tatsächlichen zusammengesetzten Hintergrund hinweg lesbar, auch wenn Fallback-Effekte deaktiviert sind.

Erster-Viewport-Test: In einem Desktop-Screenshot das prominente Panel, den deutlichen Hintergrund dahinter, den unscharfen/getönten Look innerhalb seiner Grenze und seine Kantenhervorhebung identifizieren, ohne den Seitentitel zu lesen. Wenn nicht möglich, das Material überarbeiten, bevor mehr Inhalte hinzugefügt werden.

Keine Kartenanzahl-Regel: Ein prominentes Hero-Panel oder ein paar Komponenten-Demo-Oberflächen reichen aus. Nicht jeden Abschnitt mit identischen transparenten Karten überziehen. Bei einer Komponentenschau ehrliche, funktionale Beispiele (Schalter, Eingabe, Dialog, Toast als beschriftete Demo, Navigation) verwenden, um das Material und seine Zustände zu demonstrieren; keinen echten Produktstatus oder soziale Beweise erfinden.

Explizite Ausnahme für Hintergrundverläufe – Glas darf leuchten

Glas-morphismus-spezifische Überschreibung: Die universelle Anti-Slop-Warnung gegen generische dekorative Farbverläufe darf NICHT als Verbot von Verläufen, mesh-artigen Farbfeldern, unscharfen Farbformen, atmosphärischer Beleuchtung oder kohärenten Hintergrundbildern hier interpretiert werden. Diese sind gültige materialermöglichende Hintergrundschichten, selbst wenn dekorativ, da sie Durchscheinen, Mattierung, Kanten und Tiefe wahrnehmbar machen. Diese Ausnahme ist keine Erlaubnis für erfundene Inhalte oder unzugängliche/langsame Effekte.

• Erlaubte Hintergrundbehandlungen: 1–3 kohärente radial-gradient() Lichtfelder, ein zurückhaltender mehrstufiger linearer oder Mesh-Verlauf, unscharfe farbige Umgebungsformen mittels Pseudo-Elementen, eine markenkonforme Illustration/Fotografie oder vorhandener Inhalt hinter einem Panel. Statisches CSS reicht oft aus und benötigt keine zusätzlichen Bilder oder Animationsbibliotheken.
• Helles / milchiges Beispiel: Weiße/Eisbasis mit kühlen blauen/lavendelfarbenen weichen Lichtfeldern hinter einer durchscheinenden weißen Karte; die Scheibe macht die Farbgrenzen sichtbar weicher.
• Dunkles / rauchiges Beispiel: Dunkle Tintenbasis mit kontrollierten violetten/cyan/teal Lichtbereichen hinter durchscheinenden Schieferplatten; helle Farbverlaufsfelder dürfen weißen Körpertext nicht verdecken.
• Kompositionsanforderung: Platziere mindestens einen Licht-/Farbübergang oder ein erkennbares Hintergrundelement hinter und teilweise außerhalb des Hauptglas-Panels, sodass der Unterschied zwischen gefiltert und ungefiltert sichtbar ist; ein gleichmäßiger Vollbild-Farbverlauf ohne lokale Variation kann trotzdem fehlschlagen.
• Tiefensteuerung: Der Hintergrund sollte eine geringere Betonung als der Inhalt haben; verwende wenige Lichtquellen mit natürlichem Abfall und beabsichtigten Positionen, anstatt standardmäßige violette/blaue Kleckse auf jeder Seite. Verwende die Markenfarbpalette des Benutzers und die gelieferten Referenzen.
• Leistung und Barrierefreiheit: Bevorzuge statische CSS-Farbverläufe und zurückhaltende Oberflächen. Vermeide Vollbild-Bewegungsgradienten-Animationen, übermäßige Vollbild-Hintergrundunschärfen, winzigen kontrastarmen Text und versteckte Fokusringe. Respektiere Transparenzpräferenzen und teste lesbare undurchsichtige Fallbacks.
• Anti-Slop-Interpretation: Bewerte Farbverläufe nach Materialzweck, Zurückhaltung und Lesbarkeit, nicht nach ihrer bloßen Präsenz. Das Entfernen eines nützlichen Glashintergrunds, um eine generische Farbverlaufsheuristik zu erfüllen, ist ein Design-Rückschritt.

Ein aussagekräftiger Screenshot sollte das matte Material offensichtlich machen, selbst wenn alle Überschriften und Beschriftungen verborgen sind. Siehe examples/glassmorphism/frosted-surfaces.css für eine Einstiegsimplementierung und tests/glassmorphism-visual.md für visuelle Akzeptanzkriterien.

Typografie und Schriftgestaltung

Eine saubere, zur Marke passende Sans-Schrift verwenden (System-Sans, DM Sans, Inter, usw.). Übliche Lesegröße 15–17 px; Auszeichnungsschrift kann größer sein. Starke Typografie-Hierarchie beibehalten und ultradünnen Text über variablen Glashintergründen vermeiden. Ein helles, mattiertes Panel profitiert oft von tiefem Vordergrundtext; ein dunkles, rauchiges Panel von kontrastreichem Offwhite. Nie farbiges Leuchten als Ersatz für typografische Hierarchie verwenden.

Farbrichtung

Wähle eine kohärente Richtung aus dem Kontext oder verwende die Referenz des Benutzers:

• Matiert hell / milchiges Glas: Helles eisweißes oder hellgraues Feld (#F0F4F8), kühles blaues oder anderes markengetöntes diffuses Licht hinter halbdurchsichtigen weißen Scheiben (rgba(255, 255, 255, 0.45)). Typografie ist tiefes Schiefergrau (#0F172A) mit gedämpftem Schiefergrau (#475569). Eine weiche Glashighlight-Linie ist entlang der Oberkante sichtbar (rgba(255, 255, 255, 0.75)).
• Rauchig dunkel / Nachtglas: Tiefe Marine-/Tintenbasis (#090D16) mit violetten/blauen/teal Umgebungslichtfeldern hinter blaugrauen durchscheinenden Panels (rgba(22, 28, 45, 0.55)). Vordergrundtext ist knuspriges Porzellan (#F8FAFC) mit gedämpftem Schiefergrau (#94A3B8); dunkle Panels sind nicht nahezu undurchsichtige Rechtecke.
• Themenkopplung & Anti-Kollisionsregel: Beim Wechsel zwischen hellem und dunklem Glas-Modus MÜSSEN Vordergrundtext, Rahmen und Umgebungslichtquellen im Gleichschritt wechseln. Vordergrundtext muss mindestens 4,5:1 Kontrast sowohl gegen die matte Glasoberfläche als auch den beleuchteten Hintergrund dahinter aufweisen. Niemals dunklen Text auf rauchigem dunklem Glas oder weißen Text auf matter hellem Glas hinterlassen.

Farbe allein ist kein Glas-Morphismus. Für keine Marke standardmäßig auf neonfarbenes Lila/Cyan zurückgreifen. Marke und Anforderungen an hohen Kontrast beibehalten. Tatsächlichen zusammengesetzten Vordergrundkontrast prüfen (WCAG AA 4,5:1 normaler Text, 3:1 großer Text; relevante nicht-Text-Steuerelemente mindestens 3:1).

Layout und Geometrie

• Eine zielgerichtete Vorder-/Hintergrundkomposition verwenden: Umgebungs-Hintergrund → Glasoberflächen → knuspriger Inhalt und interaktive Steuerelemente. 2–3 Tiefenebenen unterscheiden, ohne verschachteltes Karten-Chaos.
• Konsistente Ecken (üblicherweise 16–28 px für größere Panels) und Abstände verwenden. Vermeide einen völlig leeren überdimensionalen ersten Viewport, nur um 100svh zu erreichen.
• Auf responsiven Bildschirmen sollten Panels sauber gestapelt werden, lesbare Innenabstände beibehalten und abgeschnittene Unschärfe oder Überlauf vermeiden. Kopfzeile, Hero-Inhalt und Steuerelemente müssen passen oder sich natürlich ausdehnen.

Oberflächen, Tiefe, Textur

• Glas-Rezept: Halbtransparente Tönung (rgba(...) oder color-mix), backdrop-filter: blur(16px) saturate(140%), ein durchscheinender 1px-Rahmen, milde innere obere Hervorhebung und weicher geschichteter Schatten. Beginne mit etwa 12–24 px Unschärfe, dann gegen den echten Hintergrund abstimmen.
• Helles Glas: Eine weiß getönte Oberfläche mit etwa 0,24–0,55 Alpha wenn der Hintergrund es erlaubt verwenden; zu viel Deckkraft entfernt den mattierten Effekt. Starker Textkontrast ist dennoch obligatorisch.
• Dunkles Glas: Eine Schiefer-/Indigo-Tönung um 0,25–0,56 Alpha verwenden, mit sichtbarer hellerer Kante und kontrastierendem Umgebungslicht dahinter. Sowohl pechschwarze Platten als auch augenbrennende Neon-Höfe vermeiden.
• Tiefenhinweise: Weicher unscharfer Hintergrund hinter dem Panel, ein zurückhaltender innerer Glanz, ein subtiler Kantenglanz/Reflexion. Keine standardmäßige generische Bubble-Tapete erforderlich.
• @supports Fallback mit deckenden lesbaren Oberflächen verwenden, wenn backdrop-filter fehlt. Eine alternative Darstellung mit reduzierter Transparenz/hohem Kontrast bereitstellen. Unschärfe selbst darf niemals notwendig sein, um Inhalt zu verstehen oder zu interagieren.

Siehe examples/glassmorphism/frosted-surfaces.css im vollständigen Taste-Engine-Router (das obige Token-Rezept funktioniert auch in eigenständigen Installationen) für unabhängige helle und dunkle Start-Token. Tokens an das Projekt anpassen; nicht alle Beispiele kopieren oder eine feste Palette erzwingen.

Komponentenanatomie und Interaktion

• Hero: Die gewählte Ästhetik sofort offensichtlich machen. Tatsächliche Taste Engine/Projektüberschrift und Handlungsaufforderungen innerhalb oder überlappend mit einer sichtbaren Glasebene platzieren, oder eine ebenso überzeugende Glasfenster-Komposition präsentieren. Einen bedeutungsvoll beleuchteten Hintergrund hinter dem Panel bereitstellen.
• Header/Nav: Eine subtile matte Leiste kann den Hintergrund überlappen, aber Kontrast und Fokus sichtbar halten. Eine flache undurchsichtige obere Leiste vermeiden, die bei der Demonstration der Glas-UI visuell von der Seite getrennt ist.
• Funktionale Beispiele: Schalter mit echtem Ein-/Aus-Zustand, auswählbare Option, Tab, Modal, Formular und einen Toast nur wenn echt ausgelöst oder klar als statische Demo markiert. Fokussierte, schwebende, aktive, deaktivierte und Fehlerzustände zeigen, wenn zutreffend. Vordergrund-Steueroberflächen können für die Benutzerfreundlichkeit deckender sein als das übergeordnete Glas.
• Buttons: Können deckende Akzentflächen für die Aufforderung sein; nicht jedes Steuerelement muss transparent sein. Ein konventioneller Button kompensiert nicht fehlendes Glas an anderer Stelle.
• Inhalt: Stark getönte oder deckende lesbare Behälter für lange Absätze, Tabellen und Formulare reservieren; keine Absätze auf verrauschten durchscheinenden Bildern platzieren.

Bewegung

Interaktionsfeedback anstelle von Umgebungsbewegung verwenden. 140–220 ms Ein-/Ausblenden/Verschieben bei Hover, Auswahl, Panel-Enthüllung oder Modal nur wenn Benutzeraktion dies rechtfertigt. Kontinuität der Glasschicht bewahren. Keine endlosen treibenden Kugeln, bewegten Lichtstrahlen oder obligatorische 3D-Drehungen.

Optionales Anime.js v4 Rezept

• Bewegungsentscheidung: CSS/native Übergänge für die meisten Interaktionen; Anime.js v4 ist optional für koordinierte Zustandsübergänge, keine erforderliche visuelle Abhängigkeit.
• Startdauer: 180 ms, Einblendung ohne Springen. Compositor-freundliches opacity/transform animieren, anstatt kontinuierlich Unschärfe oder Box-Schatten zu animieren.
• Bewegung reduzieren: prefers-reduced-motion respektieren und unterbrochene/kurzgeschlossene Übergänge erlauben.
• Abhängigkeit: Der Taste Engine references/motion-engine.md folgen wo verfügbar; eigenständige Fähigkeit wendet die gleiche Anleitung an.

UI-Texte und Mikrokopien

Direkt, produktspezifisch und prägnant. Glas ist ein Material, keine Ausrede für vage Texte wie „die Zukunft ist transparent“. Vermeide gefälschte Abzeichen, Verifizierungsstatus, Benutzer, Produktivitätsbewertungen oder Testimonials. Demodaten müssen explizit gekennzeichnet sein.

Start-Token (Vorschläge, kein vollständiges Thema)

Token	Heller Glas-Standard	Dunkler Glas-Standard
--taste-radius-sm	14px	14px
--taste-radius-lg	24px	24px
--taste-glass-blur	18px	18px
--taste-glass-bg	#f0f4f8	#090d16
--taste-glass-surface	rgba(255, 255, 255, 0.45)	rgba(22, 28, 45, 0.55)
--taste-glass-text	#0f172a	#f8fafc
--taste-glass-text-muted	#475569	#94a3b8
--taste-glass-light	rgba(255, 255, 255, 0.38)	rgba(255, 255, 255, 0.38)
--taste-glass-dark	rgba(36, 45, 72, 0.38)	rgba(36, 45, 72, 0.38)
--taste-glass-edge-light	rgba(255, 255, 255, 0.65)	rgba(255, 255, 255, 0.18)
--taste-motion-duration	180ms	180ms

Dies sind nur Startwerte. Das Ergebnis muss gegen echten Inhalt und Hintergrund geprüft werden. Keine Schriftarten, Illustrationen oder Bewegungsbibliotheken heimlich laden.

Hero-Komposition (vollständiger erster Viewport)

Für öffentliche Portfolio-/Landing-/Startseiten mit einem Hero eine Header + Hero-Komposition des ersten Viewports verwenden (min-height: 100svh mit 100vh Fallback) anstelle eines abgeschnittenen Hero mit fester Höhe. Ein tatsächliches In-Flow-Header abziehen, nicht zweimal für Overlays. Auf kurzen mobilen Bildschirmen und bei Zoom natürlich wachsen lassen. Materialanforderung: Der erste Viewport zeigt eine unverkennbare matte Scheibe, die einen sichtbaren, sorgfältig komponierten Hintergrund filtert – nicht 80 % leeren dunklen Raum über gewöhnlichem Text. Visuelles Interesse aus bedeutungsvoller geschichteter Struktur und markenkonformem Umgebungslicht erzeugen; keine Fotos, erfundenen Inhalte oder generischen Platzhalter erfinden.