Como ele é
Parece tinta pingada num copo d'água, vista de cima. Cada movimento do mouse deixa um rastro de cor que escorre na direção do gesto, se enrola em redemoinhos e vai clareando até sumir. Quando ninguém mexe, pequenas injeções automáticas mantêm a superfície viva em intervalos curtos. No modo tinta, as cores se misturam sobre um fundo claro, como aquarela; no modo luz, somam brilho sobre um fundo escuro. Quatro cores definem a paleta, e o conteúdo colocado dentro fica por cima da simulação.
Você pode estar procurando isto se pediu algo assim
- um fundo que mexe como tinta na água quando passo o mouse
- efeito de fumaça colorida seguindo o cursor
- fundo líquido interativo para a abertura do site
- aquele efeito de fluido que mistura cores atrás do título
- topo do site com cores escorrendo e girando tipo aquarela
- fundo que reage ao mouse com redemoinhos de cor
Também chamado de
- fluid simulation
- simulação de fluido
- WebGL fluid
- Navier-Stokes
- ink in water effect
- fundo líquido interativo
- smoke cursor effect
Quando usar
- Hero de marca premium ou de agência criativa
- Abertura de lançamento em que o primeiro impacto importa
- Portfólio de designer, artista ou estúdio
- Fundo de uma seção curta com título grande e pouco texto
Quando evitar
- Páginas que já têm outros efeitos em WebGL
- Formulários e áreas de leitura longa, em que o movimento distrai
- Público que acessa principalmente por celulares antigos
Como pedir para a sua IA
Crie um fundo com simulação de fluido em WebGL2 no hero da página inicial: o movimento do mouse injeta tinta nas cores da minha marca, com pausa fora da tela, versão estática para movimento reduzido e uma imagem de reserva para navegadores sem WebGL2.
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 Nanquim
Nanquim funciona no celular?
Funciona em celulares com WebGL2, que hoje inclui a maioria dos aparelhos. Sem cursor, as injeções automáticas de Nanquim mantêm a tinta em movimento. Por ser um efeito Pesado no THM Componentes, o prompt orienta a IA a carregar sob demanda e a prever uma imagem estática para aparelhos sem WebGL2.
Nanquim deixa o site lento?
A simulação de Nanquim roda na placa de vídeo e pausa sozinha quando sai da tela, então não pesa enquanto a pessoa lê outras seções. Ainda assim, é um efeito Pesado: use um por página, reduza as iterações de pressão em aparelhos fracos e compare o LCP e o INP antes e depois.
Nanquim respeita quem prefere menos movimento?
Sim. Nanquim lê a preferência de movimento reduzido do sistema: as injeções automáticas param e a simulação congela, deixando a imagem estática. O cursor ainda marca a tela com cor, mas sem escorrer, o que mantém o visual da marca sem animação contínua.
