# Azougue Uma gota de metal espelhado que pulsa devagar, muda de forma e se estica em direção ao cursor. > Azougue é um componente exclusivo do THM Componentes que desenha em WebGL uma massa de metal líquido cromado: gotas se fundem, respiram, refletem um estúdio e se esticam na direção do cursor. Tem modo néon escuro e modo logo, em que o metal envolve um texto curto. Serve para heros de marcas premium. - Categoria: Fundos e atmosferas - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/azougue/ ## Como ele é Lembra mercúrio derramado numa mesa, com gotas que se juntam numa só peça espelhada. No centro, quatro gotas cromadas giram devagar umas em volta das outras, se fundem e se separam, enquanto a massa toda incha e encolhe como se respirasse. A superfície reflete faixas de luz de estúdio, com bordas de leve arco-íris e uma sombra suave embaixo, sobre fundo cinza muito claro. No modo néon, o fundo fica quase preto e o metal reflete tiras magenta, ciano e roxas. Quando o mouse se aproxima, o metal se estica até o ponteiro e o blob se inclina para ele. ## Você pode estar procurando isto se pediu algo assim - “uma gota de mercúrio se mexendo no topo do site” - “efeito de metal líquido cromado que segue o mouse” - “logo da marca em metal derretido para a abertura” - “blob espelhado tipo prata líquida para um hero premium” - “aquele visual cromado 3D que aparece em sites de tecnologia” - “fundo escuro com metal refletindo luz neon” - “aquele metal líquido tipo Exterminador do Futuro, só que elegante” ## Também chamado de metal líquido, liquid chrome, chrome blob, metaballs cromadas, mercúrio animado, efeito cromado 3D, liquid metal shader ## Quando usar - Hero de marca premium, de moda, joalheria ou tecnologia - Abertura de lançamento tech com uma frase curta ao lado - Vinheta de logo em metal, com o nome da marca no modo logo - Página de produto com estética escura e neon, usando o modo néon ## Quando evitar - Páginas que já rodam outro efeito pesado em WebGL - Marcas que precisam das próprias cores no efeito, já que o metal não tem props de cor - Nomes longos no modo logo, que aceita até 10 caracteres ## Como pedir para a sua IA ```text Crie no hero um blob de metal líquido cromado com raymarching em WebGL, que respire devagar, se estique em direção ao cursor e envolva o nome curto da minha marca, com pausa fora da tela, pose parada para movimento reduzido e fallback estático no Nuxt. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Azougue ### Dá para colocar o logo da minha marca em Azougue? Sim, como texto curto. Na prop text, Azougue aceita até 10 caracteres, desenha as letras numa fonte do sistema bem pesada e faz o metal envolver o texto como uma placa cromada. O componente não usa a imagem do logo, só texto. O rótulo acessível é fixo, então vale pedir à IA para incluir nele o nome da marca. ### Dá para mudar as cores de Azougue? Não há props de cor em Azougue: o visual vem do ambiente refletido. A prop env alterna entre estúdio claro, com fundo cinza e softboxes, e néon escuro, com tiras magenta, ciano e roxas. Para usar a paleta da marca, peça à IA que ajuste os tons do ambiente no shader. Dispersão, tamanho e reatividade são ajustáveis. ### Azougue respeita quem prefere menos movimento? Sim. Com a preferência de menos movimento ativa, Azougue mantém o blob numa pose parada: as gotas não giram nem respiram. O metal ainda se estica e inclina quando o cursor se aproxima, porque essa resposta vem da própria pessoa. O efeito também pausa fora da tela e reduz a resolução se os quadros ficarem lentos. ## Componentes relacionados - [Quimera](https://vibecode.thmtecnologia.com/componentes/quimera/): Uma forma líquida em 3D que ondula, se funde com um anel e duas cápsulas e gira conforme o mouse. - [Orvalho](https://vibecode.thmtecnologia.com/componentes/orvalho/): Gotas brilhantes de cor índigo que se juntam e se separam como líquido, e uma delas segue o cursor. - [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. - [Medalha](https://vibecode.thmtecnologia.com/componentes/medalha/): Seu logo vira uma peça de metal espelhado, com reflexos que escorrem devagar pela superfície. - [Água-viva](https://vibecode.thmtecnologia.com/componentes/agua-viva/): Uma bolha em gradiente que muda de contorno devagar, como se respirasse, e se estica na direção do mouse. --- 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.