# LiquidGlass

By **ybouane** · Software & Tools

Uma biblioteca de efeito liquid-glass para a web, aplica refração realista de vidro, blur, aberração cromática e iluminação em qualquer elemento HTML usando 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

- Efeitos realistas de vidro em qualquer elemento HTML via shaders WebGL
- Refração, aberração cromática, reflexo Fresnel, especular e sombra
- data-config por elemento para ajuste fino
- Composição em camadas para que painéis de vidro empilhados se refracionem mutuamente
- Modos interativos de flutuação (arrastar) e botão
- Reativo a alterações no DOM via MutationObserver, com contador de FPS
- Instale via npm ou importe diretamente de uma CDN

---

LiquidGlass é uma biblioteca web que aplica efeitos realistas de vidro a qualquer elemento HTML usando shaders WebGL, refração, blur, aberração cromática, reflexo Fresnel, destaques especulares multi-luz, um contorno rim interno e sombra projetada. O funcionamento consiste em rasterizar os filhos não-vidro de um contêiner raiz em um canvas oculto (conteúdo estático é armazenado em cache, enquanto elementos marcados com `data-dynamic` ou qualquer vídeo são recapturados a cada quadro), depois recortando a cena atrás de cada painel de vidro e processando-a em um fragment shader, com composição em camadas para que painéis empilhados se refracionem mutuamente.

A inicialização é feita com `LiquidGlass.init({ root, glassElements })`, e cada painel pode ser ajustado por meio de um `data-config` rico por elemento: blur, refração, aberração cromática, destaque de borda, especular, Fresnel, raio de canto, profundidade de bisel, matiz, saturação, brilho, sombra, além dos modos interativos de flutuação (arrastar para mover) e botão. A biblioteca relê a configuração via `MutationObserver`, expõe um contador de FPS e um escape `markChanged()` para conteúdo que ela não consegue observar, reimplementa as regras de contexto de empilhamento CSS para a ordem de pintura, e pode ser instalada via npm ou importada diretamente de uma CDN.

## FAQ

### O que o LiquidGlass faz?

Ele aplica efeitos realistas de vidro, refração, blur, aberração cromática, reflexo Fresnel, destaques especulares e sombra projetada em qualquer elemento HTML usando shaders WebGL.

### Como faço para usá-lo?

Instale via npm (ou importe de uma CDN), chame LiquidGlass.init com um contêiner raiz e seus elementos de vidro, e configure cada painel com um JSON data-config de opções como refração, blur e raio de canto.

### Os painéis de vidro podem se sobrepor?

Sim. A biblioteca usa composição em camadas e reimplementa as regras de empilhamento CSS, para que um painel de vidro acima de outro o enxergue em sua refração; os elementos de vidro devem ser filhos diretos da raiz.

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