Palais Amghass
A Moroccan palace hotel website where the guest journey is told with parallax and 3D scroll choreography — sticky scenes, scrubbed motion, reservation paths and a contact flow wired through API route handlers.
The brief, unpacked
Palais Amghass is a hotel website built around one idea: scrolling through the property should feel like walking through it. The experience is choreographed with GSAP 3 + ScrollTrigger + Lenis — parallax layers, scrubbed scenes and 3D scroll effects — with reveals, the menu and the carousels handled by Motion (Framer) and an Embla-powered testimonials carousel. The frontend runs on Next.js 16 App Router (Server Components/SSG, Turbopack) with React 19, strict TypeScript and a Tailwind CSS v4 theme (CSS-first, no config file). Booking, contact and newsletter forms are validated with react-hook-form + Zod and handled by Next route handlers (/api/booking, /api/contact, /api/newsletter) — validation and logging only, no database attached. A Sanity schema set was written and the GROQ queries prepared but never connected to a live project; email goes out through Resend.
The work
Challenges, and how they fell
- 01
Scroll storytelling without jank
Parallax and 3D scroll effects over long sections can stutter on mid-range devices when images and filters fight the compositor.
Solution
Everything critical was driven by GSAP scrubbed tweens over transform/opacity only, on top of Lenis smoothing. Layers are flattened into single composites, images pre-loaded into CSS transforms, and the heavy choreography steps down to static stacking under prefers-reduced-motion and coarse pointers.
- 02
Forms with no database
Booking, contact and newsletter flows needed to work immediately — without provisioning a backend or a data store.
Solution
All three flows run as Next.js route handlers with react-hook-form + Zod validation on both ends. Inputs are validated, rate-limited and logged server-side; contact email is delivered through Resend. The handlers are designed so a real database can be attached later without touching the client code.
- 03
Cutting the WebGL hero
An early Three.js + R3F + postprocessing hero was prototyped and tested — and it threatened the hotel site’s load budget.
Solution
The WebGL scene was removed from the shipped site. The depth it promised was rebuilt with layered CSS parallax, scroll choreography and GSAP — the same feeling, at a fraction of the payload, and honest about what the page actually ships.
Gallery
Next project
WISLA
Continue