kennedys0/taste-style-glassmorphism

Use este skill apenas depois que um usuário escolher explicitamente ou uma configuração de projeto confirmada o especificar. Para novas solicitações de UI não explicadas, use um seletor de estilo como style-selector em vez de decidir o gosto do usuário aqui. A marca existente, acessibilidade e substituições do usuário prevalecem sobre todos os exemplos abaixo. O guia de estilo a seguir não é uma permissão para iniciar a codificação de UI antes da seleção do estilo.

Pacote de estilo: Glassmorphism

ID: glassmorphism
Assinatura: Superfícies visivelmente congeladas e translúcidas flutuando sobre camadas de luz/cor diferenciadas, com conteúdo claro e profundidade funcional.

Este é um estilo de opt-in, não o padrão do mecanismo. Ative-o apenas quando selecionado pelo usuário ou pelo sistema de design do projeto estabelecido. Respeite a anatomia do produto, a direção da marca, a acessibilidade e as interações existentes. Uma página escura genérica com um botão azul não se qualifica como Glassmorphism.

Boa adequação / compensações

• Funciona bem para: Portfólios expressivos, páginas de destino de produtos, sobreposições de navegação, interfaces de mídia, painéis criativos e demonstrações de UI delimitadas.
• Use com cuidado para: Tabelas de dados densas, leitura de formato longo, formulários críticos de acessibilidade ou fotos imprevisíveis atrás de texto. Coloque conteúdo de alta densidade em superfícies adequadamente sólidas ou fortemente matizadas.
• Direções de referência: Um painel claro, leitoso e congelado com luz atmosférica azul suave e geometria arredondada gentil; ou um sistema de vidro escuro e fumê com painéis de ardósia translúcidos, iluminação violeta/ciano suave e controles legíveis. Ambos são válidos. Nenhum força uma paleta de marca fixa.

Portão de fidelidade do material de vidro — obrigatório

Antes de considerar uma página de glassmorphism completa, a viewport de abertura deve ler-se visivelmente como uma composição de vidro. Se um usuário escolheu este estilo, um fundo grande e simples mais tipografia e um botão convencional é uma FALHA, mesmo que as variáveis CSS sejam nomeadas glass.

Um componente de vidro proeminente bem-sucedido demonstra todos os seguintes:

1. Profundidade de fundo: um plano de fundo significativo e diferenciado atrás da superfície (campos de luz suave, gradientes controlados, formas, fotografia fornecida para o projeto ou conteúdo de aplicativo existente). O vidro precisa de algo para filtrar visivelmente. Gradientes propositais e formas de cor ambiente são explicitamente permitidos pelo Taste Engine anti-slop para Glassmorphism quando estabelecem luz visível passando através de um painel. Eles não são inerentemente slop.
2. Translucidez: o painel permite que alguma crominância/luminância do fundo influencie sua aparência. Evite cartões escuros completamente opacos comercializados como vidro.
3. Fosqueamento: backdrop-filter: blur(...) (e -webkit-backdrop-filter se necessário) suaviza visivelmente o detalhe do fundo dentro do painel, enquanto o fundo exposto próximo permanece mais claro. Uma imagem de fundo desfocada por si só não é vidro fosco.
4. Borda e profundidade legíveis: linha fina/realce suave, brilho interno leve, silhueta arredondada quando apropriado e sombra ou separação contida. O vidro deve ter um limite perceptível, não uma laje cinza plana.
5. Clareza de conteúdo: texto, indicadores de foco, estados de controle e ações permanecem legíveis em todo o fundo composto real e com efeitos de fallback desabilitados.

Teste da primeira viewport: Em uma captura de tela de desktop, identifique o painel proeminente, o plano de fundo distinto atrás dele, a aparência desfocada/matizada dentro de seu limite e seu realce de borda sem ler o título da página. Se não for possível, revise o material antes de adicionar mais conteúdo.

