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
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.
