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
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.
