kennedys0/taste-style-glassmorphism

N'utiliser ce skill qu'après qu'un utilisateur a explicitement choisi ou qu'une configuration de projet confirmée le spécifie. Pour les nouvelles demandes UI non expliquées, utiliser un sélecteur de style comme à la place de décider du goût de l'utilisateur ici. La marque existante, l'accessibilité et les surcharges utilisateur priment sur tous les exemples ci-dessous. Le guide de style suivant n'est pas une autorisation pour commencer le codage UI avant la sélection du style.

Pack de style : Glassmorphism

ID : glassmorphism
Signature : Surfaces givrées et translucides flottant sur des couches de lumière/couleur différenciées, avec un contenu clair et une profondeur fonctionnelle.

Ceci est un style opt-in, pas le moteur par défaut. Ne l'activer que lorsqu'il est sélectionné par l'utilisateur ou le système de design du projet établi. Respecter l'anatomie du produit, la direction de la marque, l'accessibilité et les interactions existantes. Une page sombre générique avec un bouton bleu ne qualifie pas comme Glassmorphism.

Bonne adéquation / compromis

• Fonctionne bien pour : Portfolios expressifs, pages d'atterrissage produit, superpositions de navigation, interfaces médias, tableaux de bord créatifs et démos UI limitées.
• À utiliser avec précaution pour : Tableaux de données denses, lecture longue, formulaires critiques pour l'accessibilité, ou photos imprévisibles derrière du texte. Placer le contenu à haute densité sur des surfaces appropriées, pleines ou fortement teintées.
• Directions de référence : Un panneau givré clair et laiteux avec une lumière atmosphérique bleue douce et une géométrie arrondie douce ; ou un système de verre fumé foncé avec des panneaux d'ardoise translucides, un éclairage violet/cyan atténué et des contrôles lisibles. Les deux sont valides. Aucun ne force une palette de marque fixe.

Porte de fidélité du matériau verre – obligatoire

Avant de déclarer une page glassmorphism complète, la vue initiale doit visiblement se lire comme une composition en verre. Si un utilisateur a choisi ce style, un grand fond uni plus de la typographie et un bouton conventionnel est un ÉCHEC, même si les variables CSS sont nommées glass.

Un composant verre proéminent réussi démontre tous les éléments suivants :

1. Profondeur d'arrière-plan : un fond différencié significatif derrière la surface (champs de lumière douce, dégradés contrôlés, formes, photographie fournie pour le projet ou contenu d'application existant). Le verre a besoin de quelque chose pour filtrer visiblement. Les dégradés intentionnels et les formes de couleur ambiantes sont explicitement autorisés par Taste Engine anti-slop pour Glassmorphism lorsqu'ils établissent une lumière visible traversant un panneau. Ils ne sont pas intrinsèquement du slop.
2. Translucidité : le panneau laisse une partie de la chrominance/luminance de l'arrière-plan influencer son apparence. Éviter les cartes sombres complètement opaques commercialisées comme du verre.
3. Givrage : backdrop-filter: blur(...) (et -webkit-backdrop-filter si nécessaire) adoucit visiblement les détails de l'arrière-plan à l'intérieur du panneau, tandis que l'arrière-plan exposé à proximité reste plus clair. Une image d'arrière-plan floue seule n'est pas du verre dépoli.
4. Bord et profondeur lisibles : contour/lumière douce et fine, léger éclat intérieur, silhouette arrondie le cas échéant, et ombre ou séparation retenue. Le verre doit avoir une frontière perceptible, pas une dalle grise plate.
5. Clarté du contenu : le texte, les indicateurs de focus, les états de contrôle et les actions restent lisibles sur l'arrière-plan réel composé et avec les effets de repli désactivés.

Test de première vue : Dans une capture d'écran de bureau, identifier le panneau proéminent, l'arrière-plan distinct derrière lui, l'aspect flou/teinté à l'intérieur de sa limite, et son contour lumineux sans lire le titre de la page. Si ce n'est pas possible, réviser le matériau avant d'ajouter plus de contenu.

