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