Como ele é
Pense num bloco de vidro grosso apoiado sobre a página. No centro, o que está atrás aparece quase nítido; perto das bordas arredondadas, a imagem se dobra como numa lente e se separa em franjas de vermelho, verde e azul. Uma película fosca bem leve e um contorno interno sutil desenham a peça e mudam com o modo claro ou escuro. O componente não anima nada sozinho: o movimento vem do conteúdo que rola por baixo. Por padrão, o painel fica fixo na tela, e o texto ou os botões que você coloca dentro aparecem por cima do vidro.
Você pode estar procurando isto se pediu algo assim
- aquele efeito de vidro do iPhone novo para a barra do meu site
- card transparente que entorta o fundo nas bordas, tipo Apple
- menu fixo com cara de vidro de verdade, não só desfoque
- deixar a navbar com efeito de vidro líquido
- painel de vidro que refrata a imagem que passa por trás
- glassmorphism mais caprichado para os cards da landing page
Também chamado de
- vidro líquido
- vidro que entorta o fundo
- glassmorphism
- efeito lente de vidro
- refração em CSS
- SVG displacement
- vidro fosco
Quando usar
- Barra de navegação ou de ações fixa sobre conteúdo com fotos ou cores
- Cards de destaque em landing pages com fundo rico em imagem
- Botões flutuantes, players e controles que ficam por cima do conteúdo
- Interfaces que querem seguir a linguagem visual recente da Apple
Quando evitar
- Fundos lisos de uma cor só, em que a refração quase não aparece
- Texto corrido passando por trás do painel, que fica difícil de ler nas bordas
Como pedir para a sua IA
Crie um painel de vidro líquido com filtro SVG de deslocamento para a barra de navegação fixa: bordas que refratam o conteúdo de trás com leve separação de cores, película fosca nas cores do tema e um fundo fosco simples como reserva nos navegadores que não aplicam o filtro.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Escotilha
Escotilha funciona em todos os navegadores?
Escotilha aplica o filtro SVG por meio de backdrop-filter, e o suporte a filtros SVG nessa propriedade varia entre navegadores. Por isso, teste no Safari e no Firefox e prepare uma reserva com desfoque simples. O prompt do THM Componentes também pede para envolver o componente em ClientOnly no Nuxt, com uma versão estática.
Escotilha deixa o site lento?
Escotilha não roda animação nem WebGL: o mapa de distorção é um SVG gerado uma vez e refeito só quando o painel muda de tamanho. O custo está no filtro aplicado sobre o fundo enquanto a página rola, por isso o componente tem peso Médio no THM Componentes. Use em poucas peças por tela e teste em celulares.
Dá para ajustar a intensidade do vidro em Escotilha?
Sim. Escotilha tem props para o raio dos cantos, a espessura da borda que refrata, a escala da distorção, o deslocamento de cada canal de cor, o desfoque e a força da película fosca. Uma escala mais próxima de zero deixa o vidro mais discreto; uma escala maior dobra mais o fundo.
