Bahria Real-Estate
A high-end real estate landing page featuring cinematic GSAP preloader animations, smooth scroll interactions, and a luxury property showcase experience built for premium clientele.
About the Project
LuxeHaven Realty is a premium real estate landing page built to position a property brand in the luxury segment. The brief was clear: the first impression needs to feel cinematic — the kind of experience that makes a potential buyer trust that the properties being sold match the quality of the website selling them.
Built with Next.js for performance, GSAP for animation orchestration, Lenis for scroll physics, and Tailwind CSS for a consistent design system — every technical choice was made to serve one goal: make luxury feel tangible through a browser.
Where the First Second Matters Most
In real estate, trust is everything. A visitor decides within seconds whether a brand is premium or generic. This project was designed to win that first second, with a GSAP preloader that sets the tone before the user even sees the main content.
The GSAP Preloader — Setting the Tone
The site opens with a custom GSAP preloader sequence. A percentage counter increments with a custom ease curve, the brand name reveals through a clip-path wipe, and the entire loader exits with a coordinated curtain animation — unveiling the hero section beneath it.
The preloader isn't decoration. It's a brand statement. It tells the user: this is not a template. Someone cared about this.
The entire sequence runs in under 2.5 seconds, keeping load perception low while delivering maximum visual impact.
Hero Section & Scroll-Triggered Reveals
The hero section uses a full-bleed property image with a GSAP timeline that staggers in the headline, subheading, and CTA — each element entering with a custom ease and slight Y-offset for a cinematic floating-up effect.
As the user begins scrolling, ScrollTrigger takes over. Property cards, statistics, and section headings all animate relative to scroll position — creating a layered, sequential reveal that guides attention naturally down the page.
Lenis Smooth Scroll Integration
Lenis replaces native browser scroll with physics-based interpolation. The result is the signature "luxury scroll" feel — smooth, weighted, and precise. Lenis runs inside a RAF loop synced to GSAP's ticker, ensuring zero desync between scroll position and animation state.
On property image sections, a custom scroll-speed multiplier creates a parallax depth effect that makes the page feel three-dimensional.
Tailwind Design System
A custom Tailwind config defines the brand's luxury palette — deep charcoal, warm cream, and gold accent tones. Typography scale uses a premium serif for headlines and a clean sans-serif for body copy. Every spacing value, border radius, and shadow is defined in the config — ensuring zero visual inconsistency across all sections.
A Landing Page That Sells Before the Agent Calls
LuxeHaven Realty was built on the understanding that a real estate website's job is to pre-sell the client. By the time a visitor makes an inquiry, they should already feel confident, impressed, and ready. This site delivers that experience.
What This Project Demonstrates
This project is proof that GSAP animation engineering and Next.js performance optimization aren't separate disciplines — they work together. A preloader that runs at 60fps, a scroll experience that feels physical, and a page that scores 90+ on Lighthouse. That's the standard.
