Voir Liquid Glass React sur GitHub
Liquid Glass React est un composant React qui recrée l’effet Liquid Glass d’Apple. Vous y placez n’importe quel contenu, comme un bouton ou une carte, et il prend l’aspect du verre.
C’est une bibliothèque de code, pas une skill d’agent : votre agent IA écrit le code qui l’utilise.
Il est gratuit sous licence MIT. Le 28 octobre 2026, le dépôt comptait environ 6 500 étoiles sur GitHub.
Ce qu'il fait
- Courbe et réfracte l’arrière-plan sur les bords, comme du vrai verre.
- Vous réglez le niveau de givre du verre, le rayon des coins, la saturation des couleurs et l’aberration chromatique.
- Les bords et les reflets prennent la lumière du dessous, comme chez Apple.
- Réagit au survol et aux clics, avec un réglage d’élasticité qui lui donne un côté « liquide ».
- Il a quatre modes de réfraction. Selon le README, le mode shader est le plus précis, mais pas le plus stable.
Ce qu’il faut savoir avant
Le README prévient que Safari et Firefox ne prennent l’effet en charge qu’en partie : le déplacement, c’est-à-dire la courbure de l’arrière-plan, n’y est pas visible. L’effet complet apparaît donc dans les navigateurs basés sur Chromium, et certains visiteurs verront une version plus simple. Le verre a aussi besoin de quelque chose derrière lui, comme une image ou un dégradé, pour ressembler à du verre.
Comment l’installer
npm install liquid-glass-reactDemandez ensuite à votre agent d’envelopper un bouton ou une carte dans le composant LiquidGlass et de le régler, par exemple moins de givre ou une forme plus ronde. Le README renvoie vers une démo en ligne.