valley.buddh.in
ghāṭī.
The Living Valley of India — an immersive, scroll-driven 3D journey down a Himalayan river valley in Uttarakhand. A camera rail carries you through five chapters: snow ranges at dawn, a glacier-fed river, a stone ghat with floating diyas, a deodar forest and a terraced hill village. Every tree, temple, wave and sound is generated in code.
Role
Design + Creative Dev (Solo)
Stack
Next.js 16 · React 19 · TS
3D
Three.js · R3F · Custom GLSL
Type
WebGL · Immersive Story
valley.buddh.in
Ghāṭī intro screen: a Himalayan river valley with the headline Where the Earth Breathes
5
Scroll Chapters
8
Discovery Hotspots
0
3D Models · Audio Files
~7k
Lines of TypeScript
2.8MB
Total Textures (CC0)
आगमन
·
नदी
·
घाट
·
वन
·
घाटी
·
आगमन
·
नदी
·
घाट
·
वन
·
घाटी
·
01 01 — Direction
Where the Earth breathes.
The brief was a place, not a product: make someone feel the hush of a Himalayan valley inside a browser tab. Instead of a free-roam game, the valley is told as a short film you scroll through — each chapter is a composed shot with a line of copy, and the camera only moves when you do.
Palette
Night forest, marigold, glacier
A deep forest-night base (#0b100e) and warm parchment ink, lit by marigold (#f2a33a) and saffron from the ghat lamps, with a glacial turquoise (#5cc2b2) pulled from the river itself.
Landscape-led colour
Type
Editorial serif + Devanagari
Cormorant Garamond italics carry the cinematic lines, Manrope handles the interface, and Tiro Devanagari Hindi sets each chapter's native name — आगमन, नदी, घाट, वन, घाटी — so the place speaks in its own script.
Cormorant · Manrope · Tiro
Motion
A camera on rails
Lenis-smoothed scroll drives a spline camera between five chapter compositions. Drag to look around — it springs back when you let go. Keys 1–5 jump chapters, M toggles sound.
Lenis + ScrollTrigger
The world is original and procedural — not photogrammetry, and not a single downloaded model. Its content is specifically Himalayan: deodar, chir pine, banj oak and burans, a Nagara stone temple inspired by Jageshwar, a ghat with brass diyas, a timber footbridge and a Kumaoni village on the terraces.
02 02 — Technical Challenges
A whole valley, built in code.
No 3D models, no HDRIs, no audio files. Terrain, trees, architecture, water, sky, mountains, particles and sound are all generated at load time — which made performance and art direction the same problem.
01 — World Building
Procedural terrain and forests
The valley is carved from layered noise around the river's path, then dressed with deterministic scatter — the same seed always grows the same forest. Trees are built as branching geometry with foliage cards painted onto a canvas atlas at load time, so deodars, pines, oaks and flowering burans each get their own silhouette without a single image download.
Layered noise Deterministic scatter Canvas-painted atlas
0 models
02 — Water
A river that reflects the valley
The river is a custom GLSL shader on top of a planar Reflector: depth-based colour from jade to turquoise, flowing normals, foam around rocks, sun glints and fog-matched edges. Phones fall back to sky-only reflections so the shot still reads without the extra render pass.
Planar reflections Custom GLSL Rock foam
GLSL
03 — Atmosphere
Mist instead of post-processing
Rather than a heavy post-processing stack, a global patch to three.js's fog chunk adds height-based mist and sun scattering to every material at once. Subtle billboard light shafts, drifting petals, tone mapping, a vignette and film grain do the rest of the cinematic work.
Fog-chunk patch Height mist Light shafts
1 patch
04 — Sound
A soundtrack synthesised live
The soundscape is procedural WebAudio: filtered noise for the river and wind, synthesised birdsong, a tanpura-like drone with a jawari shimmer, and a temple bell near the ghat. It starts muted and fades in only when the visitor asks for it.
WebAudio Tanpura drone Muted by default
0 files
05 — Performance
Adaptive on every device
Quality tiers decide shadows, reflection resolution and density up front, and a PerformanceMonitor steps the pixel ratio down live when frames drop. An error boundary and WebGL context-loss handling swap in a static fallback instead of a blank screen, and a ridge-line loader with a rising sun covers the 5–10 seconds it takes to build the world.
Quality tiers Adaptive DPR Context-loss fallback
2 tiers
03 03 — Five Chapters
One river, five stories.
Each chapter is a composed shot with a line of copy and hotspots to discover — the snow ranges, river stones, brass diyas, the stone temple, deodar, burans, the wooden bridge and the terraced village — each opening a short panel of real cultural and natural history.
Chapter 01, The Arrival: mist over the upper valley
01
The Arrival · आगमन
Every journey begins with a quiet moment.
Chapter 02, The River: a glacier-fed river over rounded stones
02
The River · नदी
Water remembers the paths we forget.
Chapter 03, The Sacred Shore: a Nagara stone temple and ghat with diyas
03
The Sacred Shore · घाट
Where nature and tradition meet.
Chapter 04, The Forest: burans in bloom under deodar and oak
04
The Forest · वन
Look closer. There is another world within this one.
Chapter 05, The Hidden Valley: a terraced hill village above the river
05
The Hidden Valley · घाटी
Some places are not visited. They are felt.
04 04 — Result
A valley you can scroll.
A single-canvas Next.js experience with a minimal editorial interface on top: intro, chapter overlays, a progress rail, discovery panels and sound controls — all copy kept in one content file so the scene code stays free of prose.
5
Chapters on one spline camera — upper valley, riverbed, ghat, deodar grove, lower valley
8
Hotspots with short, factual panels on the landscape, ritual, architecture and ecology of Uttarakhand
CC0
Ten Poly Haven textures re-encoded as WebP; everything else, including foliage and sound, generated in code
100%
Custom-built — hand-written shaders, geometry, camera paths and audio graph throughout
05 05 — What I'd Improve Next
Further upstream.
01
Move world generation into a Web Worker so the 5–10 second build no longer blocks the main thread.
02
Replace the billboard light shafts with real volumetric lighting on high-tier devices.
03
Add a time-of-day cycle — dusk aarti on the ghat, monsoon rain and lightning over the ridges.
Live
Enter the valley.

Best on a laptop or desktop with sound on. Scroll to follow the river, drag to look around, and tap the glowing points to discover the valley's stories.

Visit Ghāṭī View Source
valley.buddh.in
Next Project
r'dash.
buddhpriya93@gmail.com  ·  +91-8840-871-715  ·  buddh.in