Liquid Morph
Trois gouttes violette, rose et cyan (80, 70 et 50 px) tournent au centre d'une scène de 280 × 160 px, se collent puis se détachent toutes les 4 s : un filtre SVG « goo » écrit dans le HTML floute la scène puis durcit les bords, et deux gouttes proches se soudent par un pont de matière avant de se toucher — CSS, zéro JavaScript, figées en pleine fusion si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Liquid comprend 31 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0408-root (fond #0a0a0f, 300 px de haut au minimum) contient deux choses. D'abord un <svg class="fx-0408-defs"> de 0 × 0 px, retiré du flux, qui ne sert qu'à porter le filtre <filter id="fx-0408-goo">. Ensuite la scène .liquid-morph-stage, 280 × 160 px, sans fond, qui reçoit filter: url(#fx-0408-goo) et centre trois .liquid-drop rondes : violette #a855f7 de 80 px, rose #ec4899 de 70 px, cyan #06b6d4 de 50 px. Chacune a sa boucle de 4 s (ease-in-out) : la violette va de −60 px à +20 px en largeur, la rose de +60 px à −20 px, la cyan de 40 px sous le centre à 20 px au-dessus, avec un léger gonflement entre ×0,95 et ×1,1. Au début de la boucle, 45 px séparent la violette de la rose ; vers 400 ms elles se rejoignent ; de 1 à 3 s les trois se chevauchent au centre, puis elles repartent chacune de leur côté.
Le filtre tient en trois lignes. feGaussianBlur stdDeviation="10" floute toute la scène : le bord de chaque goutte devient un dégradé d'opacité, et entre deux gouttes proches, les deux halos s'additionnent. feColorMatrix garde les couleurs et réécrit l'opacité (dernière ligne 0 0 0 20 -9 : opacité × 20 − 9) : ce qui est sous 45 % devient transparent, ce qui dépasse 50 % devient plein. Le bord redevient net, et la zone entre deux gouttes où les halos cumulés passent le seuil devient un pont plein. feComposite operator="atop" redessine enfin les gouttes d'origine par-dessus cette silhouette : les couleurs restent franches, seul le pont prend la teinte mêlée du flou. Mesuré sur l'axe horizontal à 400 ms de la boucle : 12 à 13 px de vide entre la violette et la rose sans le filtre, 0 px avec, à l'identique dans Chromium 151, Firefox 153 et WebKit 26. color-interpolation-filters="sRGB" évite que le flou, calculé sinon en lumière linéaire, assombrisse les ponts.
Trois choix tiennent l'effet debout. La scène n'a pas de fond : le seuil s'appliquerait au fond, qui deviendrait un rectangle plein, et les gouttes n'auraient plus de bord à souder. Le filtre est écrit dans le HTML, avec un id préfixé : url(#…) ne cherche que dans le document, et Firefox n'affiche plus du tout la scène quand l'id est introuvable ou que le <svg> est en display: none (mesuré : scène vide), là où Chrome et Safari ignorent le filtre et montrent trois disques plats. Enfin, le filtre a un coût : mesuré dans Chromium en rendu logiciel (sans carte graphique, le cas le plus lent), il prend 0,87 ms par image à la taille vendue contre 0,10 ms sans lui ; la même scène agrandie quatre fois (1 120 × 640 px, flou de 40) monte à 15,7 ms par image et divise la cadence par deux. Le filtre est fait pour une petite scène, pas pour un fond plein écran.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0408-rootarrête les trois boucles et pose les gouttes à −38 px, +38 px et 34 px sous le centre : une image fixe où les trois gouttes sont soudées, la fusion se lit sans mouvement. Mesuré : 0 % des pixels changent en 500 ms dans Chromium, Firefox et WebKit (3,6 % sans la préférence). - Contenu décoratif : la scène ne porte aucun texte et aucune information. Le
<svg>du filtre est marquéaria-hidden="true"etfocusable="false", les gouttes sont desdivvides que les lecteurs d'écran ignorent. Si les couleurs ont un sens (trois parfums, trois ingrédients), écrivez-le à côté, comme la légende des scènes ci-dessus : ne mettez pas de texte dans la scène, le flou et le seuil le rendraient illisible. - Contraste : sur le fond
#0a0a0f, la goutte violette mesure 5,0:1, la rose 5,6:1 et la cyan 8,1:1, au-dessus du seuil de 3:1 des éléments graphiques. Sur un fond clair, foncez les gouttes : le filtre ne change pas les couleurs. - Rythme : une boucle de 4 s, sans clignotement ni changement brusque de luminosité ; le mouvement reste dans un cadre de 280 × 160 px.
Compatibilité navigateur
CSS (filter: url() sur un élément HTML, animations de transform) + un filtre SVG de trois primitives écrit dans le HTML, zéro JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même fusion (pont plein à 400 ms de la boucle), même arrêt sous mouvement réduit. Deux copies de l'effet sur une page, avec le même id, fonctionnent dans les trois (filtres identiques) ; changez l'id si vous réglez une copie autrement. Coût mesuré dans Chromium en rendu logiciel : 0,87 ms par image à 280 × 160 px, 15,7 ms agrandi ×4.
Sans filtre SVG appliqué à du HTML (navigateur très ancien), la scène montre trois disques nets qui se croisent, sans pont de matière : le mouvement reste. Si vous déplacez le bloc <svg> dans une autre page ou le masquez en display: none, Firefox n'affiche plus la scène du tout : gardez le svg de 0 × 0 px dans la même page que la scène.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0408-root">
<svg class="fx-0408-defs" width="0" height="0" aria-hidden="true" focusable="false">
<filter id="fx-0408-goo" color-interpolation-filters="sRGB">
<feGaussianBlur … stdDeviation="10" />
<feColorMatrix … values="… 0 0 0 20 -9" />
<feComposite in="SourceGraphic" in2="goo" operator="atop" />
</filter>
</svg>
<div class="liquid-morph-stage">
<div class="liquid-drop liquid-drop-1"></div> … (3 gouttes)
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Force de la fusion (HTML — stdDeviation="10" du feGaussianBlur) |
10 | Plus le flou est large, plus le pont se forme tôt. Mesuré : à 300 ms de la boucle (26 px de vide sans filtre), il reste 27 px de vide à 6, 22 px à 10, 0 px à 16 ; mais à 16 les gouttes s'arrondissent en masse molle et la petite cyan rétrécit. Restez entre 8 et 14 pour des gouttes de cette taille. |
Seuil (HTML — dernière ligne du feColorMatrix, 0 0 0 20 -9) |
20 −9 (seuil autour de 45 à 50 % d'opacité) | 18 -7 abaisse le seuil : gouttes et ponts plus gras (+10 % de surface mesurée), fusion plus précoce. 30 -14 donne des bords plus secs et des ponts plus fins. Gardez le second nombre autour de la moitié du premier. |
Couleurs (CSS — background de .liquid-drop, -2, -3) |
#a855f7, #ec4899, #06b6d4 | Le filtre garde les couleurs telles quelles ; seul le pont prend la teinte mêlée du flou. Des couleurs voisines donnent une seule matière, des couleurs opposées montrent mieux le mélange. |
Vitesse (CSS — 4s dans les trois animation) |
4 s | Changez les trois durées ensemble pour garder les gouttes en phase. 6 s donne une matière plus épaisse, 2,5 s un bouillonnement. Un animation-delay négatif identique sur les trois décale le point de départ de la boucle. |
Taille de la scène et des gouttes (CSS — .liquid-morph-stage, .liquid-drop-1/2/3, keyframes) |
280 × 160 px ; gouttes de 80, 70 et 50 px ; trajets de 60 et 40 px | Pour agrandir, multipliez ensemble la scène, les gouttes, les distances des keyframes et le stdDeviation. Le coût du filtre suit la surface : ×4 en largeur et en hauteur, la cadence chute de moitié en rendu logiciel. |
Fond (CSS — .fx-0408-root) |
#0a0a0f | Changez le fond de la racine ou retirez-le pour poser les gouttes sur votre page. Ne donnez jamais de fond à .liquid-morph-stage : le seuil le transformerait en rectangle plein. |
FAQ
filter: url(#fx-0408-goo) désigne un élément du document lui-même : le filtre doit être dans la page où se trouve la scène. Gardez le bloc <svg class="fx-0408-defs"> tel quel, à 0 × 0 px. Mesuré : si l'id est introuvable ou si le svg passe en display: none, Firefox n'affiche plus du tout la scène, Chrome et Safari montrent trois disques plats sans pont. Deux copies de l'effet sur la même page peuvent partager l'id (filtres identiques) ; si vous réglez l'une autrement, donnez-lui son propre id et son propre filter: url().
