Recréer l'effet Liquid Glass de la WWDC 2025 d'Apple avec CSS, SVG et physique

Cet article explore la recréation de l'impressionnant effet d'interface utilisateur Liquid Glass présenté lors de la WWDC 2025 d'Apple. Il utilise CSS, des cartes de déplacement SVG et des calculs de réfraction basés sur la physique pour obtenir une approximation convaincante. L'auteur explique les principes de la réfraction, en détaillant comment la lumière se courbe en traversant différents matériaux et comment des fonctions mathématiques décrivent la forme de la surface du verre. Des cartes de déplacement SVG sont ensuite utilisées pour simuler l'effet de réfraction. L'article aboutit à la création de composants d'interface utilisateur, tels que des loupes, des champs de recherche, des commutateurs et des curseurs, avec l'effet Liquid Glass. À noter que les performances optimales sont actuellement observées sur Chrome en raison de la compatibilité du navigateur avec les filtres SVG en tant que filtre d'arrière-plan.