Proyecto Seleccionado
Liquid Glass
Estudio interactivo de refracción, óptica y tensión superficial en la web. Un sistema de liquid glass construido con matemáticas puras, mapas de desplazamiento SVG y Astro.
Visitar sitioFecha
2026
Rol
Creative Development, Graphics Engineering
Stack
Astro 7, TypeScript, Tailwind CSS 4, SVG Filters
Resumen
Liquid Glass
Liquid Glass trata el vidrio líquido como un pipeline de render, no como un blur decorativo. Cada componente (lente, botón, switch, slider, cursor, input y tarjetas) recrea la forma en que la luz se refracta y se dobla a través de una superficie de vidrio real, combinando desplazamiento SVG, reconstrucción especular y clonado del DOM en tiempo real.
Galería de componentes de vidrio líquido: lente, botón táctil, switch, slider, cursor y campos de entrada, cada uno con su propia física.
Refracción y aberración cromática en tiempo real sobre contenido complejo del DOM, no un simple desenfoque.
Mapas de desplazamiento RG y una pasada especular generados por código a partir de la ecuación de superficie.
Panel de parámetros en vivo (bezel, grosor, IOR, refracción, blur, especular, saturación) para ajustar cada material.
Concepto
El vidrio como material, no como efecto
El objetivo no era imitar un cristal esmerilado con un blur, sino reconstruir el comportamiento óptico real de una superficie de vidrio: cómo la luz se dobla en el bezel, cómo el fondo se distorsiona y cómo el borde recupera su brillo húmedo.
Cada demo de la galería aísla una pieza de interfaz (lente, botón, switch, slider, cursor o input) para mostrar ese mismo material aplicado a un contexto de producto distinto.
Pipeline
De la ecuación de superficie al desplazamiento SVG
Cada forma parte de un perfil de superficie 1D cuya curva define la inclinación del borde. El código muestrea esa curva, calcula las normales y aproxima el rayo refractado para obtener un desplazamiento por punto.
Esas muestras se expanden en una textura RG que alimenta el filtro de desplazamiento SVG, mientras una segunda pasada reconstruye el brillo especular para que el vidrio se lea pulido y no solo distorsionado.
Implementación
Clonado del DOM y ajuste interactivo
El renderer clona la escena dentro de los límites del vidrio y la dobla a través del filtro, de modo que la refracción reacciona al contenido y al movimiento reales de la página.
Blur, saturación, alpha especular, escala de refracción, geometría y comportamiento de resortes quedan expuestos como controles, para que cada componente pueda sentirse materialmente diferente.
Stack
Herramientas
Frontend
- Astro 7
- TypeScript
- Tailwind CSS 4
- JavaScript vanilla
Render
- Ecuación de superficie 1D
- Muestreo de refracción
- Mapa de desplazamiento RG (SVG)
- Pasada especular
- Clonado del DOM en tiempo real
Alcance
- Galería de componentes de vidrio
- Generador de filtros SVG
- Documentación How It Works
- Despliegue estático en GitHub Pages
Galería
Vistas del Proyecto
Siguiente Proyecto