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