Quick summary
BUA is a pond that’s alive. One seeded PRNG grows the water, the lily pads, the stems, three sacred-lotus blossoms, and the dragonflies that patrol them, so it’s 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. Its stamens appear only as it parts, and pollen drifts off on the air. Press Rain and a six-second shower covers the pond in rings. Around the scene sits a bilingual editorial page, with Thai and English set together, 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, or a developer who wants a worked example of shader water with CPU-mirrored physics.
- Brands whose identity is calm, like spas, resorts, tea houses, and 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’ve 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. 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 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, about 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, and Rain calls a six-second shower that covers the pond in rings
- The full editorial page around it: a stepping-stone dock with proximity magnification, self-drawing field-note diagrams, staged entrances, a 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’ve been. |
| The dawn | A sun you never see directly, everywhere in the frame. |
Design and branding system
The design brief was a Thai pond at first light, the hour the sacred lotus opens.
- A dawn palette throughout: deep indigo down through rose to a gold horizon, teal-dark water, pad greens, and lotus pink. Every hex is converted to linear space so the r149 pipeline renders it faithfully
- Editorial serif display over translucent blurred cards, with Thai and English set together. บัว carries the hero, with BUA letter-spaced beneath it
- A film-grain overlay and drifting mist sprites keep the procedural scene from reading clinical
Mobile and speed optimization
The pond composes itself for a phone, and 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. It’s the same scene, tuned to the hardware
- Reduced-motion visitors get the still pond with every entrance already settled, and ripples still answer a deliberate tap
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.
- One static HTML file plus a vendored Three.js r149, with no build step and 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 with its own subject, 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
BUA is one static HTML file and a vendored Three.js r149, with no build step and no external request after load. The water is a single plane displaced by layered ambient waves plus a pool of 24 live ripple uniforms. 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, and 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, with its own subject (the two plants Thai calls บัว), its own water engine, and its own flowers, dragonflies, copy, and code.
Screenshots
Captured from the live build, section by section, exactly as the template renders.
