Quick summary
BUA is a pond that is actually alive: one seeded PRNG grows the water, the lily pads, the stems, three sacred-lotus blossoms and the dragonflies that patrol them — the same pond on every visit, from code alone. Move your pointer across the surface and the water remembers, laying a trail of rings while the nearest pads lean out of your way on little springs. Press Bloom and the largest blossom opens petal by petal, stamens appearing only as it parts, pollen drifting off on the air. Press Rain and a six-second shower covers the pond in rings. Around the scene sits a bilingual editorial page — Thai and English set together — with self-drawing field-note diagrams and a stepping-stone dock.
Who this template is for
This build is for anyone who wants a hero that feels alive instead of looped — a wellness or hospitality brand with a calm identity, a studio that wants a signature interactive, a developer who wants a worked example of shader water with CPU-mirrored physics.
- Brands whose identity is calm — spas, resorts, tea houses, meditation apps: the pond sets a tone no stock video can, and it never repeats
- Studios and portfolios that want one unforgettable interactive surface — visitors stay to draw on the water, and the page remembers where they have been
- Developers who want a compact reference for ripple-uniform water, InstancedMesh crowds that bob on the same wave maths, and procedural flowers that animate open
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 static HTML file and a vendored Three.js build — serve the folder and the pond is growing.
- The complete living pond: shader water with 24 live ripples, ~66 instanced lily pads that lean away from your pointer, emergent lotus leaves, three procedural blossoms, two floating water-lily stars, dragonflies, pollen motes and mist
- The two set-pieces — Bloom unfurls the hero lotus petal by petal and releases a pollen burst; Rain calls a six-second shower that covers the pond in rings
- The full editorial page around it: stepping-stone dock with proximity magnification, self-drawing field-note diagrams, staged entrances, reduced-motion path and a single-column mobile composition
Page sections overview
| Section | Purpose |
|---|---|
| The Water | One continuous sheet of mathematics. |
| The Two Flowers | Botanically honest — both plants Thai calls บัว. |
| The Bloom | A flower that opens petal by petal, on request. |
| The Pointer | The water remembers where you have been. |
| The Dawn | A sun you never see directly, everywhere in the frame. |
Design & branding system
The design brief was a Thai pond at first light — the hour the sacred lotus actually opens.
- Dawn palette end to end: deep indigo down through rose to a gold horizon, teal-dark water, pad greens and lotus pink — every hex converted to linear space so the r149 pipeline renders it faithfully
- Editorial serif display over translucent blurred cards, Thai and English set together — บัว carries the hero, BUA letter-spaced beneath it
- A film-grain overlay and drifting mist sprites keep the procedural scene from reading clinical
Mobile & speed optimization
The pond composes itself for a phone; nothing is cropped out.
- A narrow viewport at load pulls the hero camera higher and further back so the blossoms frame the title instead of colliding with it
- Pad count, water tessellation and pixel ratio all step down on small screens — the same scene, tuned to the hardware
- Reduced-motion visitors get the still pond with every entrance already settled; ripples still answer a deliberate tap
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.
- One static HTML file plus a vendored Three.js r149 — no build step, no external request after load; any static host serves it
- Everything is grown from one seeded PRNG at load — change one constant and you have a different pond; keep it and every visitor sees the same one
- The genre — a procedural landscape study behind an editorial page — follows MengTo’s Sylva experiment; that project grants no licence, so this is an original build: its own subject, its own water, flowers, code and copy
- The bloom, rain and ripple systems all share one uniform pool — the shader never branches per effect, which is why the pond stays smooth on integrated GPUs
How it works
One static HTML file and a vendored Three.js r149 — no build step, no external request after load. The water is a single plane displaced by layered ambient waves plus a pool of 24 live ripple uniforms, and the exact same height function runs a second time on the CPU so everything that floats bobs on precisely the water it sits in. The blossoms are procedurally generated petal whorls on eased hinges; the pads are one InstancedMesh with per-instance spring tilts.
On its origins
The genre — a living procedural landscape behind an editorial page — follows MengTo’s Sylva experiment, which grants no licence for reuse. This build is an original written from scratch: its own subject (the two plants Thai calls บัว), its own water engine, flowers, dragonflies, copy and code.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
