3D Tunnel Grid

3D Tunnel Grid is an infinite 3D tunnel gallery component built with Three.js that creates a seamless scrolling grid of images inside a fully immersive tunnel. Images are placed across the walls, floor, and ceiling, forming a continuous grid layout that moves infinitely forward or backward with smooth drag and scroll interaction. The tunnel loops endlessly, making it perfect for hero sections, portfolios, and modern websites that need a strong visual impact.

The component supports auto-scroll, drag navigation, adjustable tunnel size, image density, and speed controls, allowing full customization directly from Framer controls. It also includes dark/light mode support, optional toggle button, and optimized rendering for smooth performance. The infinite tunnel effect ensures the layout never ends, creating a futuristic and dynamic experience suitable for creative, tech, and portfolio websites.

Key Features

• Infinite 3D tunnel grid layout

• Seamless infinite scrolling tunnel

• Images on walls, floor, and ceiling

• Smooth drag and wheel navigation

• Auto-scroll with speed control

• Adjustable tunnel width and height

• Image density control

• Dark and light mode support

• Optional toggle button

• Optimized Three.js rendering

• Works with URLs and uploads

• Fully customizable controls

• High-performance animation

• Modern futuristic 3D effect

Best For

• Hero sections

• Portfolio websites

• Agency websites

• Creative studios

• Photography galleries

• 3D / WebGL websites

• Product showcases

• Landing pages

• Tech websites

• Interactive backgrounds

• Modern UI layouts

• Framer templates

• Showcase sections

• Startup websites

• Personal portfolios