Blur craft

O que Blur craft faz?

A maioria dos vidros na web parece barata por três razões: nada interessante está atrás dele, o material é eum tom plano com um desfoque, e o texto sobre ele é um cinza turvo que ninguém mediu. Vidro que parece caro (os materiais da Apple, visionOS, os melhores sites de produtos) acerta três coisas, nesta ordem:

1. A luz atrás do vidro é projetada. O vidro mostra o que está atrás, então coloque uma luz ali.
2. O vidro é um material, não um tom. Desfoque saturado, um preenchimento gradiente, uma borda iluminada, um brilho especular, profundidade, granulação. Isso está em assets/glass.css.
3. O texto é medido. O vidro translúcido muda o contraste a cada pixel atrás dele, então o contraste é verificado no pior ponto, por script, em três estados (scripts/glass-contrast.mjs).

Caminho rápido

Estou construindo…	Use	Notas
Uma barra de navegação fixa	.gs-bar (surfaces.css)	Fundo estendido; adicione gs-bar--on-scroll para tornar vítreo apenas após a rolagem
Um player, dock ou pílula sobre arte	.gs-dock.glass.glass--clear + liquid-glass.js	Liquid Glass claro, um por tela; tom adaptativo se a arte mudar muito
Um cartão ou painel flutuante com texto	.glass.glass--regular	thick sobre uma foto detalhada
Um menu, popover ou barra de comandos	.gs-menu.glass	32px sobre ~86%, destaque superior de 0,5px
Um diálogo	.gs-veil + .gs-dialog.glass.glass--thick	glass--solid quando confirma dinheiro, exclusão ou assinatura; gs-veil--flat + .gs-modal-open quando o vidro cromado está abaixo
Um toast ou uma folha inferior	.gs-toast.glass.glass--regular / .gs-sheet.glass.glass--thick	As classes gs- são apenas layout; o material vem de .glass
Conteúdo desvanecendo sob uma barra	Desfoque progressivo (receita 2)	Um efeito de borda de rolagem por visualização
Um título chegando, ou um valor mudando	Revelação por desfoque (4) / crossfade de 2px (4b)	Uma vez por tela
Uma página lavada nas cores da arte	Fundo de arte, assado (receita 8)	Nunca um desfoque ao vivo sob vidro fixo
Um projeto Tailwind v4	glass.css + glass.tailwind.css (glass-blur-24, …)	O backdrop-blur-* do Tailwind quebra no Safari Sonoma
Um aplicativo nativo (SwiftUI, Flutter, React Native, Compose)	references/native.md	Mesmo método, material de cada kit de ferramentas
Chrome para um editor de foto, vídeo ou design	.glass.glass--thick.glass--neutral	Neutro: sem aumento de saturação, o vidro não deve recolorir o trabalho

Depois: componha a luz (§1), defina o material (§2), verifique (§5). assets/demo.html mostra cada superfície ao vivo com controles; abra-o para ver o que cada classe faz antes de escolher.

1. Componha a luz primeiro

Decida o que estará diretamente atrás de cada superfície de vidro e torne-a a coisa mais luminosa ali.

• Coloque uma luz sob o vidro: um brilho, o sol na arte, as cores do produto, um componente WebGL ao vivo. Cor plana desfocada é a mesma cor plana; vidro sobre um vazio é uma caixa cinza.

• Deixe a luz cruzar a borda. O melhor vidro fica metade sobre a luz e metade sobre a escuridão, então a cor muda ao longo de sua largura.

• Aponte a borda para a luz. Defina --glass-light para a cor da luz (255 200 160 para um pôr do sol) e --glass-rim-angle para sua direção. A extremidade brilhante da borda enfrenta a luz:

  Luz de	canto superior esquerdo	topo	canto superior direito	direita	canto inferior direito	fundo	canto inferior esquerdo	esquerda
  ângulo	135deg	180deg	225deg	270deg	315deg	0deg	45deg	90deg

  Uma luz sob o vidro pega o ângulo de sua borda mais próxima mais ~15deg em direção ao centro. O ângulo é um @property registrado, então pode seguir o ponteiro ou a rolagem suavemente (os destaques da Apple viajam ao redor do material conforme a luz se move).

• Dimensione o vidro como o herói que ele é. Ele se lê como um material quando é grande o suficiente para mostrar a mudança de cena sob ele. A Apple faz vidros maiores se comportarem como vidro mais espesso: sombra mais profunda, dispersão mais suave.

