Como ele é
Pense num fotógrafo espalhando fotos pela mesa enquanto arrasta a mão. A cada trecho que o mouse percorre, uma nova foto de cantos arredondados, com cerca de 190 pixels de largura, surge onde o cursor está, acompanha o movimento por uma fração de segundo e desaparece, enquanto a próxima já pousa por cima. As imagens seguem a ordem da lista e recomeçam no fim. Conforme a variante, a foto cresce a partir de um ponto, gira na direção do gesto ou fica maior, mais nítida e mais colorida quanto mais rápido o mouse anda. Com o mouse parado, o rastro some.
Você pode estar procurando isto se pediu algo assim
- fotos que vão aparecendo atrás do mouse quando mexo
- rastro de imagens seguindo o cursor no meu portfólio
- imagens pipocando por onde o mouse passa
- área do site que espalha minhas fotos conforme passo o mouse
- jeito divertido de mostrar várias fotos de uma vez na landing
- aquele efeito de imagens empilhando atrás do cursor
Também chamado de
- image trail
- image trail cursor
- rastro de imagens
- cursor com fotos
- mouse trail de imagens
- trilha de fotos
Quando usar
- Portfólio de fotografia ou ilustração
- Página de coleção de moda, decoração ou produtos
- Hero de estúdio ou agência com um título curto
- Página de evento que mostra edições anteriores em fotos
Quando evitar
- Sobre botões, links ou formulários, já que a camada do rastro fica por cima e recebe o mouse
- Páginas em que cada foto precisa de contexto, legenda ou texto alternativo
- Público que acessa principalmente pelo celular, sem cursor
Como pedir para a sua IA
Crie um efeito de image trail no hero: conforme o mouse anda, fotos de uma lista surgem em sequência sob o cursor e somem. Use imagens leves, carregue só no navegador, encerre o laço de animação ao sair da página e ofereça uma versão estática para movimento reduzido.
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 Image Trail Cursor
Quantas fotos o Image Trail Cursor precisa?
O Image Trail Cursor recebe a lista de fotos pela propriedade images e as mostra em ordem, voltando ao início no fim. A demo usa sete fotos. Como cada imagem aparece com cerca de 190 pixels de largura, fotos leves e já recortadas ajudam a manter o carregamento rápido.
O Image Trail Cursor deixa o site lento?
Depende do uso. O Image Trail Cursor é classificado como Médio no THM Componentes: usa GSAP e um laço de animação que roda a cada quadro desde o primeiro movimento, e o código original não encerra esse laço ao sair da página. O prompt pede carregamento sob demanda e ClientOnly no Nuxt; vale pedir também essa limpeza.
O Image Trail Cursor funciona no celular?
Funciona com o dedo: o Image Trail Cursor também escuta o arrastar na tela e solta as fotos pelo caminho. Sem mouse, porém, o efeito só aparece enquanto a pessoa arrasta sobre a área, o que é menos natural que no computador. Para quem prefere menos movimento, o prompt do THM Componentes pede uma versão estática.
