A single-page frontend demonstration for a fictional lakeside boutique hotel in Udaipur. Built with Next.js 15, TypeScript and Tailwind v4, it pairs cinematic scroll storytelling with a real-time 3D architectural model of the property that dismantles itself as you scroll. Fully responsive, accessible, and gracefully degrading — no backend, the reservation flow is visual only. One-liner version: A cinematic, 3D-driven single-page site for a fictional luxury hotel — Next.js 15, Three.js and GSAP, built to show frontend craft rather than to take bookings.
VERDANT HOUSE is a static, client-facing frontend demonstration built around a fictional luxury boutique hotel on Lake Pichola, Udaipur. It exists to show what a premium hospitality website can feel like when the front end is treated as the product: editorial pacing, real 3D architecture, and motion that carries meaning rather than decoration. There is no backend, no database and no booking engine — the reservation flow is a visual demonstration and says so plainly in the interface. The experience. The page reads as a sequence of chapters rather than a stack of sections: arrival → the house in section → who we are → architecture → suites → a day here → dining → wellness → water → experiences → place → photographs → guests → the year → getting here → come and stay. The tonal ground alternates between deep forest and warm ivory so each chapter feels like walking into a different room, and per-chapter lighting overlays simulate hero sunset, amber restaurant, sage spa, daylight pool and warm windows at night. The technical centrepiece. HouseSection pins the viewport while roughly five screen-heights of scroll drive a stylised 3D model of the property. The building is grouped into layers — site, spa, restaurant, lobby, suites, roof — and each eases apart on its own curve as progress advances, reading as an architectural presentation rather than an explosion. Six hotspots live inside their layer groups so their labels travel with the geometry; window lamps warm as the sequence moves from afternoon to dusk; repeated elements (windows, columns, balusters, pergola beams) are instanced to one draw call each. The model reads scroll progress from a ref inside its own useFrame loop, so scrubbing costs zero React renders. A second, lighter canvas presents the Lake View Suite cut open on two sides, draggable, mounting lazily and rendering only while on screen. Graceful degradation is a first-class feature, not a fallback. Without WebGL or under prefers-reduced-motion, the 3D section becomes a 2.5D stack of photographic depth planes on a shared perspective; pinning and scrubbing switch off and pinned sections render as static editorial layouts. On touch and small screens the DPR ceiling drops, shadows and HTML labels turn off, and hotspots become a tap list. Off-screen canvases set frameloop="never" to stop rendering entirely, and sustained frame drops trigger adaptive resolution scaling. Stack. Next.js 15 (App Router) and TypeScript; Tailwind CSS v4 with CSS-first @theme tokens; Framer Motion for micro-interaction; GSAP + ScrollTrigger for scroll choreography; Lenis for smooth scroll; Three.js with React Three Fiber and Drei for 3D; Lucide for icons. Roughly 8,200 lines across ~50 source files. Design system. A deliberately narrow palette — deep forest and warm ivory carry the page, with terracotta and copper as accents only. Cormorant Garamond for editorial serif headings against Manrope for body and wide-tracked uppercase labels, all sized with fluid clamp() tokens. Linen, stone and wood textures plus a single fixed film-grain overlay give the surfaces material. Performance. Three.js, both canvases and the reservation panel are dynamically imported, keeping the route's initial JS around 235 kB. Lenis is driven by the GSAP ticker so pinned triggers and the 3D camera share one clock and never drift. Cursor tracking, pointer parallax and drag rotation write transforms directly in requestAnimationFrame rather than through React state. All photography runs through next/image with explicit sizes, AVIF/WebP output and a single priority LCP image. Accessibility. Semantic landmarks and a single h1, a skip link, visible non-default focus rings, labelled controls throughout, aria-pressed/aria-expanded/aria-selected on interactive lists, filters and tabs, focus trapping and Escape handling in the lightbox, menu and reservation panel, arrow-key navigation in the lightbox, alt text written as captions rather than filenames, and a complete reduced-motion path that keeps the design intact while stopping the movement. Content. Every line of copy and every image URL lives in src/data/ — art direction is a one-file change. The property, its people, the reviews and the awards are fictional and written for demonstration; photography is from Unsplash under its licence.
