# Nanquim

Tinta colorida que escorre e gira na tela atrás do conteúdo, empurrada pelo movimento do mouse.

> Nanquim é um componente exclusivo do THM Componentes que simula um fluido de verdade na placa de vídeo: o movimento do mouse injeta tinta colorida que gira, forma redemoinhos e se dissolve aos poucos. Com WebGL2 e sem dependências, serve para heros de marca, aberturas de lançamento e portfólios que precisam de impacto.

- 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/nanquim/

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

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

## Componentes relacionados

- [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.
- [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.
- [Onça](https://vibecode.thmtecnologia.com/componentes/onca/): Manchas e ramos índigo crescem sozinhos como coral ou pele de animal, e o cursor planta novos focos.
- [Aquarela](https://vibecode.thmtecnologia.com/componentes/aquarela/): Rastro de tinta colorida e luminosa que escorre e se dissolve atrás do mouse, por cima da página inteira.
- [Garoa](https://vibecode.thmtecnologia.com/componentes/garoa/): A foto fica debaixo de uma lâmina d'água que ondula com o mouse, com os cliques e com gotas de chuva.

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