Aurelia Residences
A cinematic luxury-property landing page where a single fixed villa video is revealed through scroll-driven apertures, across 14 interactive sections.
- Role
- Concept + design + build
- Services
- Art direction · Creative frontend · Motion design · Performance
- Year
- 2026
- Status
- Concept build
Overview
The brief
Premium property marketing usually drowns in galleries. The page had to feel like a film — one continuous place, gradually revealed — while still doing the practical work of residences, floor plans and an enquiry flow.
An original concept project. Brand and content created for the build.
Approach
How I built it
Pinned one villa video behind the whole page and revealed it through box-shadow 'apertures' that open as you scroll, so it reads as a single space rather than a slideshow.
Built 14 sections — hero, residences, floor plans, amenities, gallery lightbox and a demo enquiry form — on a shared motion system with GSAP, Lenis and SplitText.
Tuned the Largest Contentful Paint to 1.76s with zero layout shift, and documented a Tailwind hex-token and a SplitText parent-observer gotcha for future builds.
Kept all imagery and video license-audited, with owner-confirmation notes for anything resembling a real development.
Key features
What makes it work
- One fixed villa video revealed through scroll apertures
- 14 sections with interactive residences + floor plans
- Gallery lightbox and demo enquiry form
- LCP 1.76s, CLS 0, Lighthouse A11y/BP/SEO 100
Gallery
A closer look
Build
Under the hood
- Lighthouse Accessibility / Best Practices / SEO 100 (recorded)
- LCP ~1.76s, CLS 0.00
- Verified across 360 to 1440, clean console
Reflection
Looking back
The aperture technique is the centrepiece of this set: it turns a property tour into one continuous cinematic space. The motion system here is the most ambitious I have shipped.