Pas une règle de comptage de cartes : Un panneau hero proéminent ou quelques surfaces de démonstration de composants suffisent. Ne pas couvrir chaque section de cartes transparentes identiques. Sur une vitrine de composants, utiliser des exemples fonctionnels honnêtes (interrupteur, champ de saisie, boîte de dialogue, toast en tant que démo étiquetée, navigation) pour démontrer le matériau et ses états ; ne pas inventer de statut produit réel ou de preuve sociale.

Exception explicite de dégradé d'arrière-plan — le verre est autorisé à briller

Surcharge spécifique à Glassmorphism : L'avertissement universel anti-slop contre les dégradés décoratifs génériques NE DOIT PAS être interprété comme une interdiction des dégradés, des champs de couleur en mesh, des formes de couleur floues, de l'éclairage atmosphérique ou de l'imagerie d'arrière-plan cohérente ici. Ce sont des couches d'arrière-plan habilitantes pour le matériau valides, même décoratives, car elles rendent la translucidité, le givrage, les bords et la profondeur perceptibles. Cette exemption n'est pas une permission pour du contenu fabriqué ou des effets inaccessibles/lents.

• Traitements d'arrière-plan autorisés : 1–3 champs de lumière radial-gradient() cohérents, un dégradé linéaire ou mesh multi-stop retenu, des formes ambiantes de couleur floues utilisant des pseudo-éléments, une illustration/photographie alignée sur la marque, ou du contenu existant derrière un panneau. Le CSS statique est souvent suffisant et ne nécessite pas d'images supplémentaires ni de bibliothèques d'animation.
• Exemple clair / laiteux : base blanc/glace avec des champs de lumière douce bleu/lavande froids derrière une carte blanche translucide ; le panneau adoucit visiblement les limites de couleur.
• Exemple foncé / fumé : base encre foncée avec des zones de lumière violet/cyan/teal contrôlées derrière des panneaux d'ardoise translucides ; les champs de dégradé brillants ne doivent pas obscurcir le texte blanc.
• Exigence de composition : Placer au moins une transition de lumière/couleur ou un élément d'arrière-plan reconnaissable derrière et en partie au-delà du panneau de verre principal afin que la différence filtrée vs non filtrée soit visible ; un dégradé uniforme plein écran sans variation locale peut encore échouer.
• Contrôle de la profondeur : L'arrière-plan doit avoir moins d'emphase que le contenu ; utiliser peu de sources de lumière avec une atténuation naturelle et des positions intentionnelles, plutôt que des taches violet/bleu par défaut sur chaque page. Utiliser la palette de marque de l'utilisateur et les références fournies.
• Performance et accessibilité : Privilégier les dégradés CSS statiques et les surfaces retenues. Éviter les animations de dégradé en mouvement plein écran, les flous d'arrière-plan excessifs sur toute la page, les textes petits et à faible contraste et les anneaux de focus cachés. Honorer les préférences de transparence et tester les replis opaques lisibles.
• Interprétation anti-slop : Évaluer les dégradés par but matériel, retenue et lisibilité, pas par leur simple présence. Supprimer un arrière-plan en verre utile pour satisfaire une heuristique de dégradé générique est une régression de conception.

Une bonne capture d'écran devrait rendre le matériau givré évident même si tous les titres et étiquettes sont cachés. Voir examples/glassmorphism/frosted-surfaces.css pour une implémentation de départ et tests/glassmorphism-visual.md pour les critères d'acceptation visuels.

Typographie et écriture

Utiliser un sans-serif propre adapté à la marque (system sans, DM Sans, Inter, etc.). Taille de lecture typique 15–17 px ; les caractères d'affichage peuvent être plus grands. Maintenir une forte hiérarchie typographique et éviter les textes ultra-fins sur des arrière-plans en verre variables. Un panneau givré léger bénéficie souvent d'un texte de premier plan foncé ; un panneau fumé foncé d'un blanc cassé à contraste élevé. Ne jamais substituer une lueur colorée à la hiérarchie typographique.

