Quick summary
Tōrō is a night walk up a mountain to a temple, told in five chapters and rendered live in the browser. One camera moves along one unbroken spline as you scroll — approach, gate, water garden, inner hall, summit — so the visitor never crosses a scene boundary, because there are none. The whole world is built from geometry when the page loads: hall, torii, stone stairs, lanterns, terraced ground, pines, moon, fog, rain and embers.
Who this template is for
This build is for anyone who wants a scroll experience that is genuinely three-dimensional — a real camera moving through a real world — rather than a stack of pinned sections pretending to be one.
- Studios and brands who want a launch page people describe to someone else afterwards, and who need the craft to survive close inspection
- Cultural, hospitality and place-led projects with a story that unfolds along a route rather than sitting still in a grid
- Builders who want to read a complete WebGL site — world, camera, post chain, editorial layer — in code small enough to hold in your head
What problem this template solves
Most site templates look fine in a screenshot and fall apart in production — interchangeable sections, stock imagery, and nothing that proves craft.
- Template marketplaces sell the same layouts to thousands of buyers, so nothing ends up feeling owned
- Buyers can usually preview a design but almost never see the exact instructions that produced it
- Teams need reference builds that survive contact with real content rather than lorem-ipsum mock-ups
What you get with this template
You get a five-chapter night walk up to a mountain temple, rendered live in the browser: one continuous camera on one unbroken spline, a world built entirely from geometry at runtime, and an editorial layer that tracks the chapter you are in.
- Five composed chapters along a single camera path — approach, gate, water garden, inner hall, summit — with no scene swaps or cuts anywhere
- A complete world built procedurally at load: temple hall, gate, torii, stone stairs, lanterns, terraced terrain, pines, moon, fog, rain, leaves and embers
- The full editorial system on top — chapter rail, oversized display type, plates in cards, alpha-keyed foreground cutouts that hand off between chapters
Page sections overview
| Section | Purpose |
|---|---|
| One Continuous Camera Spline | Move a single camera along one unbroken path instead of cutting between scenes |
| A World Built at Runtime | Construct the whole scene from geometry so nothing has to be modelled or downloaded |
| Hand-Rolled Post Chain | Grade the frame in-house rather than pulling in a post-processing library |
| Terraced Mountain Grading | Cut the mountain into flats and steps the way a real temple site is graded |
| Chapter-Bound Foreground | Pin keyed cutouts to the active chapter and hand them off as the camera moves |
Design & branding system
The palette is built from one decision: the only warm light in the world comes from inside something — a lantern, a paper screen — and everything else is cold.
- Near-black and blue-charcoal hold the world, with warm amber reserved entirely for lantern flame and shoji glow, so light always reads as coming from somewhere
- A single oversized vermilion moon anchors the sky and doubles in the water garden, giving the walk one fixed landmark to orient against
- Type runs system-only serif and mono against bone white — no remote font request — with vertical Japanese display type set as image rather than as heading
Mobile & speed optimization
This is live 3D, not a video scrub, so the mobile pass is about render budget and reading — not about swapping the experience out for stills.
- The scene renders at a capped pixel ratio on small screens, so a phone draws the same world without paying for a retina framebuffer
- Layout reflows to a single column with a full-width legibility floor under the copy, because the text sits over the scene rather than beside it
- A reduced-motion path drops the camera motion and keeps every word, plate and chapter — the complete reading experience survives with the animation switched off
How this template helps you convert
The page earns attention before it asks for anything — the same conversion logic the OGtraplord homepage runs on.
- The strongest visual moment loads first, so a visitor forms a positive impression before reading a word
- Every section answers one question and hands off to the next, keeping scroll momentum toward the call to action
- The ask arrives only after the proof — by the time a visitor reaches it, the work has already made the argument
Other information about this template
A few notes before you build on this one.
- It is an original build from a published implementation brief — no third-party source or artwork is used, and the name, chapter arc, copy and camera choreography are its own
- There is no framework, bundler, package manager, build step, analytics or remote font, and no network request at all after the page loads
- The 3D runtime is vendored from its official distribution with its licence notice retained, so the whole thing runs from static files on any host
- Chapter count, world and copy are all rebuilt around your story; the camera system, post chain and editorial layer are what carry over
How it works
No framework, no bundler, no build step and no network request after load. The post chain — bloom, ACES tone mapping, film grain, vignette — is written directly against the renderer rather than pulled from a library, so the only dependency in the build is the core 3D runtime, vendored from its official distribution with its licence notice intact.
On its origins
Tōrō is an original build made from a publicly published implementation brief, which its author offers so others can rebuild or reinterpret the experience. No third-party source or artwork is used here: the code is written from scratch, the imagery was generated fresh, and the name, chapter arc, copy, palette and camera choreography are its own.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