2. Defina o material

Use assets/glass.css (renomeie o prefixo glass ao copiar) e assets/surfaces.css para as superfícies prontas, ou os componentes: Glass.tsx (React), Glass.vue (Vue 3), Glass.svelte (Svelte 5). Não escreva manualmente um cartão de backdrop-filter de uma linha.

Escreva backdrop-filter com valores literais, nunca var(), sem prefixo primeiro e -webkit- por último. Safari 18 e 26 no macOS Sonoma não renderizam desfoque quando o filtro é construído a partir de propriedades personalizadas (WebKit 297620, aberto), e o backdrop-blur-* do Tailwind v4 é construído exatamente dessa forma. O mesmo relatório de bug mostra a propriedade sem prefixo falhando lá mesmo com um valor literal, então a declaração prefixada vai por último, onde Safari a aplica (Chrome e Firefox a ignoram). glass.css tem um filtro literal por espessura × tom e muda por classe; variáveis são boas para preenchimentos, escurecimentos e cores.

Espessura. Escolha por quanto texto o vidro carrega. Os valores foram calibrados com o verificador de contraste sobre uma luz brilhante em demo.html:

Classe	Desfoque, escurecimento	Passa 4.5:1 sobre uma luz brilhante?	Use para
glass--clear	16px, 22%	Não: apenas texto e ícones grandes ou em negrito	Docks, botões de reprodução, pílulas sobre mídia (Apple: claro precisa de conteúdo brilhante em negrito e uma camada de escurecimento)
glass--thin	24px, 30%	Não sobre a luz mais brilhante	Controles, chips, pequenos cartões sobre fundos moderados
glass--regular	32px, 48%	Sim na página de calibração; um pôr do sol brilhante atrás de um player precisou de thick a 0.62	Players, painéis, toasts: o padrão. O estado sem desfoque (apenas tom) é geralmente o que falha primeiro
glass--thick	44px, 56%	Sim	Menus, folhas, diálogos, qualquer coisa com muito texto
glass--solid	4px, 92%	Sim	Pagamentos, exclusões, assinaturas (acima de ~85% de preenchimento um grande desfoque não pode ser visto, então são 4px)

Adicione glass--light para vidro claro com texto em tinta, e glass--neutral em aplicativos onde a cor é crítica (foto, vídeo e editores de design): sem aumento de saturação ou mudança de tom, porque o vidro não deve alterar a aparência do trabalho. Sobre uma foto detalhada, comece com thick e --glass-dim: rgb(10 10 18 / 0.65–0.75) (é uma cor, não um número): vidro vívido e texto legível se puxam mutuamente, então gaste a vivacidade na borda, no brilho e na luz que se espalha ao redor do vidro.

Dois níveis, como iOS 26.1: um nível matizado (mais opacidade, nunca menos) é ativado para prefers-contrast: more (a configuração que os usuários do Safari podem acessar; Safari não tem prefers-reduced-transparency), com glass--tinted, ou em todo o site com <html data-glass="tinted">. glass.css também lida com Windows High Contrast (superfície sólida Canvas), impressão (caixa simples com borda), modo de captura para ferramentas de screenshot e RTL.

O vidro pertence à camada de controle (nav, barras de ferramentas, docks, menus, folhas, diálogos) flutuando sobre conteúdo, nunca o próprio conteúdo, e nunca vidro sobre vidro (Apple, WWDC25). Aplique tom apenas na ação primária. Combine com o registro do briefing: briefings imersivos levam luz forte e vidro claro no controle principal; briefings confiáveis (finanças, saúde) levam vidro espesso ou sólido e quase nenhuma luz.

references/material.md tem o resto: o que cada camada faz e porquê, os predefinidos lidos da Apple.com, Linear, Raycast, Radix, Material e Fluent, a lista completa de regras da WWDC25 da Apple e a tabela de registro.

3. Efeitos de assinatura

Código em references/recipes.md:

