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 in laterite, brick, stucco, glazed tile, and 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 one is 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 instead of showing a result: a product that assembles itself, a story told as construction, or 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. You get 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 printed page. |
| Sound you can stand in | A generated score per tower, and weather you can hear. |
Design and 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 instead of a game viewport
- Every texture (brick bond, lime stucco, laterite, gold leaf, and 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, and type) so the moonlit field and the chrome never fight
Mobile and speed optimization
On a phone the page rearranges itself instead of shrinking.
- The headline moves into the sky and the roman subtitle steps aside below 900px
- Drag orbits, pinch zooms, and double-tap recentres. It’s 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 OGtraplord homepage runs on the same logic.
- The strongest visual moment loads first, so visitors like what they see before they read a word
- Every section answers one question and hands off to the next, which keeps the scroll moving toward the call to action
- The ask arrives only after the proof: by the time visitors reach 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. It runs from file:// 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, with no mesh files and 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. The four times of day and four weather states are one lerped parameter set, and the whole frame is eight draw calls at 60 fps.
On its origins
YOT is an independent study of Thai sacred architecture, and 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, with its own geometry, palette, layout, copy, and generated Thai score.
Screenshots
Captured from the live build, section by section, exactly as the template renders.