Não é uma regra de contagem de cartões: Um painel de herói proeminente ou algumas superfícies de demonstração de componentes são suficientes. Não cubra todas as seções com cartões transparentes idênticos. Em uma vitrine de componentes, use exemplos funcionais honestos (interruptor, entrada, diálogo, toast como uma demo rotulada, navegação) para demonstrar o material e seus estados; não invente status de produto real ou prova social.

Exceção explícita de gradiente de fundo — o vidro pode brilhar

Substituição específica do Glassmorphism: O aviso universal anti-slop contra gradientes decorativos genéricos NÃO DEVE ser interpretado como uma proibição de gradientes, campos de cor mesh, formas de cor desfocadas, iluminação atmosférica ou imagens de fundo coerentes aqui. Estas são camadas de fundo válidas e habilitadoras de material, mesmo quando decorativas, porque tornam a translucidez, o fosqueamento, as bordas e a profundidade perceptíveis. Esta isenção não é permissão para conteúdo fabricado ou efeitos inacessíveis/lentos.

• Tratamentos de fundo permitidos: 1–3 campos de radial-gradient() coerentes, um gradiente mesh ou multistop contido, formas coloridas ambientes desfocadas usando pseudo-elementos, uma ilustração/fotografia alinhada à marca ou conteúdo existente atrás de um painel. CSS estático geralmente é suficiente e não precisa de imagens extras ou bibliotecas de animação.
• Exemplo claro / leitoso: base branca/gelo com campos de luz suave azul/lavanda atrás de um cartão branco translúcido; o painel suaviza visivelmente os limites de cor.
• Exemplo escuro / fumê: base de tinta escura com áreas de luz roxa/ciano/azul-petróleo controladas atrás de painéis de ardósia translúcidos; campos de gradiente brilhantes não devem obscurecer o texto branco do corpo.
• Requisito de composição: Coloque pelo menos uma transição de luz/cor ou elemento de fundo reconhecível atrás e parcialmente além do painel de vidro principal para que a diferença filtrado vs não filtrado seja visível; um gradiente uniforme em tela cheia sem variação local ainda pode falhar.
• Controle de profundidade: O fundo deve ter menor ênfase que o conteúdo; use poucas fontes de luz com queda natural e posições intencionais, em vez de bolhas roxas/azuis padrão em cada página. Use a paleta da marca do usuário e referências fornecidas.
• Desempenho e acessibilidade: Prefira gradientes CSS estáticos e superfícies contidas. Evite animações de gradiente em movimento em tela cheia, desfoques de plano de fundo excessivos em página inteira, texto pequeno de baixo contraste e anéis de foco ocultos. Respeite as preferências de transparência e teste fallbacks opacos legíveis.
• Interpretação anti-slop: Avalie gradientes por propósito do material, contenção e legibilidade, não por sua mera presença. Remover um fundo de vidro útil para satisfazer uma heurística de gradiente genérica é uma regressão de design.

Uma captura de tela forte deve tornar o material fosco óbvio mesmo se todos os títulos e rótulos estiverem ocultos. Veja examples/glassmorphism/frosted-surfaces.css para uma implementação inicial e tests/glassmorphism-visual.md para critérios de aceitação visual.

Tipografia e escrita

Use um sans-serif limpo adequado à marca (system sans, DM Sans, Inter, etc.). Tamanho de leitura típico 15–17 px; texto de exibição pode ser maior. Mantenha uma forte hierarquia de tipo e evite texto ultrafino sobre fundos de vidro variáveis. Um painel fosco claro geralmente se beneficia de texto de primeiro plano escuro; um painel escuro fumê de texto esbranquiçado de alto contraste. Nunca substitua brilho colorido por hierarquia tipográfica.

Direção de cor

Escolha uma direção coerente do contexto ou use a referência do usuário:

