Kailash Yatra
The live website for a real 2026 pilgrimage to Mount Kailash and Lake Manasarovar.
- Context
- A fifteen-day pilgrimage in July 2026 to Mount Kailash and Lake Manasarovar in Tibet. The organisers needed one place for pilgrims to read the itinerary, the price and how to get in touch, and it had to stay right as the plan changed.
- Role
- I designed and built the site and deployed it at mightyhimalaya.com. I kept the itinerary in step with the organisers as it changed, and moved the site to its new domain with permanent redirects from the old one.
- Stack
- Vite, React, Tailwind CSS, GSAP ScrollTrigger and Lenis, hosted on Vercel.
- Visit
- mightyhimalaya.com
The hard problem
One card, three acts, one scroll position
The centre of the site is a single card that changes shape as you scroll: a tall portrait for the peak, a landscape for the lake, a wide strip for the kora walk around it, with its tilt, colours, parallax and text changing too. Everything runs off one ScrollTrigger over a 300vh section with a CSS-sticky stage. Its progress is split into three bands, and the work is split by speed: the tilt, parallax and progress bar are written every frame, while the act change (layout classes, content, colours, the text entrance) runs once, behind a guard, so it never re-fires mid-scroll. Lenis drives the loop from the GSAP ticker. When I split the original 2,692-line page into 13 React components, all of it moved into one effect whose cleanup destroys Lenis and kills every trigger, so nothing leaks between renders.