Como ele é
Parece caminhar por um corredor de museu claro e sem fim. Quadros com moldura branca e sombra discreta alternam entre a parede da esquerda e a da direita, virados para o centro, em alturas levemente diferentes. No chão, linhas finas formam uma grade que corre junto com você, e uma névoa da cor do fundo apaga os quadros mais distantes. Com a roda do mouse ou arrastando, você avança ou volta, e o movimento continua um pouco depois. Sem interação, o corredor anda sozinho devagar, e a câmera olha de leve para o ponteiro. Um contador fica num canto, e uma dica de uso some na primeira interação.
Você pode estar procurando isto se pediu algo assim
- galeria de fotos em corredor 3D que anda quando giro a rodinha do mouse
- túnel de imagens infinito para o portfólio
- fotos passando nas paredes como se eu estivesse andando num museu
- vitrine imersiva de projetos com profundidade
- galeria 3D que dá para percorrer arrastando no celular
- aquele efeito de túnel de fotos que aparece em sites de agência
- mostrar as fotos do evento de um jeito mais imersivo
Também chamado de
- museu virtual 3D
- túnel de imagens
- corredor 3D
- infinite gallery
- 3D tunnel gallery
- galeria imersiva
- galeria infinita
Quando usar
- Portfólio de fotógrafo, artista ou estúdio
- Galeria de projetos de agência ou de arquitetura
- Vitrine imersiva de produtos ou de coleção de moda
- Memória visual de um evento, com fotos em sequência
Quando evitar
- Páginas que já têm outro efeito WebGL, já que o prompt pede no máximo um pesado por página
- Seções no meio de páginas longas: sobre o corredor, a roda do mouse não rola a página
- Conteúdo que precisa ser comparado ou encontrado rápido, como um catálogo com filtros
Como pedir para a sua IA
Crie um corredor 3D infinito de imagens com Three.js para o meu portfólio: quadros nas duas paredes, percorrido com a roda do mouse, arraste e setas com inércia e névoa clara no fundo, com pausa fora da tela, sem deriva automática para movimento reduzido e fallback estático no Nuxt.
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 Alameda
Alameda atrapalha a rolagem da página?
Pode atrapalhar se ficar no meio do conteúdo. Por padrão, Alameda captura a roda do mouse enquanto o ponteiro está sobre o componente, e no celular o toque na área percorre o corredor em vez de rolar a página. A prop captureWheel desliga a captura da roda; para o toque, deixe espaço livre ao redor.
Alameda deixa o site lento?
É um efeito Pesado no THM Componentes. Alameda renderiza em Three.js 16 quadros com textura, o piso de linhas e a névoa, mas pausa quando sai da tela e limita a resolução a 2x. O prompt orienta a IA a carregar sob demanda, usar ClientOnly no Nuxt e manter um só efeito WebGL pesado por página.
Alameda respeita quem prefere menos movimento?
Sim. Com movimento reduzido ativo, Alameda desliga a deriva automática, a inércia e o movimento da câmera. O corredor só anda enquanto a pessoa arrasta, e cada seta pressionada avança ou recua exatamente um quadro.
