Haven

Scroll-driven real-estate landing with cinematic motion

About This Project

A cinematic real-estate landing page built with React, GSAP ScrollTrigger, and Lenis smooth scrolling. The experience opens with a loading reveal and a pinned hero transition that resolves architectural imagery into the HAVEN brand, then moves through long-form editorial sections with light and dark surfaces.

Tech Stack

React
Vite
GSAP
Lenis
Tailwind CSS

Key Features

Pinned hero transition with architectural imagery and brand mask
Lenis smooth scrolling locked to GSAP ScrollTrigger
Editorial sections with light and dark surfaces
Reduced-motion support for accessible fallbacks

Challenges

Keeping Lenis scroll position and GSAP ScrollTrigger in lockstep for the pinned hero while preserving readability when prefers-reduced-motion is set.

Future Plans

Next steps: CMS-driven content, property search integration, and deeper agent profile pages.