• Refração Liquid Glass: a borda dobra o que está atrás como uma lente, com aberração cromática opcional (0.6–1). Duas versões: liquid-glass.ts/.js refrata qualquer conteúdo da página, mas apenas no Chromium (Safari não renderiza nada para filtros de fundo SVG, WebKit 245510); liquid-glass-webgl.js refrata um fundo que a própria página desenha (um <canvas>, <img> ou <video>, como um papel de parede principal) em todos os navegadores, renderização verificada no Chromium e WebKit. Em outros lugares, o material fosco deve parecer completo por si só. Refração e fosco são trocas: a dobra aparece através de vidro claro (blur 0–6); fosco (12–20) cobre borda a borda e a dobra se torna uma suave mudança de cor. Claro para uma palavra ou ícone, fosco para frases, texto a uma largura de borda dentro da borda. Nunca em um diálogo sobre um véu: não há nada nítido para dobrar.
• Fundo estendido para barras fixas: a cor chega ao vidro antes do conteúdo rolar sob ele. gs-bar--on-scroll torna a barra vítrea apenas após a rolagem, em CSS puro (animações orientadas por rolagem).
• Desfoque progressivo: o conteúdo se dissolve sob uma barra em vez de ser cortado. Camadas mascaradas empilhadas são a única maneira até CSS obter linear-blur() (proposto, csswg #13285).
• Crossfade com ponte de desfoque: desfoque de 2px durante uma troca de estado (Emil Kowalski).
• Revelação por desfoque: de blur(8px), uma vez, como o momento de chegada.
• Véu de foco: a página atrás de um diálogo recua 4–8px.
• Morph de vidro e pressão: um morph layoutId entre formas de vidro próximas (Cursor: 0.34s, [0.32, 0.72, 0, 1]) e um pulso de brilho interno ao pressionar, não uma escala.
• Mesclando formas de vidro: uma camada de vidro cortada por uma máscara SVG com filtro goo, para que formas próximas se juntem com um pescoço líquido como os recipientes de vidro da Apple (receita 11, testada no Chromium).
• Brilho ambiente do vídeo: uma amostra de 10×6 canvas do vídeo em reprodução, ampliada (receita 8b).
• Matização: croma ~0.03–0.05 para vidro estrutural, alpha de cor relativa para matizes (receita 12).
• Profundidade de campo, desfoque de movimento por velocidade, fundo de arte (assado), conteúdo bloqueado, granulação.

4. Mantenha rápido

Projete a aparência primeiro, depois segure estes:

• Animações longas ou em loop vão em opacidade e transform, não no raio de desfoque. Curta e única é bom: Apple.com anima o desfoque da cortina do menu 0 → 20px em 320ms.
• Nunca desfoque duas superfícies empilhadas ao mesmo tempo (a navegação da Apple reduz seu próprio desfoque enquanto um flyout está aberto). Quando um diálogo abre sobre vidro cromado, adicione .gs-modal-open ao <html> (o cromo para de desfocar e fica quase opaco) e use gs-veil--flat, ou asse o véu a partir de uma imagem ou fundo de canvas. Medido em um teste de editor de fotos: um véu de desfoque em tela cheia ao vivo sobre cinco painéis de vidro rodou a 31fps; sem ele, 60.
• Um desfoque fixo ou pegajoso reexecuta a cada quadro de rolagem. Um grande por tela; asse grandes imagens desfocadas abaixo dele (medido: 60 → 22fps com desfoque ao vivo, de volta a 60 assado).
• Celulares: sete painéis de 18px custam ~3.5ms por quadro em um Mali-G57 (75–80% dos quadros no prazo vs 99% sem). Com mais de alguns painéis, remova backdrop-filter no ponto de quebra do celular do seu layout e mantenha o preenchimento translúcido (ou deixe glass-tier.js decidir por dispositivo).
• Orçamento a área desfocada, não o raio ou a contagem. Medido para este skill (Chromium, renderização por software a 2×, fundo em movimento, vsync ligado): raio 4 → 64px e 1 → 9 superfícies com a mesma área total não fez diferença; desfocar 90% da tela caiu para 51fps (p95 33ms). Isso corresponde à redução de amostragem Skia para grandes desfoques. Os números são relativos (um Mac rápido renderizando em software), a classificação é o que importa.
• Dê a html uma cor de fundo opaca: Safari então pula uma camada de composição extra em tela cheia para páginas com vidro (WebKit 271340: a correção pula a camada apenas para documentos opacos).
• Não desfoque sob um preenchimento opaco. Framer e Dia enviam backdrop-filter em fundos sólidos, pagando por um desfoque que ninguém pode ver. Acima de ~85% de preenchimento, use ≤ 4px ou nenhum (toasts do Arc: 85% e 3px).
• Escalone o vidro por dispositivo: assets/glass-tier.js define data-glass-tier como full, lite (um desfoque de 8px) ou flat (sem desfoque, mais tom) com base na memória do dispositivo, Save-Data, uma sonda de taxa de quadros (o Modo de Baixo Consumo do iOS limita a animação a 30fps de propósito) e Compute Pressure, da mesma forma que Android, Fluent e Apple reduzem o desfoque em dispositivos fracos ou com economia de energia.
• Sobre vídeo, não desfoque o vídeo em reprodução: amostre-o em um canvas minúsculo (receita 8b) e remova o vidro em tela cheia. Safari nunca passa pixels de vídeo para filtros SVG.
• Raiz do fundo: um pai com opacity < 1, filter, uma máscara, clip-path, mix-blend-mode, backdrop-filter ou will-change em qualquer um deles achata o vidro dentro dele. Isso inclui um fade de pai do Framer Motion e um filtro goo em um pai de bolhas de vidro. Aplique fade no próprio vidro; limpe filtros de revelação (filter: none) quando terminarem.
• backdrop-filter faz um elemento o bloco de contenção para filhos position: fixed: menus de portal, toasts e diálogos fora de contêineres de vidro.
• Um view-transition-name permanente em um ancestral achata o vidro no Chromium; defina nomes apenas durante a transição. Fades de transição de framework em um wrapper fazem o mesmo: aplique fade no próprio vidro.
• Tirar screenshots, imagens OG ou PDFs de vidro: html2canvas, Satori e impressão descartam ou quebram o desfoque. Defina data-glass-capture no <html> enquanto captura (glass.css torna o vidro opaco) e veja quirks.md.

5. Verifique (obrigatório)

Execute todos estes antes de considerar o vidro pronto:

1. Verificação de fosco: node <skill>/scripts/frost-check.mjs <url ou arquivo.html> mede, para cada superfície de vidro, quantos detalhes o desfoque remove (desfoque ligado vs desligado). NO BLUR significa uma raiz de fundo, um prefixo quebrado ou var(), ou um mapa Liquid Glass desatualizado; FLAT significa que não há nada atrás para medir. Para verificar visualmente, coloque texto vermelho em negrito atrás do vidro, capture em deviceScaleFactor: 1 e amplie.
2. Contraste, medido, no pior fundo: node <skill>/scripts/glass-contrast.mjs <url ou arquivo.html>. Aponte para o estado realista mais brilhante, não o padrão bonito: a foto mais clara, um quadro diurno, uma imagem com +2 EV de exposição, a seção de página branca que rola sob a barra (adicione parâmetros de URL ou um estado de teste para que o script possa carregá-lo). Em um editor, a foto padrão passou a 8.7:1 e um quadro brilhante falhou a 4.4:1. Verifique também a largura do celular (--width 390 --height 844). Ele esconde o texto, encontra o pixel mais brilhante e mais escuro sob cada linha e verifica 4.5:1 (3:1 grande) em três estados: normal, apenas tom (desfoque desligado, como o Modo de Baixo Consumo do iOS mostra) e prefers-contrast: more. Corrija falhas aumentando a espessura, aumentando o alpha em --glass-dim (por exemplo,

...

[truncado para tradução - o restante do documento segue padrão semelhante de instruções detalhadas, referências e código]

6. Referências e recursos

• assets/glass.css: Folha de estilos principal para materiais de vidro.
• assets/surfaces.css: Superfícies de vidro prontas (nav, dock, menu, etc.).
• assets/demo.html: Demonstração interativa de todas as superfícies.
• assets/glass-tier.js: Escalonamento de vidro por dispositivo.
• scripts/frost-check.mjs: Verificador de fosco.
• scripts/glass-contrast.mjs: Verificador de contraste.
• references/material.md: Detalhes sobre materiais, camadas e predefinições.
• references/recipes.md: Receitas para efeitos avançados.
• references/native.md: Orientação para aplicativos nativos.
• components/Glass.tsx, Glass.vue, Glass.svelte: Componentes para React, Vue e Svelte.
• quirks.md: Comportamento estranho e soluções alternativas.

---

Este skill é mantido por sridhar-raj. Contribuições são bem-vindas.