Shaders

Surface verre liquide

Un conteneur qui enveloppe n'importe quel contenu et glisse derrière lui une couche de verre qui déforme vraiment le décor : les lignes droites du fond se courbent sur les bords du panneau, comme derrière une lentille. Le tour vient de backdrop-filter, qui accepte une chaîne de filtres dans laquelle on branche un url(#filtre) pointant vers un feDisplacementMap SVG. La même texture PNG en base64 sert deux fois, comme carte de déplacement (canal R en x, canal B en y) puis comme grain mélangé en overlay : un seul asset, zéro requête. Les identifiants de filtres SVG étant globaux au document, un compteur de module numérote chaque instance pour que deux panneaux ne se marchent pas dessus. La couche de verre hérite du rayon via rounded-[inherit] : on règle l'arrondi une seule fois, sur le conteneur.

AMOUSSOU Siméon Céphas· 6 vues1