Ver o Liquid Glass React no GitHub
O Liquid Glass React é um componente React que recria o efeito Liquid Glass da Apple. Você coloca qualquer conteúdo dentro dele, como um botão ou um card, e ele ganha o visual de vidro.
É uma biblioteca de código, não uma skill de agente: seu agente de IA escreve o código que a usa.
É gratuito sob a licença MIT. Em 28 de outubro de 2026 o repositório tinha cerca de 6.500 estrelas no GitHub.
O que ele faz
- Curva e refrata o fundo nas bordas, como vidro de verdade.
- Permite ajustar o quanto o vidro é fosco, o raio dos cantos, a saturação das cores e a aberração cromática.
- As bordas e os brilhos captam a luz que está embaixo, como na versão da Apple.
- Reage ao hover e a cliques, com um ajuste de elasticidade que dá um toque “líquido”.
- Tem quatro modos de refração. Segundo o README, o modo shader é o mais preciso, mas não o mais estável.
O que saber antes
O README avisa que o Safari e o Firefox suportam o efeito só em parte: o deslocamento, ou seja, a curvatura do fundo, não aparece neles. Então o efeito completo aparece em navegadores baseados em Chromium, e alguns visitantes verão uma versão mais simples. O vidro também precisa de algo atrás, como uma imagem ou um degradê, para parecer vidro.
Como instalar
npm install liquid-glass-reactDepois peça ao seu agente para envolver um botão ou card com o componente LiquidGlass e ajustá-lo, por exemplo menos fosco ou um formato mais arredondado. O README tem o link de uma demo ao vivo.