Recreando el efecto Liquid Glass de la WWDC 2025 de Apple con CSS, SVG y física

Este artículo profundiza en la recreación del impresionante efecto de IU Liquid Glass presentado en la WWDC 2025 de Apple. Utiliza mapas de desplazamiento CSS, SVG y cálculos de refracción basados en física para lograr una aproximación convincente. El autor explica los principios de la refracción, detallando cómo la luz se curva al pasar por diferentes materiales y cómo las funciones matemáticas describen la forma de la superficie del vidrio. Los mapas de desplazamiento SVG se utilizan entonces para simular el efecto de refracción. El artículo culmina en la creación de componentes de IU, como lupas, cuadros de búsqueda, interruptores y deslizadores, con el efecto Liquid Glass. Tenga en cuenta que el rendimiento óptimo se observa actualmente en Chrome debido a la compatibilidad del navegador con filtros SVG como filtro de fondo.