Infinite Tunnel

How this effect works

Nearly every endless tunnel you will find on the web is built with Three.js — a real 3D engine, a curve, a tube geometry and a camera flying along it. This one has no library at all and no 3D. It is a list of circles, each holding a single number: how far away it is. Everything you see comes from what happens to that number.

Perspective is the whole trick, and it is one division. A ring at depth z is drawn with radius focal ÷ z. Something twice as far away comes out half the size, which is exactly how eyes and lenses behave — and it is why the rings crowd together toward the middle of the screen rather than spreading evenly. Switch the Perspective layer off and the radius becomes a straight line from big to small instead, spacing the rings evenly: the picture keeps its shape but loses all its depth, which is the fastest way to feel what that one division was doing. The focal length slider is the number on top of the fraction — small values give a wide, fisheye tunnel, large values a long lens.

Travelling forward is just subtracting from z every frame. When a ring gets closer than the near plane it has passed the viewer, so it is sent back to the far end and reused — the same handful of circles cycles forever, which is why the tunnel is endless without ever allocating anything. The Curve layer nudges each ring's centre by a sine of its own depth, so rings at different distances lean in different directions and the tunnel appears to bend; because the offset follows depth rather than time, the bend travels toward you instead of wobbling in place. Fog fades a ring as its depth grows, which stops the far end turning into a solid knot of overlapping strokes.