AURELIS
A cinematic landing page for a private residence collection above Dubai.
- Type
- Marketing site / brand experience
- Role
- Design and frontend
- Year
- 2026
A presentation site for a private collection of four residences rising above Dubai. The page had to read like the digital presentation of an extremely expensive object — architecture, light, materials, privacy — never a property listing.
Luxury real estate online defaults to listings: photo grids, square metres, contact forms. That format sells availability, not desire.
The building is the interface. A canvas brush under the cursor reveals the tower from night into sunrise; the collection scrolls horizontally under a pin; the view crossfades from sunrise through golden hour to after dark as you scroll. Champagne gold is the only accent in the entire palette.
- HTML
- CSS
- JavaScript (ES modules)
- Canvas
- Lenis
- IntersectionObserver
- Liquid cursor reveal on canvas, scroll-driven on touch devices
- Pinned horizontal gallery of four residences
- Scroll-crossfade "The View" section across three times of day
- Custom loader with count-up and rotating fragments
- Live Dubai GST clock
- Staggered line reveals driven by one IntersectionObserver
One file, no build step
The whole site is a single 1,394-line index.html — markup, one style block, one module script. No bundler, no framework, no external image files beyond the photography itself. It deploys by copying one file.
Pinned horizontal scroll that degrades
The residence gallery pins and scrolls horizontally above 1200px. Below that it becomes a plain vertical stack rather than a broken pin — the mobile markup is authored separately instead of being fought into the same nodes.
Hero reveals gated on the loader
Hero elements are not driven by the scroll observer, which would fire them behind the loader. They wait for the loader to finish and are released explicitly, so the entrance sequence always plays in order.