Maison Estates
Ultra-luxury real estate website for an international property brand targeting Dubai, London, and Singapore clientele — built with cinematic animations, immersive scroll experiences, and a full multi-page architecture.
What needed solving
Luxury real estate brands operating at the ultra-high-net-worth level are consistently underserved by generic agency websites — template-heavy, visually common, and incapable of conveying the exclusivity and cinematic quality that premium international clients expect. The client needed a web presence that felt genuinely world-class — competitive with the best Awwwards-level luxury sites globally.
How I solved it
A fully custom-built luxury real estate platform architected from the ground up with cinematic storytelling at its core. Every section was designed as a visual experience — GSAP-pinned horizontal property scroll, parallax backgrounds, character-level text reveals, Lenis smooth momentum scrolling, and a custom magnetic cursor. Six complete pages with consistent premium design language throughout.
A look at the product
Key Features
- Cinematic GSAP preloader with letter-by-letter animation and gold progress bar
- Horizontal pinned property scroll section — 6 full-height property cards scroll cinematically as the user scrolls down
- Full property detail pages with parallax hero, interactive gallery with thumbnails, highlights and spec grid
- Journal system with category filtering, featured article layout, and full article detail pages with related content
- Custom Lenis smooth scroll with 1.4s momentum easing — replacing native scroll entirely
- Magnetic cursor with gold ring that morphs on hover over images and interactive elements
Architecture
- 01Next.js 14 App Router with client components isolated to interactive sections only
- 02GSAP ScrollTrigger registered globally with Lenis ticker integration — scroll and animation in perfect sync
- 03Shared data layer in lib/constants.ts and lib/articles.ts — single source of truth for all properties and journal content
- 04Unsplash CDN with auto=format for automatic WebP delivery, sized per context (hero 2400w, cards 1800w, backgrounds 1600w)
- 05Hero image preloaded in head with fetchPriority=high — zero layout shift on first paint
- 06Vercel deployment with Next.js image optimization, compression enabled, and CDN edge caching
Results & Outcomes
Achieved genuine Awwwards-level visual quality — cinematic, immersive, and premium throughout
Full 6-page site with consistent design language — homepage, properties listing, property detail, about, contact, journal
Lenis + GSAP combination delivers buttery smooth 60fps scroll experience on all modern browsers
Property horizontal scroll, parallax effects, and text animations all perform at full quality without layout jank
Client-ready portfolio showcase demonstrating capability to deliver ultra-luxury digital experiences for international brands
Want a similar solution?
I'm available for new projects. Let's talk.