Scroll Tunnel

Zenora UI

Get Started

Scroll Tunnel·Galleries

npx zenora-ui-registry@latest add scroll-tunnel

Galleries

73 views•58 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add scroll-tunnel

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A mesmerizing 3D tunnel gallery driven by GSAP ticker and scroll interactions, rendering items in infinite perspective.

KEY FEATURES

·Infinite 3D Z-axis math calculated every frame with GSAP ticker
·Dynamic opacity and visibility culling for performance optimization
·Modular image layers with built-in layout distribution

Props

5 properties

totalImagesnumber12

Number of images rendered in the tunnel loops.

scrollSpeednumber2

Speed multiplier for mouse wheel scrolling.

layerGapnumber2500

Distance between each Z-indexed layer of images.

lerpnumber0.07

Linear interpolation factor defining the scroll smoothness.

backgroundcolor#ffffff

Canvas background color.