Quick summary
MINDLOOM is a scroll-flown fly-through of an isometric AI harbor. As you scroll, the camera glides through a cohesive, hand-directed world of generated scenes, stitched together with no visible cuts. It makes a calm, cinematic front door.
Who this template is for
A calm cinematic front door. It’s for brands whose subject is complex and whose tone shouldn’t be.
- AI, infrastructure, and platform companies who need to make something abstract feel physical and understandable
- Brands wanting a calm, considered front door rather than a loud one
- Studios needing an isometric-world reference build that demonstrates cohesive generated art direction
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 continuous fly-through of an isometric harbor world, generated scene by scene and stitched together with no visible cuts.
- A cohesive hand-directed world where every generated scene shares one art direction rather than drifting between them
- A single continuous camera flight scrubbed against scroll position, so the world moves as the visitor does
- An isometric vantage that keeps the whole system legible while staying cinematic
Page sections overview
| Section | Purpose |
|---|---|
| Isometric world vantage | Hold a consistent isometric angle so the system stays legible |
| Shot-to-shot scene chain | Chain generated scenes so the camera flight never breaks |
| Directed art consistency | Hold one palette and one lighting model across every generated scene |
| Scroll-position scrub | Bind the camera flight to scroll so the visitor sets the pace |
| Calm interface layer | Keep captions and navigation quiet enough not to compete with the world |
Design and branding system
The world is a harbor at dusk rendered as calm machinery: cool blues, warm working lights, and clean isometric geometry that stays readable at any zoom.
- A harbor-dusk palette of cool blue shadow against warm working light, giving depth without heavy contrast
- Isometric geometry with consistent edge weights, so the world reads as designed rather than rendered
- Quiet sans-serif captions at a small fixed scale that never compete with the film
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.
- The world is pre-rendered video, so it stays smooth on mobile hardware with no WebGL cost
- Scene count, subject, and art direction are all rebuilt around your brand; the chaining pipeline carries over
- Caption and interface layers reflow independently of the film, so small screens lose no content
- It works as a homepage or as a standalone brand chapter inside a larger site
How it works
Generated scenes are chained shot-to-shot into one continuous camera flight, then scrubbed against scroll position so the world moves as you do.
Screenshots
Captured from the live build, section by section, exactly as the template renders.
