# Alameda Um corredor sem fim com quadros nas duas paredes, que você percorre com a roda do mouse, arrastando ou pelas setas. > Alameda é um componente exclusivo do THM Componentes: um corredor 3D infinito com quadros nas duas paredes, percorrido com a roda do mouse, arrastando ou pelas setas do teclado, com inércia. Um piso de linhas e uma névoa clara dissolvem o fundo. Com Three.js, serve para portfólios, galerias de projetos e vitrines imersivas. - Categoria: 3D e espaço - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Pesado: WebGL ou simulação; um por página, carregado sob demanda - Tecnologia: Vue 3, TypeScript, WebGL, Three.js - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/alameda/ ## 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 ```text 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. ## Componentes relacionados - [Arcada](https://vibecode.thmtecnologia.com/componentes/arcada/): Fotos em fileira sobre uma curva, que deslizam com arrasto ou rolagem e ondulam de leve ao se mover. - [Coreto](https://vibecode.thmtecnologia.com/componentes/coreto/): Fotos dispostas em roda, como num cilindro, que você gira arrastando, com inércia e reflexo no chão. - [Tabuleiro](https://vibecode.thmtecnologia.com/componentes/tabuleiro/): Uma parede de cartões com imagem que você arrasta para qualquer lado, sem nunca chegar ao fim. - [Deriva](https://vibecode.thmtecnologia.com/componentes/deriva/): Um mural sem fim de cartões com fotos que você arrasta em qualquer direção e abre em detalhe com um clique. - [Balsa](https://vibecode.thmtecnologia.com/componentes/balsa/): Você rola para baixo e painéis com fotos e títulos grandes deslizam para o lado, com uma barra de progresso. --- 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.