# Alameda An endless corridor with framed pictures on both walls that you travel with the mouse wheel, a drag or the arrow keys. > Alameda is an exclusive THM Componentes component: an endless 3D corridor with framed pictures on both walls, traveled with the mouse wheel, by dragging or with the arrow keys, with inertia. A floor of lines and a light fog dissolve the far end. Built with Three.js, it suits portfolios, project galleries and immersive showcases. - Category: 3D and space - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Heavy: WebGL or simulation; one per page, loaded on demand - Technology: Vue 3, TypeScript, WebGL, Three.js - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/alameda/ ## What it looks like It feels like walking down an endless, bright museum hallway. Pictures with white frames and a faint shadow alternate between the left and right walls, turned toward the center at slightly different heights. On the floor, thin lines form a grid that moves with you, and a fog in the background color fades the farthest frames. Scroll the mouse wheel or drag to move forward or back, and the motion carries on a little after you stop. Left alone, the corridor drifts forward slowly, and the camera glances toward the pointer. A counter sits in one corner, and a short usage hint in Portuguese fades after the first interaction. ## You may be looking for this if you asked for something like - “a photo gallery as a 3D hallway that moves when I scroll the mouse wheel” - “an infinite image tunnel for my portfolio” - “photos passing on the walls as if I were walking through a museum” - “an immersive project showcase with depth” - “a 3D gallery people can travel by dragging on mobile” - “that photo tunnel effect you see on agency websites” - “show event photos in a more immersive way” ## Also known as 3D photo tunnel, 3D tunnel gallery, infinite gallery, 3D corridor, immersive gallery, endless image hallway ## When to use - A photographer, artist or studio portfolio - An agency or architecture project gallery - An immersive showcase for products or a fashion collection - A visual recap of an event, with photos in sequence ## When to avoid - Pages that already run another WebGL effect, since the prompt allows one heavy effect per page - Sections in the middle of long pages: over the corridor, the mouse wheel does not scroll the page - Content people need to compare or find fast, such as a filtered catalog ## How to ask your AI ```text Create an endless 3D image corridor with Three.js for my portfolio: frames on both walls, traveled with the mouse wheel, drag and arrow keys with inertia and a light fog at the end, with a pause when off screen, no automatic drift for reduced motion and a static fallback in Nuxt. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Alameda ### Does Alameda interfere with page scrolling? It can if it sits in the middle of your content. By default, Alameda captures the mouse wheel while the pointer is over it, and on phones touching the area travels the corridor instead of scrolling the page. The captureWheel prop turns off wheel capture; for touch, leave free space around it. ### Will Alameda slow down my site? It is rated Heavy in THM Componentes. Alameda renders 16 textured frames, the line floor and the fog with Three.js, but it pauses when off screen and caps resolution at 2x. The prompt tells your AI to load it on demand, use ClientOnly in Nuxt and keep a single heavy WebGL effect per page. ### Does Alameda respect reduced motion settings? Yes. With reduced motion turned on, Alameda switches off the automatic drift, the inertia and the camera movement. The corridor only moves while the person drags, and each arrow key press moves it exactly one frame forward or back. ## Related components - [Arcada](https://vibecode.thmtecnologia.com/en/components/arcada/): Photos in a row along a curve that glide when you drag or scroll and ripple slightly as they move. - [Coreto](https://vibecode.thmtecnologia.com/en/components/coreto/): Photos arranged in a ring, like a cylinder, that you spin by dragging, with inertia and a floor reflection. - [Tabuleiro](https://vibecode.thmtecnologia.com/en/components/tabuleiro/): A wall of image cards you can drag in any direction without ever reaching the edge. - [Deriva](https://vibecode.thmtecnologia.com/en/components/deriva/): An endless wall of photo cards you drag in any direction and open in detail with a single click. - [Balsa](https://vibecode.thmtecnologia.com/en/components/balsa/): Scroll down and panels with photos and large headlines slide sideways, with a progress bar along the bottom. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).