Liquid Glass : fondamentaux pour une interface lisible et cohérente

Le verre est une relation, pas une décoration

Une surface vitrée n’a de sens que par rapport à ce qui se trouve derrière elle. Si le fond est uniforme, le flou ne raconte rien. S’il est trop détaillé, la surface devient bruyante. Commencez donc par trois plans explicites : scène, surface, contenu. La scène apporte couleur et mouvement; la surface contrôle la séparation; le contenu conserve un contraste stable.

Une bonne règle consiste à réserver le verre aux éléments flottants ou temporaires : navigation, palette de commandes, panneau de détail. Le contenu principal gagne souvent à rester opaque. Cette contrainte donne une hiérarchie compréhensible avant même que l’utilisateur lise les libellés.

Construire la matière

Quatre signaux suffisent : une transparence mesurée, un flou, une bordure lumineuse et une ombre diffuse. Aucun ne doit porter l’effet seul. Un grand flou sur un fond presque transparent ressemble à une erreur de rendu; une bordure blanche trop forte ressemble à un cadre.

Travaillez d’abord en niveaux de gris. Vérifiez la séparation des plans, puis ajoutez la teinte. Le rayon des angles doit suivre la taille de l’objet : plus généreux pour un panneau, plus compact pour un contrôle. La lumière doit également rester cohérente. Si le reflet principal vient du coin supérieur gauche, toutes les surfaces partagent cette direction.

Hiérarchie et densité

Toutes les cartes ne doivent pas être vitrées. Définissez trois niveaux : base pour les surfaces statiques, élevé pour les zones interactives et focus pour un élément temporaire. Faites varier légèrement l’opacité, la bordure et l’ombre, pas dix propriétés à la fois.

Le contenu dense demande davantage d’opacité. Une carte contenant un titre et deux actions peut tolérer plus de transparence qu’un tableau ou un long paragraphe. Le verre s’adapte à l’information, jamais l’inverse.

Concevoir les états avant l’animation

Dessinez repos, survol, focus clavier, pression et indisponibilité. Chaque état doit rester identifiable sans mouvement. Le survol peut relever la bordure; le focus doit ajouter un anneau net; la pression peut réduire légèrement l’échelle. Ne remplacez jamais un état sémantique par un simple déplacement de lumière.

Testez aussi les fonds extrêmes : très clair, très sombre et très contrasté. Ajoutez une couche de teinte ou un scrim quand le contexte menace la lecture. Le ratio de contraste s’évalue sur la couleur réellement composée, pas sur la valeur CSS théorique.

Une méthode de revue

À chaque écran, posez cinq questions : la profondeur est-elle lisible sans blur? Le texte reste-t-il clair sur tous les fonds? Le focus clavier est-il évident? La surface conserve-t-elle sa fonction sans animation? L’effet est-il encore utile en mode contraste renforcé?

Cette méthode transforme Liquid Glass en système et non en tendance. La suite détaille une implémentation CSS accessible, puis les interactions React au pointeur.