# Escotilha Um painel de vidro que entorta o conteúdo que passa por trás, com bordas que refratam e separam as cores. > Escotilha é um componente do THM Componentes que transforma um card ou uma barra em vidro líquido, no estilo que a Apple popularizou: o conteúdo que passa por trás se curva nas bordas e ganha franjas de cor. Usa filtros SVG e CSS, sem WebGL, e funciona bem em barras fixas, menus e cards sobre imagens. - Categoria: Efeitos especiais - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/escotilha/ ## 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 ```text 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. ## Componentes relacionados - [Miragem](https://vibecode.thmtecnologia.com/componentes/miragem/): Uma placa de vidro arredondada desliza sobre a foto e curva a imagem nas bordas, como uma lente de verdade. - [Remanso](https://vibecode.thmtecnologia.com/componentes/remanso/): O conteúdo da página parece estar sob uma lâmina d'água e solta ondas por onde o mouse passa. - [Geada](https://vibecode.thmtecnologia.com/componentes/geada/): A imagem ou o conteúdo vai ficando embaçado aos poucos até a borda, como um vidro cada vez mais fosco. - [Gude](https://vibecode.thmtecnologia.com/componentes/gude/): Uma bola de vidro com um redemoinho de tinta índigo e ciano dentro, que gira devagar sobre um chão claro. - [Passarela](https://vibecode.thmtecnologia.com/componentes/passarela/): Barra de ícones translúcida em que cada ícone cresce quando o mouse se aproxima, como no Mac. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.