Quick summary
THE DESCENT is a zoom-chain scroll-world. Five nadir depths are 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 instead of scrolling past. It’s for people whose work deserves more structure than a grid.
- Studios and creative directors who want the portfolio itself to be the strongest piece in it
- Brands with a layered story that maps onto depth: the product on the surface, the craft below it, and the philosophy deeper still
- Anyone who needs a launch or campaign moment that visitors describe to other people afterwards
What problem this template solves
Scroll-driven cinematic sites usually take 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 tend to 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 and 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, the fixed reference that proves it’s the world that’s moving
Mobile and 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 there’s 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, so engagement pays off right away
- 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
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, so 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 the seams stay invisible. Scroll drives a continuous fall through five depths. It’s a portfolio you descend into instead of scrolling past.
Screenshots
Captured from the live build, section by section, exactly as the template renders.
