Noctara
Noctara is the marketing and reservations site for a fourteen-key boutique hotel on the Landour ridge above Mussoorie. It pairs a 3D hero scene with story, rooms, gallery, and guest-notes pages, and a validated reservation request flow.
- Started
- 2026
- Stack
- Next.js, React, TypeScript, Tailwind CSS, three.js, react-three-fiber, GSAP, Lenis, zod
- Kind
- Client
- Source
- Private
Client code base, so the source is not mine to share.
Why I built it
A small mountain hotel needed a site that conveys its atmosphere and takes reservation requests, not just a static brochure.
What it does
- A 3D hero scene rendering a Draco-compressed GLTF house model with a slow orbiting camera rig
- Rooms, filterable gallery (with per-category static pages), story, reviews, and reservations routes
- A reservation request form validated with zod on both the client and the API route
- Reduced-motion support that pins the camera and pauses the canvas when the hero leaves the viewport
How it is built
Built on Next.js 16 (App Router) with React 19 and TypeScript, Tailwind CSS v4, three.js via react-three-fiber and drei, and GSAP plus Lenis for scroll animation.
How it evolved
- 2026Scoped
A small mountain hotel needed a site that conveys its atmosphere and takes reservation requests, not just a static brochure.
- 2026Built
Built on Next.js 16 (App Router) with React 19 and TypeScript, Tailwind CSS v4, three.js via react-three-fiber and drei, and GSAP plus Lenis for scroll animation.
- 2026Delivered
Delivered to the client.
Built by Syed Tasavour. More at syedtasavour.com.