Liquid Glass
Le verre liquide d’Apple, sur votre site : posez une lentille, une pilule, une carte, des gouttes — ou votre logo en verre — sur un fond animé ou sur votre photo. La lumière se courbe au bord, les couleurs se séparent, un reflet court sur l’arête, et une goutte liquide suit la souris puis fusionne avec la forme. Aperçu et image PNG gratuits ; le code s’emporte avec un abonnement, en un seul bloc sans aucune bibliothèque.
En trois gestes
- Choisissez le fond. Une aurore animée, une affiche typographique, ou votre propre photo. Elle ne quitte pas votre navigateur.
- Posez le verre. Une lentille, une pilule, une carte, des gouttes qui fusionnent — ou votre mot, votre logo, transformé en verre. Puis un look en un clic (Clair, Givré, Prisme, Eau, Mercure…) et affinez : réfraction, effet loupe, dispersion des couleurs, dépoli, teinte, reflets, ombre.
- Emportez. L’image PNG est gratuite, sans compte. Le code s’emporte avec un abonnement : un seul bloc à coller, le moteur est dedans, rien à déposer à côté.
Mettre l’effet sur votre site
Le bloc à coller
Le bouton Copier le bloc met dans votre presse-papier un bloc HTML complet : le cadre, le moteur (environ 35 Ko) et vos réglages, vos images comprises. Collez-le où vous voulez — un bandeau d’accueil, une section, une carte — et rechargez. Il n’y a rien d’autre à installer : aucune bibliothèque, aucun fichier à déposer.
La page autonome
Un fichier unique qui fonctionne seul, même hors ligne. Pour l’intégrer sans y toucher, appelez-le dans un cadre :
<iframe src="effect-labs-liquid-glass.html" style="width:100%;height:480px;border:0"
title="verre liquide" loading="lazy"></iframe>Modifier après coup
Les réglages sont écrits en clair à la fin du bloc : changez la teinte, la réfraction ou la forme directement dans le code, sans revenir ici.
Comment c’est fabriqué
Un vrai verre bombé dévie la lumière là où sa surface penche : presque pas au centre, beaucoup sur le bord. C’est ce qui donne au verre d’Apple ce bord qui « aspire » ce qu’il y a derrière, pendant que le centre reste net.
L’outil décrit la forme par une distance signée : pour chaque pixel, la distance au bord, négative à l’intérieur. Sa pente donne la direction du bord ; un profil arrondi transforme cette distance en pente du verre, et la pente décale l’endroit où l’on lit le fond. Lire le fond trois fois, un peu décalé pour le rouge, le vert et le bleu, sépare les couleurs comme un prisme. Deux formes proches se fondent l’une dans l’autre par un minimum lissé : c’est ce qui rend les gouttes liquides.
// La forme est une « distance signée » : négative dedans, positive dehors
float d = sdBox(p - centre, demiTaille, rayon);
// Sa pente donne la direction du bord ; le bord bombé dévie la lumière
float bord = 1.0 - clamp(-d / epaisseur, 0.0, 1.0); // 1 au bord, 0 au centre
vec2 decalage = normale * refraction * pente(bord);
// Trois lectures du fond, une par couleur : c'est la dispersion
vec3 c = vec3(fond(uv + decalage * 1.1).r,
fond(uv + decalage).g,
fond(uv + decalage * 0.9).b);Votre logo passe par le même chemin : son contour est transformé en carte de distances dans votre navigateur, puis il est traité comme n’importe quelle forme. Tout est dessiné en WebGL écrit à la main, sans Three.js ni aucune bibliothèque.
Ce qui marche, ce qui ne marche pas
- Un fond détaillé — du texte, une photo nette, des lignes — montre le mieux la réfraction. Sur un aplat de couleur, le verre ne dévie rien de visible : montez les reflets ou ajoutez des lignes de niveau.
- Un logo épais rend mieux qu’un logo fin : le bord bombé a besoin de matière. Pour un trait fin, réduisez l’épaisseur du bord.
- Pour poser du texte dessus, choisissez le look Givré ou montez la teinte : le verre clair laisse passer trop de détails pour un texte lisible.
- Sur téléphone, la goutte suit le doigt. Les visiteurs qui ont réduit les animations voient un verre immobile.
Questions fréquentes
- L’outil est-il gratuit ?
- L’aperçu, tous les réglages et l’export en image PNG sont gratuits, sans compte. Seul l’export du code demande un abonnement.
- Mes images sont-elles envoyées quelque part ?
- Non pendant les réglages : tout se passe dans votre navigateur. Elles ne sont transmises qu’au moment d’exporter le code, réduites, pour être embarquées dans le bloc — puis elles ne sont pas conservées.
- Combien pèse l’effet sur ma page ?
- Le moteur fait environ 35 Ko, sans aucune bibliothèque. Avec une photo en fond, comptez 100 à 250 Ko au total ; avec un fond généré (aurore ou affiche), rien de plus. Rien n’est chargé depuis un serveur tiers.
- Est-ce que ça marche sur iPhone, Firefox et Safari ?
- Oui. Le verre est dessiné en WebGL, que tous les navigateurs récents savent faire — contrairement aux filtres CSS « backdrop-filter » avec SVG, qui ne marchent que dans Chrome.
- Est-ce que ça marche sur WordPress, Webflow ou Framer ?
- Oui : le bloc se colle dans n’importe quel module HTML. Il n’a besoin d’aucun fichier à côté.
- Et l’accessibilité ?
- Le dessin est décoratif et ignoré des lecteurs d’écran. Les visiteurs qui ont réduit les animations voient un verre immobile ; ceux qui ont réduit la transparence, un verre plus opaque et plus lisible.
À voir aussi : les effets de verre, les fonds animés et les autres générateurs.