Vidro Líquido Web

O que Vidro Líquido Web faz?

Um material de vidro de produção para sites, extraído de um site vivo Next.js + Tailwind. O código-fonte completo está em reference/:

• reference/liquid-glass.css: o material completo (tokens, superfície, variantes, vidro moldado, refração, degradação). Cerca de 2.200 linhas com comentários longos explicando cada valor. Leia a seção que você precisa em vez do arquivo inteiro.
• reference/glass.tsx: o componente React <Glass> e o filtro de refração SVG.
• reference/glass-specular.tsx: o destaque especular rastreado por ponteiro e inclinação.

A referência importa dois auxiliares do site (cn e LITE_CLASS de um módulo de modo leve). Substitua pelo próprio cn/clsx do projeto e um nome de classe para "efeitos desligados". Regras nomeadas sky-*, kiosk-* e seletores relacionados a oração são exemplos de variantes específicas do site. Remova-as ou use-as como padrões.

O que é vidro

O vidro tem quatro partes. Uma versão web parece barata quando entrega apenas a primeira:

1. Material: desfoque E um aumento de saturação (cerca de 200%). Abaixo de ~150%, parece plástico cinza. Adicione elevação de brilho e redução de contraste para que o conteúdo ocupado atrás se difunda em um lavagem suave.
2. Aro: um fio de cabelo brilhante onde a luz pega a borda, mais escuro na borda oposta. Desfoque sem aro nunca parece vidro.
3. Brilho: um destaque especular suave dentro da borda superior.
4. Profundidade: uma sombra ampla, muito suave e de baixa opacidade, não uma sombra de cartão apertada.

