# LiquidGlass

By **ybouane** · Software & Tools

Una biblioteca de efecto liquid-glass para la web: aplica refracción de vidrio realista, desenfoque, aberración cromática e iluminación a cualquier elemento HTML mediante shaders WebGL.

- Source: https://liquid-glass.ybouane.com/
- Repository: https://github.com/ybouane/liquidglass
- Install: `npm i @ybouane/liquidglass`
- Tags: webgl, animation, ui, open-source, typescript, javascript, glass-morphism, frontend
- Pricing: free
- Upvotes: 0

## Features

- Efectos de vidrio realistas en cualquier elemento HTML mediante shaders WebGL
- Refracción, aberración cromática, reflexión Fresnel, especular y sombra
- `data-config` por elemento para un ajuste detallado
- Composición en capas para que los paneles de vidrio apilados se refracten entre sí
- Modos interactivos de flotación (drag) y botón
- Reactivo a cambios del DOM mediante `MutationObserver`, con contador de FPS
- Instalable desde npm o importable directamente desde un CDN

---

LiquidGlass es una biblioteca web que aplica efectos de vidrio realistas a cualquier elemento HTML mediante shaders WebGL, con refracción, desenfoque, aberración cromática, reflexión Fresnel, resaltes especulares multiluz, un borde interior rim y una sombra paralela. Funciona rasterizando los hijos no vidrio de un contenedor raíz sobre un canvas oculto (el contenido estático se cachea, mientras que los elementos marcados con `data-dynamic` o cualquier video se recapturan en cada fotograma), luego recorta la escena detrás de cada panel de vidrio y la procesa mediante un fragment shader, con composición en capas para que los paneles apilados se refracten entre sí.

Se inicializa con `LiquidGlass.init({ root, glassElements })` y cada panel se ajusta a través de un completo `data-config` por elemento: blur, refraction, chromatic aberration, edge highlight, specular, Fresnel, corner radius, bevel depth, tint, saturation, brightness, shadow, además de modos interactivos de flotación (drag-to-move) y botón. Vuelve a leer la configuración mediante un `MutationObserver`, expone un contador de FPS y una vía de escape `markChanged()` para el contenido que no puede observar, reimplementa las reglas de stacking-context de CSS para el orden de pintura, y puede instalarse desde npm o importarse directamente desde un CDN.

## FAQ

### ¿Qué hace LiquidGlass?

Aplica vidrio realista, refracción, desenfoque, aberración cromática, reflexión Fresnel, resaltes especulares y una sombra paralela a cualquier elemento HTML mediante shaders WebGL.

### ¿Cómo se usa?

Instálalo desde npm (o impórtalo desde un CDN), llama a `LiquidGlass.init` con un contenedor raíz y tus elementos de vidrio, y configura cada panel con un JSON `data-config` de opciones como refraction, blur y corner radius.

### ¿Pueden solaparse los paneles de vidrio?

Sí. Utiliza composición en capas y reimplementa las reglas de stacking de CSS, de modo que un panel de vidrio situado sobre otro lo ve en su refracción; los elementos de vidrio deben ser hijos directos del contenedor raíz.

---
[View on Analog](https://analoghq.ai/es/ybouane/software-tools/liquidglass)