LIQUID GLASS : composant LiquidGlass pour votre site
⏱️ Temps de lecture estimé : 3 minutes
📌 LIQUID GLASS est un composant React qui pose une vraie lentille de verre sur la page : le DOM reste vivant sous la courbe, le texte reste sélectionnable, les liens cliquables — et la réfraction fonctionne dans Chrome, Safari et Firefox.
Le composant s’appelle Glass. On enveloppe une boîte stylée avec, et elle devient un matériau : elle givre et teinte ce qui passe derrière, se cerne d’un liseré lumineux — et dans Chrome comme Edge, elle plie réellement la page sous sa courbe. Aucun provider, aucun import CSS, aucune configuration.
La plupart des bibliothèques « liquid glass » trichent, chacune à leur manière. Celles qui s’appuient sur backdrop-filter: url() ne plient la page que dans Chromium : Safari et Firefox reçoivent un simple flou plat. Celles qui passent par WebGL rastérisent une capture html2canvas : le texte sous la lentille devient une image figée, plus sélectionnable, plus cliquable. Ici, un filtre SVG de déplacement s’applique sur l’élément lui-même via filter: url(). C’est le vrai DOM qui se réfracte.
Sous le capot, la géométrie de la lentille est rasterizée depuis un champ de distance signé, en trois passes RGB pour l’aberration chromatique au bord. Les valeurs de mouvement sont écrites impérativement à chaque frame : la lentille suit le pointeur à 60 fps sans re-render de React. Les contournements spécifiques à WebKit sont intégrés, et la matrice de support navigateur est détaillée dans BROWSERS.md.
La nuance est assumée dès le README : plier la page vivante passe par backdrop-filter: url(), qui n’existe que dans Chrome et Edge. Dans Safari et Firefox, une lentille libre givre, teinte et éclaire son bord, mais ne peut pas plier ce qui passe dessous. La parade tient en une idée : donner à la lentille une copie de ce qu’elle doit plier. Ses propres children en place pour un hero ou une carte, un node voisin via refract pour une loupe sur une photo, ou une surface WebGL pour la vidéo et le canvas — chaque bouton d’un lecteur devient alors sa propre lentille.
Points clés :
- 🔍 Le texte sous la lentille reste sélectionnable, les liens restent cliquables
- 🧭 Réfraction identique dans Chrome, Safari et Firefox, en pliant une copie du contenu
- 🎛️ Optiques réglables : dispersion chromatique, courbure, givre, liseré spéculaire
- 📹 Vidéo et canvas pliés en WebGL, une lentille par contrôle du lecteur
- 📦 Zéro dépendance à l’exécution, React seul en peer dependency
Le dépôt fournit aussi des composants finis à copier et posséder : un lecteur vidéo, un switch, un slider, une notification et un menu contextuel façon macOS. Le moteur, lui, est distribué sur npm en versions suivies ; les composants restent à votre main pour être restylés.
Je trouve l’approche rafraîchissante à deux titres. Le parti pris headless, d’abord : Glass n’impose ni style ni structure, vos children restent la couche nette au-dessus. L’honnêteté, ensuite : la limite navigateur est documentée en tête de README, parade comprise, au lieu d’être noyée dans une note de bas de page.
Cela reste un matériau à réserver aux interfaces qui en ont vraiment besoin : un panneau de notification sur un fond photo, des contrôles de lecteur, une loupe. Ailleurs, ce serait du spectacle gratuit. Liquid Glass est sous licence MIT et s’installe via npm i @samasante/liquid-glass.
Sources