A refração (conteúdo se curvando na borda) é uma quinta parte, e a única que a web não pode fazer de forma barata. Ela precisa de backdrop-filter: url(#svg-filter), que funciona apenas no Chromium.

Onde colocar vidro

Coloque vidro na camada de navegação (barras, cápsulas de navegação, controles flutuantes, folhas), não no conteúdo do corpo. O contraste do texto no vidro depende do que rola atrás dele, então não pode ser garantido. Mantenha cartões opacos como padrão para conteúdo e torne o vidro opcional por superfície (.lg).

Regras que custam tempo real

1. O CSS do vidro deve viver no mesmo arquivo que @tailwind base, dentro de @layer. O Tailwind resolve @layer por arquivo, então um arquivo CSS separado gera erro em @layer base. Remover o wrapper torna as regras não camadas, e regras não camadas vencem toda utilidade do Tailwind. .lg { position: relative } então substitui silenciosamente fixed em uma navegação.
2. Nunca escreva --x: calc(var(--x) * 0.7). É um ciclo: inválido no momento do valor computado, cai silenciosamente para o valor herdado sem erro. Use uma segunda variável (--lg-clarity-bump, --lg-press).
3. Uma superfície de vidro tem exatamente uma borda, e ::before a desenha. Duas bordas (um aro ::before mais chanfros de box-shadow internos, ou uma sombra espalhada fora da caixa de borda) dão uma "borda dupla" que nenhum ajuste de alfa corrige.
4. corner-shape não é herdado. Com corner-shape: squircle na superfície, todo pseudo-elemento desenhando no limite precisa de AMBOS border-radius: inherit e corner-shape: inherit, ou o aro segue uma curva diferente do corpo.
5. Sem backdrop-filter em vidro aninhado dentro de vidro. Ele amostra um fundo já tingido e fica turvo. Um chip de seleção dentro de uma barra de vidro (.lg-chip) é uma lente tingida sem desfoque próprio.
6. Não anime uma propriedade customizada herdada em :root. Isso invalida o estilo do documento inteiro: cerca de 11,6 ms por quadro em uma página com 60 superfícies, contra 2 ms escrevendo o mesmo valor por elemento.
7. Barras reborram a cada quadro de rolagem. Dê a .lg-bar um raio de desfoque menor mais contain: paint. Se um dispositivo ainda trava, defina --lg-blur-bar: 0px; o aro e o brilho carregam a maior parte da aparência.
8. Não achate vidro fosco para corrigir uma falha. Uma barra de "cor sólida" quase opaca perde a aparência. Em vez disso, encontre a causa geométrica (máscaras afinando o corpo na borda, um aro duplicado).
9. Uma lente de refração SVG nunca deve amostrar além de sua própria caixa. O Chrome retorna transparente lá e o conteúdo original aparece como fantasmas.

Safari e iPhone

WebKit suporta backdrop-filter mas rejeita filtros SVG dentro dele, então o Safari recebe menos que o Chrome: nenhuma refração, nunca. O que o Safari pode refratar é sua própria barra de ferramentas. Defina viewportFit: "cover" para que a página execute sob ela, então env(safe-area-inset-*) se torna obrigatório na navegação e rodapé.

Acessibilidade e fallbacks (sempre envie estes)

Toda superfície deve degradar para um tom quase opaco que parece próximo e não custa nada por quadro:

• @media (prefers-reduced-transparency: reduce)
• @supports not (backdrop-filter: blur(1px))
• @media (prefers-contrast: more): um tom mais forte e uma borda sólida
• uma classe raiz como .lg-off que mata todas as superfícies de vidro de uma vez (para uma alternância de usuário ou modo de baixa energia)

Dê às barras seu próprio tom máximo mais alto (--lg-tint-max-bar) para que os links de navegação mantenham contraste de texto quando o conteúdo rola sob eles.

Como aplicar

1. Copie o bloco de tokens e a seção de superfície de reference/liquid-glass.css para o arquivo CSS principal do projeto, dentro de seus blocos @layer existentes (regra 1).
2. Mapeie os tokens de cor para a paleta do projeto. A referência usa tokens hsl(var(--card)) no estilo shadcn.
3. Use <Glass> de reference/glass.tsx ou classes simples .lg, .lg-bar, .lg-nav, .lg-pane, .lg-chip e .lg-refract.
4. Adicione o destaque especular de reference/glass-specular.tsx apenas onde ele justifica seu custo (controles de herói, a navegação principal), e respeite prefers-reduced-motion.
5. Verifique no Chrome E Safari, em claro E escuro, sobre uma foto ocupada e sobre texto simples.

Controles prontos para uso: Glisse

Glisse por Kelvin Zhang (npm install glisse, MIT, React 18+, sem outras dependências) fornece controles interativos de Vidro Líquido com comportamento de lente ao pressionar já embutido: Button, Switch, Slider, TabBar, SegmentedControl, Menu, Input, SearchField e uma superfície Glass simples. Seus estilos são injetados pelo bundle JS, então não há arquivo CSS para importar.

Quando usar qual:

• Glisse para controles: interruptores, controles deslizantes, barras de abas e controles segmentados cujo polegar se levanta em uma lente enquanto arrastado. Construir isso à mão são dias de trabalho.
• Este material para superfícies: barras de navegação, cápsulas de navegação, painéis, folhas, cartões sobre fotos, e qualquer coisa que precise corresponder a um sistema de design existente ou tema Tailwind.

Armadilhas ao combiná-los:

1. Ambos usam o prefixo lg-. O Glisse define .lg-glass, .lg-button, .lg-tab-bar e as variáveis --lg-blur, --lg-tint, --lg-rim e --lg-filter, que colidem com os tokens deste material. Em uma página que usa ambos, renomeie o prefixo deste material (por exemplo para ylg-) ou escope o Glisse dentro de um wrapper que redefine essas variáveis. Caso contrário, cada um retuna silenciosamente o outro.
2. O modo escuro do Glisse depende de data-theme="dark" ou prefers-color-scheme, não da classe .dark do Tailwind. Com modo escuro baseado em classe, defina data-theme no <html> junto com .dark, ou o Glisse permanece claro.
3. O Glisse lida com prefers-reduced-motion mas não com prefers-reduced-transparency ou prefers-contrast. Adicione os fallbacks da seção de acessibilidade deste skill em torno dos controles Glisse.
4. O .lg-glass do Glisse já desenha uma borda com um box-shadow interno. Não adicione um aro ::before sobre ele (regra 3: apenas uma borda).