Quick summary
YOT is a construction site that finishes a monument every four and a half seconds. A cut plane rises through a fully built model and everything below the line is finished work — laterite, brick, stucco, glazed tile, gold leaf — while a bamboo scaffold waits above it. Switch the style and the same construction runs as an Ayutthaya prang, a Lanka-style bell chedi, a Sukhothai lotus-bud chedi, a Lanna chedi, a mondop, or a Rattanakosin prasat, each captioned by stage in Thai and English inside a manuscript-paper page.
Who this template is for
This build is for anyone who wants a page that performs a process rather than showing a result — a product that assembles itself, a story told as construction, a subject with real craft behind it.
- Studios and brands who want a hero that visitors replay — the build runs in 4.4 seconds and invites one more click every time
- Cultural and heritage projects that need architecture treated with respect: six distinct monument types, each staged and captioned like a museum plate
- Developers who want a worked example of procedural geometry, clipping planes and instancing carrying an entire site with no assets to host
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
One folder of static files — open it and the first tower is already rising.
- Six procedural towers on one construction system: prang, bell chedi, lotus-bud chedi, Lanna chedi, mondop and prasat, each with its own stage captions in Thai and English
- A rising cut plane with a section cap that always matches the plan — plus bamboo scaffolding, four times of day, four weather states and a generated score per tower
- A timeline you can scrub, a camera you can orbit, and an editorial manuscript page that rearranges for phones
Page sections overview
| Section | Purpose |
|---|---|
| The Cut Plane | Turn a finished model into a living construction site. |
| Six Procedural Towers | Six monument types from one set of geometry builders. |
| Weather And Time | Cross-fade the world, never cut it. |
| The Manuscript Page | Editorial chrome that behaves like a page, not a UI. |
| Sound You Can Stand In | A generated score per tower, weather you can hear. |
Design & branding system
The design brief was a samut-khoi manuscript that happens to contain a construction site.
- Cream paper, vermilion and gold accents, and faint grid rules keep the 3D scene reading as a plate in a book rather than a game viewport
- Every texture — brick bond, lime stucco, laterite, gold leaf, glazed tile — is drawn on a 256px canvas at load, with bump and roughness derived from its own luminance
- The night theme re-inks the whole page — paper, rules, type — so the moonlit field and the chrome never fight
Mobile & speed optimization
The page rearranges rather than shrinks.
- The headline moves into the sky and the roman subtitle steps aside below 900px
- Drag orbits, pinch zooms, double-tap recentres — the same camera, thumb-sized
- The control strip wraps into rows within reach, with every hit target at 40px or better
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.
- No build step and no framework: vendored Three.js r149 plus nine plain script files, served from any static host — file:// works too
- Everything is seeded — a given tower renders identically on every load, which makes visual regression trivial
- The towers are original constructions, not models of specific temples, and the build is an independent study unaffiliated with any institution
- The soundtrack is generated per tower and loops on a three-bus WebAudio graph that waits politely for the first user gesture
How it works
Every tower is generated from a small set of geometry builders — no mesh files, no image assets. Each style declares the plan of its own cross-section, so the cap that seals the cut is rebuilt as the line rises and a sliced octagonal drum never shows a square lid. Textures are drawn on canvases at load; four times of day and four weather states are one lerped parameter set; the whole frame is eight draw calls at 60 fps.
On its origins
YOT is an independent study of Thai sacred architecture — the towers are original constructions rather than models of specific temples. The rising-cut-plane idea comes from a published open study of pan-Asian towers whose author grants no licence for code or artwork reuse, so this build is written from scratch: its own geometry, palette, layout, copy and generated Thai score.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
