WebGL · união suave de SDFs
Fusão líquida
No iOS 26 um botão de vidro se divide em vários e depois volta a ser um só. Aqui isso é uma união suave de funções de distância: quando duas formas se aproximam, o shader preenche o vão com uma ponte de vidro. Toque no botão + ou arraste-o para ver os itens escorrendo atrás.
- Técnica
- smin() entre até 8 retângulos arredondados; molas com atraso diferente para cada item
- Funciona em
- Qualquer navegador com WebGL
- Custo
- Baixo. A forma é calculada, não desenhada: mudar tamanho ou posição não custa nada
SVG · backdrop-filter: url()
Refração sobre o DOM
O WebGL só refrata o que ele mesmo desenha. Para dobrar HTML de verdade, com texto selecionável e rolagem, o vidro usa um filtro SVG dentro do backdrop-filter. Role o artigo e arraste a lupa por cima do texto.
A luz faz curva no vidro
Quando a luz passa do ar para o vidro, ela desacelera e muda de direção. A lei de Snell descreve essa curva: n₁ · sen θ₁ = n₂ · sen θ₂. Quanto maior o índice de refração, mais forte a curva.
Num bloco de vidro 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. Por isso o conteúdo parece escorrer pela borda.
| Material | Índice n (589 nm) |
|---|---|
| Ar | 1,000 |
| Água | 1,333 |
| Vidro crown (BK7) | 1,517 |
| Vidro flint (F2) | 1,620 |
| Safira | 1,770 |
| Diamante | 2,417 |
O índice muda com a cor. O vermelho curva menos que o azul, e essa diferença, a dispersão, é medida pelo número de Abbe: cerca de 64 no BK7 e 36 no flint. Nas bordas do vidro ela vira uma franja colorida. Aqui a franja sai de três mapas de deslocamento com escalas um pouco diferentes, um para cada canal.
O filtro lê o que está atrás do elemento e redesenha cada pixel a partir de outro ponto.
Neste palco o vidro usa backdrop-filter: url(#filtro). O filtro carrega um mapa de deslocamento gerado em JavaScript: o canal vermelho guarda o deslocamento horizontal e o verde, o vertical. O feDisplacementMap usa esse mapa para buscar cada pixel do fundo em outro lugar.
Como o mapa é calculado:
- Para cada pixel, mede a distância até a borda arredondada (uma SDF).
- No bisel, empurra a amostra para dentro, com mais força perto da borda.
- Na lupa, aproxima a amostra do centro para ampliar.
- Grava o vetor nos canais R e G, com 128 valendo zero.
Como o filtro trabalha sobre pixels já desenhados, qualquer coisa atrás do vidro entra no efeito: texto, imagens, vídeo, até outro canvas. O custo cresce com a área do vidro, não com a complexidade da página.
Este navegador não aplica filtros SVG dentro de backdrop-filter. Só Chrome, Edge e outros navegadores Chromium fazem isso hoje. Você está vendo os mesmos elementos com desfoque comum.
- Técnica
- feImage com mapa gerado em canvas, três feDisplacementMap (R, G, B) e feBlend
- Funciona em
- Refração: Chrome, Edge, Opera. Safari e Firefox: desfoque comum
- Custo
- Baixo a médio. O mapa só é recalculado quando o elemento muda de tamanho
CSS + SVG · física de mola
Componentes no estilo iOS 26
Barras, botões e controles que viram lente quando você toca. Arraste o dedo pela barra de abas: a seleção estica na direção do movimento e amplia os ícones por baixo. Segure um interruptor ou o controle de volume para ver o botão virar vidro.
Ouvir agora
Ouvidos recentemente
Mais tocadas
- RefraçãoOs Prismas
- Índice 1,52Cobalto
- BiselSal & Sol
- Lei de SnellLagoa Azul
- Ângulo CríticoNoturno
- Número de AbbeDuna
9:41
Terça-feira, 6 de outubro
Conexões
Volume
Brilho
Período
Botões
- Técnica
- Molas em JavaScript (posição, velocidade, esticamento) e easing linear() gerado a partir da mesma mola
- Funciona em
- Todos. A lente com refração aparece no Chromium; nos outros, vira vidro desfocado
- Custo
- Baixo. Só transform e opacity animam; o filtro fica fixo
CSS · camada por camada
Anatomia de uma camada de vidro
Desligue cada ingrediente e veja o que ele faz. O CSS ao lado acompanha as caixas marcadas, pronto para copiar.