3D / WebGL

3D Scroll Tunnel

by Vanguardia · motionprompts.dev

Infinite 3D image tunnel driven by the mouse wheel: six layers of four full-colour images each sit on an ellipse inside a perspective container, and a gsap.ticker loop lerps a virtual scroll value to push layers along the Z axis, wrapping depth modulo the tunnel length for endless looping. A per-item plum-black overlay driven by a --overlay CSS variable fades images in from the depths and darkens them out as they pass the camera. On top of that, a second damped read — the VELOCITY of the lerped scroll, not its position — stretches every plate along its own radial axis and pinches it across, so the frames smear like speed lines while the flight is moving and snap back to clean rectangles the moment it settles.

Type: Web motion
Framework: GSAP
Trigger: wheel
Duration: 0.25–2.4s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap+raf
Complexity: 2/5
Pinned: no
Reduced motion: handled
Libraries: gsap

wheel-driven lerped infinite CSS-3D depth tunnel

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev28,538 chars

# 3D Scroll Tunnel

## Goal
Build a full-viewport, pitch-black "spotlight" stage containing an **infinite 3D image tunnel** flown by the **mouse wheel**. A ring…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.