# Madrepérola Superfície líquida em rosa, lilás e verde-água que escorre e se dobra sem parar, como um holograma. > Madrepérola é um fundo animado do THM Componentes que desenha, em WebGL, uma superfície líquida furta-cor: ondas de rosa, lilás, azul-claro e verde-água se dobram e escorrem sem parar, como papel holográfico. Não usa imagem nem vídeo e combina com heros de marcas criativas, portfólios e lançamentos de visual claro. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL, OGL - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/madreperola/ ## Como ele é Lembra a película colorida de uma bolha de sabão, ou um papel holográfico ondulando sob a luz. Faixas de rosa, lilás, azul-claro e verde-água se dobram umas sobre as outras, com reflexos quase brancos onde as curvas se cruzam. A superfície muda de forma o tempo todo, num movimento contínuo que não depende do mouse nem da rolagem. As cores nascem do próprio shader e ficam sempre claras e pastel, sem variação para o modo escuro. O fundo preenche toda a área do elemento em que é colocado; na demo, um título branco fica centralizado por cima. ## Você pode estar procurando isto se pediu algo assim - “fundo holográfico colorido que fica se mexendo sozinho” - “aquele fundo líquido furta-cor tipo bolha de sabão” - “um fundo que parece tinta perolada escorrendo” - “fundo pastel em movimento para o topo do portfólio” - “efeito de líquido iridescente atrás do título, estilo capa de álbum” - “deixar o hero com cara de marca de moda ou de estúdio de design” - “fundo ondulado rosa e verde-água que não precise de vídeo” ## Também chamado de fundo líquido, fundo holográfico, fundo furta-cor, fundo de bolha de sabão, iridescent background, holographic gradient, shader background ## Quando usar - Hero de marca criativa, estúdio de design ou agência - Portfólio de designer, fotógrafo ou artista com visual claro - Abertura de lançamento de moda, beleza ou música - Capa de seção curta com título grande e pouco texto ## Quando evitar - Títulos brancos sem sombra ou camada escura por trás, porque o fundo pastel tira o contraste - Páginas que já rodam outro efeito em WebGL ou que precisam abrir rápido em celulares fracos - Sites em modo escuro, já que as cores do shader são sempre claras ## Como pedir para a sua IA ```text Crie um fundo líquido holográfico em WebGL no hero do meu portfólio: ondas furta-cor nas cores da minha marca escorrendo sem parar, com pausa quando sair da tela, versão estática para movimento reduzido e um título que continue legível no celular. ``` 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 Madrepérola ### Madrepérola funciona no celular? Funciona em navegadores com WebGL, o que inclui a maioria dos aparelhos atuais; Madrepérola tenta WebGL2 e recorre ao WebGL1. Não há interação por toque, então nada se perde sem mouse. O custo fica na placa de vídeo: é um efeito Pesado no THM Componentes e o código original anima mesmo fora da tela, por isso o prompt pede à IA para pausar fora da viewport. ### Dá para trocar as cores de Madrepérola? Sim, mas não por prop. Em Madrepérola, as cores saem de contas dentro do shader e ficam sempre em tons pastel furta-cor. O prompt do THM Componentes pede à IA para usar os tokens de cor do projeto, sem cores fixas no componente; neste caso, ela precisa adaptar o trecho do shader que define a cor. ### Como usar Madrepérola no Nuxt com SSR? Madrepérola só cria o contexto WebGL depois da montagem no navegador; no servidor, sai apenas uma div vazia. O prompt do THM Componentes pede que a IA envolva o componente em ClientOnly com um fallback estático, para a seção não aparecer vazia. Um gradiente pastel parado, nas mesmas cores, serve como reserva e como versão para movimento reduzido. ## Componentes relacionados - [Lusco-fusco](https://vibecode.thmtecnologia.com/componentes/lusco-fusco/): Manchas de índigo, ciano e lavanda que se misturam e derivam devagar, com um grão leve de filme. - [Veludo](https://vibecode.thmtecnologia.com/componentes/veludo/): Tecido de cetim escuro com dobras diagonais que ondulam devagar, com brilho frio e textura de trama fina. - [Azougue](https://vibecode.thmtecnologia.com/componentes/azougue/): Uma gota de metal espelhado que pulsa devagar, muda de forma e se estica em direção ao cursor. - [Nanquim](https://vibecode.thmtecnologia.com/componentes/nanquim/): Tinta colorida que escorre e gira na tela atrás do conteúdo, empurrada pelo movimento do mouse. - [Névoa](https://vibecode.thmtecnologia.com/componentes/nevoa/): Fundo animado em CSS com faixas de luz azul e violeta que deslizam devagar, como uma aurora boreal. --- 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.