Direction des couleurs

Choisir une direction cohérente dans le contexte, ou utiliser la référence de l'utilisateur :

• Verre givré clair / laiteux : champ blanc pâle ou gris clair (#F0F4F8), lumière diffuse bleue froide ou autre teinte de marque derrière des panneaux blancs semi-opaques (rgba(255, 255, 255, 0.45)). La typographie est ardoise foncée (#0F172A) avec ardoise atténuée (#475569). Un léger reflet de verre est visible le long du bord supérieur (rgba(255, 255, 255, 0.75)).
• Verre fumé foncé / nuit : base bleu marine/encre foncée (#090D16) avec des champs de lumière ambiante violet/bleu/teal derrière des panneaux translucides bleu-gris (rgba(22, 28, 45, 0.55)). Le texte de premier plan est porcelaine net (#F8FAFC) avec ardoise atténuée (#94A3B8) ; les panneaux sombres ne sont pas des rectangles presque opaques.
• Règle de couplage de thème et d'anti-collision : Lors du passage entre les modes verre clair et foncé, le texte de premier plan, les bordures et les sources de lumière ambiante DOIVENT basculer en tandem. Le texte de premier plan doit maintenir un contraste d'au moins 4,5:1 à la fois contre la surface de verre dépoli et l'arrière-plan illuminé derrière elle. Ne jamais laisser de texte foncé sur du verre fumé foncé ou de texte blanc sur du verre givré clair.

La couleur seule n'est pas du Glassmorphism. Ne jamais utiliser par défaut du violet/cyan néon pour chaque marque. Préserver la marque et les exigences de contraste élevé. Vérifier le contraste réel du premier plan composé (WCAG AA 4.5:1 pour le texte normal, 3:1 pour le texte large ; les contrôles non textuels pertinents au moins 3:1).

Mise en page et géométrie

• Utiliser une composition premier plan/arrière-plan intentionnelle : arrière-plan ambiant → surfaces en verre → contenu net et contrôles interactifs. Distinguer 2–3 plans de profondeur sans encombrement de cartes imbriquées.
• Utiliser des coins cohérents (généralement 16–28 px pour les grands panneaux) et un espacement. Éviter une première vue surdimensionnée complètement vide juste pour atteindre 100svh.
• Sur les écrans responsives, les panneaux doivent s'empiler proprement, préserver un remplissage lisible et éviter un flou ou un débordement rogné. L'en-tête, le contenu hero et les contrôles doivent tenir ou s'étendre naturellement.

Surfaces, profondeur, texture

• Recette verre : teinte semi-transparente (rgba(...) ou color-mix), backdrop-filter: blur(16px) saturate(140%), une bordure translucide de 1px, un léger reflet supérieur intérieur et une ombre douce en couches. Commencer autour d'un flou de 12–24 px, puis ajuster par rapport à l'arrière-plan réel.
• Verre clair : utiliser une surface teintée blanc avec un alpha d'environ 0,24–0,55 lorsque l'arrière-plan le permet ; trop d'opacité supprime l'effet givré. Un fort contraste de texte reste obligatoire.
• Verre foncé : utiliser une teinte ardoise/indigo autour de 0,25–0,56 alpha, un bord plus clair visible et une lumière ambiante contrastée derrière. Éviter à la fois les dalles noir de jais et les halos néon irritants pour les yeux.
• Indices de profondeur : arrière-plan flou doux derrière le panneau, un éclat intérieur retenu, une lueur/réflexion subtile sur le bord. Pas de fond d'écran générique en bulles nécessaire.
• Utiliser un repli @supports avec des surfaces solides lisibles lorsque le filtrage d'arrière-plan est manquant. Fournir une alternative à transparence réduite/contraste élevé. Le flou lui-même ne doit jamais être nécessaire pour comprendre le contenu ou interagir.

Voir examples/glassmorphism/frosted-surfaces.css dans le routeur complet du Taste Engine (la recette de tokens ci-dessus fonctionne également dans les installations autonomes) pour des tokens de départ indépendants clairs et foncés. Adapter les tokens au projet ; ne pas copier tous les exemples ou forcer une palette fixe.

Anatomie des composants et interaction

• Hero : rendre l'esthétique sélectionnée évidente immédiatement. Placer le titre réel du Taste Engine/projet et les CTA à l'intérieur ou chevauchant un plan de verre visible, ou présenter une composition de fenêtre en verre tout aussi convaincante. Fournir un arrière-plan éclairé de manière significative derrière le panneau.
• En-tête/nav : une barre givrée subtile peut chevaucher l'arrière-plan, mais garder le contraste et le focus visibles. Éviter une barre supérieure opaque plate visuellement déconnectée de la page lors de la démonstration d'une UI en verre.
• Exemples fonctionnels : interrupteur avec état marche/arrêt réel, option sélectionnable, onglet, modal, formulaire et un toast uniquement s'il est réellement déclenché ou clairement marqué comme démo statique. Montrer les états focus, hover, actif, désactivé et erreur lorsque applicable. Les surfaces de contrôle de premier plan peuvent être plus opaques que le verre parent pour la facilité d'utilisation.
• Boutons : peuvent être des surfaces d'accentuation pleines pour l'affordance ; tous les contrôles n'ont pas besoin d'être transparents. Un bouton conventionnel ne compense pas le verre manquant ailleurs.
• Contenu : réserver les conteneurs fortement teintés ou pleins lisibles pour les longs paragraphes, tableaux et formulaires ; ne pas placer de paragraphes sur des images translucides bruyantes.

Mouvement

Utiliser un retour d'interaction plutôt qu'un mouvement ambiant. 140–220 ms de fondu/translation au survol, à la sélection, au dévoilement de panneau ou au modal uniquement lorsqu'une action utilisateur le justifie. Préserver la continuité de la couche de verre. Pas d'orbs dérivants sans fin, de faisceaux lumineux en mouvement ou de rotations 3D obligatoires.

Recette optionnelle Anime.js v4

• Décision de mouvement : transitions CSS/natives pour la plupart des interactions ; Anime.js v4 est optionnel pour les transitions d'état coordonnées, pas une dépendance visuelle requise.
• Durée de départ : 180 ms, easing sans rebond. Animer opacity/transform compatibles avec le compositeur plutôt que d'animer continuellement le flou ou l'ombre de boîte.
• Réduire le mouvement : honorer prefers-reduced-motion et permettre les transitions interrompues/court-circuitées.
• Dépendance : suivre references/motion-engine.md du Taste Engine où disponible ; le skill autonome applique les mêmes directives.

Rédaction UI et microcopie

Directe, spécifique au produit et concise. Le verre est un matériau, pas une excuse pour une copie vague comme « l'avenir est transparent ». Éviter les badges, le statut de vérification, les utilisateurs, les scores de productivité ou les témoignages fictifs. Les données de démonstration doivent être explicitement étiquetées.

Tokens de départ (suggestions, pas un thème complet)

Token	Défaut verre clair	Défaut verre foncé
--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

Ce sont uniquement des valeurs de départ. Le résultat doit être vérifié par rapport au contenu réel et à l'arrière-plan. Ne pas charger secrètement des polices, illustrations ou bibliothèques de mouvement.

Composition hero (première vue complète)

Pour les portfolios publics/pages d'atterrissage/accueil avec un hero, utiliser une composition en-tête + hero en première vue (min-height: 100svh avec repli 100vh) plutôt qu'un hero rogné à hauteur fixe. Soustraire un en-tête réel en flux si nécessaire, pas deux fois pour les superpositions. Grandir naturellement sur les petits écrans mobiles et au zoom. Exigence matérielle : la première vue montre un panneau givré indubitable filtrant un arrière-plan soigneusement composé et visible—pas 80 % d'espace sombre vide au-dessus d'un texte ordinaire. Construire l'intérêt visuel à partir d'une structure en couches significative et d'une lumière ambiante alignée sur la marque ; ne pas inventer de photos, de faux...