Why this exists
Every AI website builder currently returns the same page. A nav bar, a headline, a subhead, a button, three cards, a footer. It is a competent layout and you can spot one from across the room, which is the problem: the thing you are trying to signal is that somebody thought about this, and a template signals the opposite.
The sites people actually stop on are not better laid out. They are DEEPER. That is the whole difference, and once you can name it you can ask for it.
This guide is the mechanism, the real pages that demonstrate each part of it, and the honest costs. Nothing here needs you to write a line of WebGL.
The one idea underneath all of it
A flat page is one plane. Everything on it sits at the same distance from you, so moving down the page only moves content past a window.
A 3D scroll site is several planes at different distances, with objects standing in the gaps between them. Move down the page and the planes move at different rates, the objects turn, and the light changes. Your eye reads that as a place rather than a document.
- Scroll position is one number. Every layer offset, every camera move, every object that turns to look at you is that single number driving a different curve. That is the entire trick, and it is why these sites feel coordinated rather than busy.
Flat builders never expose that number. The tools worth using hand it to you.
The five layers, and what belongs on each
Take the page you already have and put its parts at five depths. This is the exercise, and it works whether you build it by hand or describe it to a generator.
- Layer 1, furthest back: the ground. A gradient, a photograph, a video, or a live 3D scene. It moves the least. It is what everything else is read against.
- Layer 2: the headline block. It moves slowly and it is the thing the ground makes room for.
- Layer 3: the content row. Cards, features, logos. This is where most of your actual information lives and it moves at roughly the reader's own pace.
- Layer 4: the objects. One or two real dimensional things standing in the gap between layers. This is the layer people remember, and one object is almost always enough.
- Layer 5, nearest: the chrome. Nav, cursor, buttons, anything the visitor touches. It moves the most and it never gets occluded.
The gaps are the product. If two layers move at the same rate they are one layer wearing two costumes, and the page reads flat however many elements are on it.
Free, for your email
Get the full setup steps + the copy-paste setup prompt
The rest of this guide (5 more sections) opens right here. The setup prompt, one paste into Claude that sets it all up, comes by email only. Use your real address.
Unlocks: Real pages that each demonstrate one part · The part nobody mentions · The costs, stated honestly · Getting one without building it · The checklist
50,000+ follow where these guides come from. No spam, reply “unsubscribe” any time.