How to build a 3D tunnel in HTML

This effect was achieved in just 66 lines of code. Scroll to the bottom to see the code.

With our launch of a Linear integration, we wanted to share a memorable landing page.

We also wanted to give you a sense of deep work. The rabbit hole. Tunnel vision.

Add some inspiration from Star Wars and the GT Planar font, and an idea was born.

The targeting computer from A New Hope served as inspiration for our design.

What better way than to put elements in a 3D tunnel with nothing but React, Tailwind, and CSS?

Now, surely we could reverse-engineer the example above.

How did they do it? Here's a hint:

A matrix tunnel from the GT Planar font page.

A lot of computed CSS. Surely we could do this in React and Tailwind?

Let's get into it, starting with the grid:

Each of 100 elements in an array is mapped to a grid square.

Here's how it looks so far:

Each square in the grid is simply a styled div.

Great. What about the 3D effect?

After some trial and error, Tailwind didn't cut it. We opted to use some raw CSS:

We apply 3D perspective to the grid with CSS rotation and transform origin.

That gets us one wall in 3D, as expected:

The first wall appears in 3D.

How about four walls, each with different angles, positions, and origins?

This part could be simplified. For now, we hard-code these values:

Here’s the almost-full code:

We stylize four grids as walls, each with its own position and angle.

This gives us all four walls, arranged as expected.

The four walls now give the effect of a (static) tunnel.

Great. Now what about the scroll effect? We would like to go into the tunnel (via zoom) slowly as we scroll. Here’s our approach:

Now it's coming together:

By tying the z-axis translation of the parent div to the scroll height, the tunnel seems to zoom as we scroll.

That's it! A 3D tunnel effect that zooms in as we scroll. This can be extended with colours, shapes, or even panes of text like this.

Here's the original example and a CodeSandbox with all of the code.

What did you learn? What could be improved? Let us know on Twitter!