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
- fluid cursor
- cursor de fluido
- rastro de tinta
- WebGL fluid cursor
- 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
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 Fluid Cursor
O Fluid Cursor deixa o site lento?
Pode deixar em aparelhos fracos. O Fluid Cursor roda uma simulação de fluido na placa de vídeo a cada quadro, na tela inteira, e é classificado como 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.
O Fluid Cursor funciona no Nuxt com SSR?
Funciona, desde que rode só no navegador. O Fluid Cursor cria o contexto WebGL ao ser montado e escuta o mouse e o toque na janela. O prompt do THM Componentes pede à IA que o envolva 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 no Fluid Cursor?
Dá, com uma pequena mudança no código. No original, o Fluid Cursor 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.
