Biblioteca JavaScript · sem dependências

liquid-glass

O material de vidro do iOS 26 em uma linha de <script>. Os cinco modelos e os onze parâmetros do Liquid Glass Lab ficam expostos para você montar o seu: refração em WebGL com formas que se fundem, ou vidro SVG sobre qualquer elemento da página.









  

    
createStage · WebGL
Palco de refração

    
Formas de vidro desenhadas num shader sobre qualquer fundo: imagem, vídeo, canvas ou uma função de desenho. Arraste as gotas e encoste uma na outra. O painel é gerado a partir de LiquidGlass.presets e LiquidGlass.params.

  

  

    
    
  

  
  






  

    
glass() · SVG + backdrop-filter
Vidro sobre o DOM

    
Qualquer elemento vira vidro com glass(el) ou só com o atributo data-liquid-glass. A barra, os botões e a lupa abaixo refratam o artigo de verdade que rola por trás. Refração e bisel se ajustam ao tamanho de cada elemento.

  

  

    

      

        
Luz que dobra na borda

        
Quando a luz passa do ar para o vidro, ela desacelera e muda de direção. Num bloco com bordas arredondadas, o centro é plano e deixa a imagem passar quase intacta; no bisel a superfície inclina e os raios são puxados para dentro.

        

        
O índice de refração muda com a cor. O vermelho curva menos que o azul, e essa diferença é a dispersão: cerca de 64 no número de Abbe do vidro crown, 36 no flint.

        
Duas gotas próximas se juntam porque a tensão superficial busca a menor área.

        
O reflexo na borda depende do ângulo: quanto mais rasante a visão, mais luz o vidro reflete. É o efeito Fresnel, imitado aqui por um filete claro e um gradiente no contorno.

        

      

      

        

          Óptica
          
            
            
          
        

        
        

          
          
          
        

      

    

    
  

  
  






  

    
CDN · ESM · atributos
Instalar

    
O arquivo minificado é servido pelo jsDelivr direto do repositório no GitHub (fixe a versão na URL) e também pelo GitHub Pages.

  

  

  






  

    
LiquidGlass.params · LiquidGlass.presets
Parâmetros e modelos

    
As duas tabelas abaixo são geradas em tempo real a partir dos objetos que a biblioteca exporta.

  

  

  
Modelos