Recriando o efeito Liquid Glass da WWDC 2025 da Apple com CSS, SVG e Física

Este artigo mergulha na recriação do impressionante efeito de IU Liquid Glass apresentado na WWDC 2025 da Apple. Ele usa mapas de deslocamento CSS, SVG e cálculos de refração baseados em física para alcançar uma aproximação convincente. O autor explica os princípios da refração, detalhando como a luz se curva ao passar por diferentes materiais e como funções matemáticas descrevem a forma da superfície do vidro. Mapas de deslocamento SVG são então empregados para simular o efeito de refração. O artigo culmina na criação de componentes de IU, como lupas, caixas de pesquisa, interruptores e controles deslizantes, com o efeito Liquid Glass. Observe que o desempenho ideal é atualmente visto no Chrome devido à compatibilidade do navegador com filtros SVG como filtro de plano de fundo.