Como ele é
Lembra uma fita de ginástica rítmica no ar, ou uma serpente de papel seguindo a mão. Sobre um fundo quase branco, uma faixa de até 34 pixels na cabeça vai afinando até sumir na cauda, do índigo ao ciano, com sombra colorida suave e um filete de brilho no dorso. A cabeça redonda tem um ponto claro no centro. Ela corre atrás do mouse com um pequeno atraso, e o corpo vem atrás em curvas suaves, sem dobrar em ângulos. Quando o ponteiro fica parado por 1,6 segundo ou sai da área, a fita passa a desenhar um oito deitado e ondula de leve.
Você pode estar procurando isto se pediu algo assim
- uma cobrinha colorida que segue o mouse na tela
- rastro grosso e elástico atrás do cursor
- efeito de fita de ginástica acompanhando o mouse no topo do site
- algo interativo e minimalista para a página de contato
- linha em gradiente que persegue o ponteiro com efeito de mola
- fundo que convida a pessoa a mexer o mouse
- aquela serpente que continua andando sozinha quando ninguém mexe
Também chamado de
- cobrinha que segue o mouse
- rastro elástico
- cursor trail
- snake cursor
- rastro do cursor
- ribbon trail
- fita elástica
Quando usar
- Hero minimalista com título curto, em que o movimento é o convite
- Página de contato ou de agradecimento que pede um toque lúdico
- Área de destaque de portfólio ou de estúdio criativo
Quando evitar
- Áreas de leitura e formulários, em que a fita em movimento disputa a atenção
- Sites acessados quase só pelo celular: sem mouse, o efeito vive do modo ocioso
Como pedir para a sua IA
Crie no hero uma fita elástica em Canvas 2D que persegue o cursor com atraso de mola, grossa na cabeça e afinando até a cauda, nas cores da minha marca, com modo ocioso que desenha um oito, pausa fora da tela e pose estática para quem prefere menos movimento.
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 Enguia
Enguia funciona no celular?
Enguia segue o ponteiro do mouse; em telas de toque, o que aparece de fato é o modo ocioso, em que a fita desenha um oito e ondula sozinha. Por isso o componente continua vivo no celular, mas a interação completa acontece no computador. A física é simples e roda em Canvas 2D.
Enguia pesa no desempenho?
Pouco. Enguia tem peso Leve no THM Componentes: são 44 nós simulados e desenhados num único canvas, sem WebGL e sem dependências, com resolução limitada a 2x em telas densas. A animação pausa quando o componente sai da tela, então quase não gasta nada enquanto a pessoa lê outras seções.
Enguia respeita quem prefere menos movimento?
Sim. Com a preferência de movimento reduzido ativa, Enguia não anima: desenha uma única vez a fita parada em forma de S atravessando a área, com as mesmas cores e o mesmo brilho. A seção mantém o visual sem nenhuma animação contínua.
