Quick summary
THE DESCENT is a zoom-chain scroll-world: five nadir depths connected by four AI-generated legs, so scrolling pulls you down through nested worlds in one unbroken descent. Structural-SSIM seam gating keeps every junction invisible. (This one guards against being embedded, so the preview opens it in a new tab.)
Who this template is for
A portfolio you descend into rather than scroll past. It is for people whose work deserves a structure rather than a grid.
- Studios and creative directors who want a portfolio that is itself the strongest piece in the portfolio
- Brands with a layered story — surface product, deeper craft, deeper still philosophy — that maps onto depth
- Anyone who needs a launch or campaign moment that visitors describe to other people afterwards
What problem this template solves
Scroll-driven cinematic sites normally demand a 3D artist, a motion designer and weeks of iteration. This build gets the same effect from generated film and hand-written code.
- True 3D fly-throughs price out most projects before the first storyboard is drawn
- Video-scroll sites usually stutter, because the scrub, the seams and the loading are all hard to get right
- Studios who want this look have few reference builds showing how the legs are generated and joined
What you get with this template
You get a five-depth zoom chain: five nadir points connected by four generated legs, so scrolling pulls you down through nested worlds in one unbroken descent.
- Five distinct depths, each a separate world with its own art direction and its own message
- Four generated legs joining them, seam-gated so the junctions between worlds stay invisible
- A continuous scroll-driven fall with no cuts, page loads or transitions anywhere in the experience
Page sections overview
| Section | Purpose |
|---|---|
| Five-Depth World Chain | Connect five distinct worlds into one continuous vertical descent |
| End-Frame Seeding | Seed each leg from the previous leg’s final frame so motion continues |
| Structural-SSIM Seam Gate | Measure every junction and reject legs that would show a visible seam |
| Scroll-Driven Scrub | Bind scroll position directly to the fall so the visitor controls the pace |
| Depth-Anchored Content | Attach each message to the depth where it belongs |
Design & branding system
The art direction darkens with depth: each nadir is lit and graded differently, so the visitor feels descent even without a depth readout.
- A palette that cools and darkens progressively with depth, making altitude legible without any interface element stating it
- Each nadir given its own lighting and grade, so the five worlds stay distinguishable while the transitions stay invisible
- Typography held constant across all five depths, acting as the fixed reference that proves the world is what is moving
Mobile & speed optimization
The film is pre-rendered video, so the cinematic look costs almost nothing on mobile hardware — the phone only ever scrubs a video.
- Pre-rendered legs mean no WebGL budget on mobile; scroll position simply drives video time
- Posters and compressed masters keep the first frame fast even on cellular connections
- Caption and interface layers reflow independently of the film, so small screens lose no content
How this template helps you convert
A scroll film turns a pitch into an experience. The structure keeps the visitor moving toward the ask without ever feeling sold to.
- The opening frame is the hook — motion begins with the first scroll tick, rewarding engagement instantly
- Each beat lands one message before the camera moves on, so the story accumulates instead of blurring
- By the final beat the visitor has flown the whole world, so the closing call to action feels earned rather than pushed
Other information about this template
A few notes on this build.
- It guards against being embedded, so the preview on this page opens it in a new tab rather than inline
- The legs are pre-rendered video, which means the cinematic look costs almost nothing on mobile hardware
- Depth count, art direction and copy are all rebuilt around your story; the seam-gating pipeline is what carries over
- It lives at its own address on this domain rather than on a separate host
How it works
Each leg's end frame seeds the next descent, gated by structural SSIM so seams stay invisible. Scroll drives a continuous fall through five depths — a portfolio you descend into rather than scroll past.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
