ambershen/infinite-tunnel

Overview

This skill teaches how to build a performant, visually rich infinite tunnel effect using Three.js for 3D rendering and GSAP for animation. It covers core patterns like repeating segments, curve-based placement, detail-view transitions, and shader or particle variations. The goal is a seamless looping tunnel that can host images, cards, or abstract geometry for immersive interfaces.

How this skill works

Create a sequence of geometric segments arranged along a straight line or a CatmullRomCurve3. Move the camera forward with GSAP and, as segments pass behind the camera, teleport them to the far end to maintain an endless loop. Use instancing, buffer geometries, and simple materials for performance; add raycasting, parenting, and GSAP camera tweens for interactivity and detail views.

When to use it

• Building immersive 3D scrolling galleries, portfolios, or product showcases
• Implementing ‘wormhole’, ‘time travel’, or futuristic visual themes
• Displaying many items in a non-grid, spatial layout for discovery
• Adding a high-impact hero background or interactive site intro
• When using Three.js and GSAP for coordinated rendering and animation

Best practices

• Use InstancedMesh and shared BufferGeometry/materials to reduce draw calls
• Calculate tunnel length and wrap distance with a buffer to avoid popping
• Prefer MeshBasicMaterial or low-cost materials for distant segments
• Use GSAP ease:'none' for constant speed; lock ticker fps for smoothness
• Position objects on a curve with tangent/normal/binormal to avoid gimbal issues

Example use cases

• A portfolio site that scrolls through framed work attached to tunnel walls
• A product showcase where each item moves into a detail view via GSAP camera tween
• A particle-based sci-fi background with glowing tunnel and bloom post-processing
• An immersive onboarding sequence that simulates travel through content
• A gallery where images are distributed by golden-angle packing on curved walls