# Aquarela Rastro de tinta colorida e luminosa que escorre e se dissolve atrás do mouse, por cima da página inteira. > Aquarela é um componente do THM Componentes que faz o mouse ou o dedo deixar um rastro de tinta colorida que escorre, forma redemoinhos e some em instantes. A simulação de fluido roda em WebGL numa camada por cima da página, sem bloquear cliques. Combina com portfólios criativos e sites de agência. - Categoria: Botões e cursores - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, WebGL - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/aquarela/ ## Como ele é Parece passar o dedo numa poça de tinta neon. O componente cobre a tela toda com uma camada transparente, por cima do conteúdo, que não atrapalha cliques nem seleção de texto. Cada movimento do mouse solta tinta luminosa na direção do gesto; a cor é sorteada entre todos os tons do arco-íris e muda várias vezes por segundo, então o rastro sai multicolorido. A tinta escorre, se enrola em redemoinhos e se dissolve rápido. Um clique solta um jato mais forte de cor. No celular, arrastar o dedo deixa o mesmo rastro. Um sombreado leve dá volume ao líquido. ## Você pode estar procurando isto se pediu algo assim - “rastro colorido seguindo o mouse como tinta na água” - “efeito de fumaça neon atrás do cursor no site inteiro” - “cursor que deixa um rastro líquido de arco-íris” - “algo para o portfólio reagir quando a pessoa mexe o mouse” - “mouse que pinta a tela com uma cor que escorre e some” - “aquele efeito de fluido colorido de site de agência criativa” ## Também chamado de rastro líquido no cursor, cursor de fluido, rastro de tinta, cursor com tinta neon, smoke cursor, splash cursor, cursor trail ## Quando usar - Portfólio de designer, estúdio ou artista digital - Site de agência criativa que quer marcar a primeira visita - Página de lançamento ou de evento com fundo escuro - Landing curta de campanha, em que a interação faz parte da experiência ## Quando evitar - Páginas de leitura, formulários e checkout, em que a tinta por cima do texto distrai - Páginas que já rodam outro efeito em WebGL - Público com celulares simples, já que a simulação é classificada como Pesada ## Como pedir para a sua IA ```text Adicione um cursor com simulação de fluido em WebGL que deixe um rastro de tinta nas cores da minha marca por cima da página, sem bloquear cliques. Carregue só no navegador e sob demanda, pare a animação ao sair da página e desligue o efeito para quem prefere menos movimento. ``` 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 Aquarela ### Aquarela deixa o site lento? Pode deixar em aparelhos fracos. Aquarela roda uma simulação de fluido na placa de vídeo a cada quadro, na tela inteira, e tem a classificação Pesado no THM Componentes. O prompt orienta a IA a carregar sob demanda, a usar no máximo um efeito WebGL pesado por página e a comparar LCP e INP antes e depois. ### Aquarela funciona no Nuxt com SSR? Funciona, desde que rode só no navegador. Aquarela cria o contexto WebGL na montagem e escuta o mouse e o toque na janela. O prompt do THM Componentes pede à IA que envolva o componente em ClientOnly com uma alternativa estática e que o carregue sob demanda. Sem WebGL, o original não mostra nada e lança um erro. ### Dá para usar as cores da minha marca em Aquarela? Dá, com uma pequena mudança no código. No original, Aquarela sorteia tons do arco-íris inteiro várias vezes por segundo. O prompt do THM Componentes pede à IA para usar os tokens de cor do projeto, sem cores fixas, então ela pode trocar o sorteio por uma paleta da marca e manter a física do fluido. ## Componentes relacionados - [Nanquim](https://vibecode.thmtecnologia.com/componentes/nanquim/): Tinta colorida que escorre e gira na tela atrás do conteúdo, empurrada pelo movimento do mouse. - [Pipa](https://vibecode.thmtecnologia.com/componentes/pipa/): Fitas largas em laranja, verde, amarelo e ciano perseguem o cursor dentro da área, com balanço de mola. - [Novelo](https://vibecode.thmtecnologia.com/componentes/novelo/): Um feixe de linhas finas e coloridas persegue o cursor pela tela, ondulando como fios soltos ao vento. - [Planador](https://vibecode.thmtecnologia.com/componentes/planador/): Troca a setinha do sistema por um cursor próprio que desliza atrás do mouse e gira na direção do movimento. - [Enguia](https://vibecode.thmtecnologia.com/componentes/enguia/): Uma fita colorida, grossa na cabeça e fina na ponta, que persegue o mouse como uma serpente. --- 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.