Mobile is not a smaller desktop: how vorluno.dev keeps the same route on a phone

Most immersive sites have a secret: turn the phone on and the immersive part is gone. The 3D becomes a poster, the route becomes a stack of sections, and the page that won the award is a different page from the one most people see. When we built vorluno.dev we wrote the rule down before the first line: portrait is the same route, recomposed — not a fallback.

One rule: horizontal stays, vertical scales

The tunnel and the rooms measure the world in viewport widths — the travel between stops, the depth scale, the wall — so on a phone none of that changes. What changes is the vertical: every element's height is expressed as a fraction of the viewport's height *in world units*, computed from the real screen (about 3.0 on a 390 × 844 phone, 1.85 on a tablet). Rotate the device and the same nodes get new coordinates; nothing is rebuilt, nothing falls back to a list.

The hero is the clearest case. On desktop the seven cards fan out to the sides of the title. In portrait the same stack is scaled from the desktop layout — `k = frontal width ÷ 723 px` — so the cards overlap exactly as tightly as they do on a laptop, and the two words of the title land 14 px above the top card and 14 px below the bottom one. The first version left a 120 px band around the stack; the client said it looked «separated». He was right. The second version measured the stack and put the words on it.

What a real thumb told us

We first tried syncing touch to the smooth-scroll engine so the phone would feel as «heavy» as the wheel on desktop. On a real phone it felt wrong — «I have to swipe a thousand times», in the client's words — because the finger lost the browser's own inertia. We reverted to native touch the same morning and shortened the scroll tracks instead: the rooms from 720 to 520 screen-heights, the case route to seven stops of 140. The gesture stays the phone's; only the distance changed.

The studio page had a second lesson. On desktop each movement pins a piece while its cells scroll past — the language of the whole page. On a phone, the client asked for nothing to stay pinned: read it once, let it go. So in portrait the pinned piece flows in front of its cells and leaves. Same content, same order, a composition that respects the thumb.

The photo that froze a phone

The team photos on the studio page are drawn as a fine grid of ink dots. On desktop a canvas builds the grid once per size and never touches it again. On a phone the same build — tens of thousands of dots on the main thread, repeated every time the address bar appeared — made Chrome show «this page isn't responding» and the photos never painted. The fix was not a lighter effect; it was moving the work off the phone entirely: the grid is rendered at build time to a small image and served through `<picture>` only to touch devices. Same look, zero JavaScript, and the photo appears every time.

How we test it

• A dedicated portrait suite at 390 × 844 with touch emulation: the stack overlaps, the words sit outside it, nothing sits under the navigation bar, nothing overflows the width.
• Every route checked for horizontal overflow — `scrollWidth ≤ 390` — on the index, the article, the brief and the studio.
• Screenshots at 1440 and 390 before anything is called done, kept in the repository as evidence.

The phone is where most people will meet the site. If the route only exists on a laptop, it does not exist.

Vorluno