• Vidro claro / leitoso fosco: Campo gelo-branco pálido ou cinza claro (#F0F4F8), luz difusa azul fria ou outra cor da marca atrás de painéis brancos semi-opacos (rgba(255, 255, 255, 0.45)). A tipografia é ardósia escura (#0F172A) com ardósia suave (#475569). Um realce de vidro suave é visível ao longo da borda superior (rgba(255, 255, 255, 0.75)).
• Vidro escuro / noturno fumê: Base azul-marinho/tinta escura (#090D16) com campos de luz ambiente violeta/azul/azul-petróleo atrás de painéis translúcidos cinza-azulados (rgba(22, 28, 45, 0.55)). O texto do primeiro plano é porcelana nítida (#F8FAFC) com ardósia suave (#94A3B8); painéis escuros não são retângulos quase opacos.
• Regra de acoplamento de tema e anticolisão: Ao alternar entre modos de vidro claro e escuro, o texto do primeiro plano, bordas e fontes de luz ambiente DEVEM alternar em conjunto. O texto do primeiro plano deve manter pelo menos um contraste de 4,5:1 contra a superfície de vidro fosco e o plano de fundo iluminado atrás dela. Nunca deixe texto escuro em vidro escuro fumê ou texto branco em vidro claro leitoso.

A cor sozinha não é Glassmorphism. Nunca padronize para roxo/ciano neon para cada marca. Preserve a marca e os requisitos de alto contraste. Verifique o contraste real do primeiro plano composto (WCAG AA 4,5:1 texto normal, 3:1 texto grande; controles não textuais relevantes pelo menos 3:1).

Layout e geometria

• Use uma composição de primeiro plano/fundo proposital: plano de fundo ambiente → superfícies de vidro → conteúdo nítido e controles interativos. Diferencie 2–3 planos de profundidade sem desordem de cartões aninhados.
• Use cantos consistentes (comumente 16–28 px para painéis maiores) e espaçamento. Evite uma primeira viewport superdimensionada completamente vazia apenas para atingir 100svh.
• Em telas responsivas, os painéis devem empilhar limpa-mente, preservar o preenchimento legível e evitar desfoque ou estouro cortado. Cabeçalho, conteúdo do herói e controles devem caber ou expandir naturalmente.

Superfícies, profundidade, textura

• Receita de vidro: matiz semi-transparente (rgba(...) ou color-mix), backdrop-filter: blur(16px) saturate(140%), uma borda translúcida de 1px, realce superior interno suave e sombra em camadas suave. Comece com cerca de 12–24 px de desfoque, depois ajuste contra o plano de fundo real.
• Vidro claro: use uma superfície matizada branca com aproximadamente 0,24–0,55 de alfa quando o plano de fundo permitir; muita opacidade remove o efeito fosco. O forte contraste do texto ainda é obrigatório.
• Vidro escuro: use um matiz ardósia/índigo em torno de 0,25–0,56 de alfa, borda mais brilhante visível e luz ambiente contrastante atrás dela. Evite lajes pretas absolutas e halos neon ofuscantes.
• Pistas de profundidade: plano de fundo suave desfocado atrás do painel, brilho interno contido, brilho/reflexo de borda sutil. Nenhum papel de parede genérico de bolha necessário.
• Use fallback @supports com superfícies sólidas legíveis quando o filtro de plano de fundo estiver ausente. Forneça uma alternativa de alta transparência/alto contraste. O desfoque em si nunca deve ser necessário para entender o conteúdo ou interagir.

Veja examples/glassmorphism/frosted-surfaces.css no roteador completo do Taste Engine (a receita de token acima também funciona em instalações independentes) para tokens iniciais independentes para claro e escuro. Adapte os tokens ao projeto; não copie todos os exemplos ou force uma paleta fixa.

Anatomia do componente e interação

• Herói: torne a estética selecionada óbvia imediatamente. Coloque o título real do Taste Engine/projeto e CTAs dentro ou sobrepondo um plano de vidro visível, ou apresente uma composição de janela de vidro igualmente convincente. Forneça um plano de fundo com iluminação significativa atrás do painel.
• Cabeçalho/nav: uma barra fosca sutil pode sobrepor o plano de fundo, mas mantenha o contraste e o foco visíveis. Evite uma barra superior opaca plana visualmente desconectada da página ao demonstrar UI de vidro.
• Exemplos funcionais: interruptor com estado ligado/desligado real, opção selecionável, guia, modal, formulário e um toast apenas se acionado genuinamente ou claramente marcado como uma demonstração estática. Mostre condições focadas, hover, ativas, desabilitadas e de erro quando aplicável. As superfícies de controle do primeiro plano podem ser mais opacas que o vidro pai para usabilidade.
• Botões: podem ser superfícies de destaque sólidas para affordance; nem todo controle precisa ser transparente. Um botão convencional não compensa a falta de vidro em outros lugares.
• Conteúdo: reserve contêineres fortemente matizados ou sólidos legíveis para parágrafos longos, tabelas e formulários; não coloque parágrafos em imagens translúcidas ruidosas.

Movimento

Use feedback de interação em vez de movimento ambiente. 140–220 ms de fade/translação em hover, seleção, revelação de painel ou modal apenas quando a ação do usuário o justificar. Preserve a continuidade da camada de vidro. Sem orbs à deriva infinitos, feixes de luz em movimento ou rotações 3D obrigatórias.

Receita opcional Anime.js v4

• Decisão de movimento: Transições CSS/nativas para a maioria das interações; Anime.js v4 é opcional para transições de estado coordenadas, não uma dependência visual necessária.
• Duração inicial: 180 ms, easing sem bounce. Anime opacity/transform amigáveis ao compositor em vez de animar continuamente desfoque ou box-shadow.
• Reduzir movimento: honre prefers-reduced-motion e permita transições interrompidas/curto-circuitadas.
• Dependência: siga references/motion-engine.md do Taste Engine onde disponível; skill independente aplica a mesma orientação.

Redação de UI e microcópia

Direta, específica do produto e concisa. O vidro é um material, não uma desculpa para cópia vaga como “o futuro é transparente.” Evite emblemas falsos, status de verificação, usuários, pontuações de produtividade ou depoimentos. Os dados de demonstração devem ser explicitamente rotulados.

Tokens iniciais (sugestões, não um tema completo)

Token	Padrão vidro claro	Padrão vidro escuro
--taste-radius-sm	14px	14px
--taste-radius-lg	24px	24px
--taste-glass-blur	18px	18px
--taste-glass-bg	#f0f4f8	#090d16
--taste-glass-surface	rgba(255, 255, 255, 0.45)	rgba(22, 28, 45, 0.55)
--taste-glass-text	#0f172a	#f8fafc
--taste-glass-text-muted	#475569	#94a3b8
--taste-glass-light	rgba(255, 255, 255, 0.38)	rgba(255, 255, 255, 0.38)
--taste-glass-dark	rgba(36, 45, 72, 0.38)	rgba(36, 45, 72, 0.38)
--taste-glass-edge-light	rgba(255, 255, 255, 0.65)	rgba(255, 255, 255, 0.18)
--taste-motion-duration	180ms	180ms

Estes são apenas valores iniciais. O resultado deve ser verificado contra o conteúdo real e o plano de fundo. Não carregue fontes, ilustrações ou bibliotecas de animação secretamente.

Composição do herói (primeira viewport completa)

Para portfólios públicos/páginas de destino/homepages com um herói, use uma composição de cabeçalho + herói na primeira viewport (min-height: 100svh com fallback 100vh) em vez de um herói de altura fixa cortado. Subtraia um cabeçalho real em fluxo conforme necessário, não duas vezes para sobreposições. Cresça naturalmente em telas móveis curtas e com zoom. Requisito do material: a primeira viewport mostra um painel fosco inconfundível filtrando um plano de fundo visível e cuidadosamente composto—não 80% de espaço escuro vazio acima do texto comum. Construa interesse visual a partir de estrutura em camadas significativa e luz ambiente alinhada à marca; não invente fotos, dados falsos ou conteúdo de preenchimento. Um herói deve apresentar: