Amber Quay — Cinematic Scroll-Driven Property Launch

Concept/spec project — a fictional waterfront property launch built to demonstrate scroll-driven storytelling and motion design, not a real client engagement.

Amber Quay is a cinematic, scroll-scrubbed landing page for a fictional 42-storey waterfront tower. Instead of the usual fade-in-on-scroll pattern, the entire hero visual — a hand-built SVG skyline and tower illustration — is choreographed to scroll position like a camera move: dolly in on arrival, rack-focus into an interior cutaway, pull back to reveal the harbor view, then settle on the call to action.

A single pinned scroll-scrub sequence (GSAP + ScrollTrigger) drives five staged scenes, each with its own entrance choreography (fade, slide, clip-reveal, scale) instead of one repeated animation

Hand-built SVG skyline, tower, and interior cutaway, with procedurally generated windows and city blocks rather than static image assets

Cinematic letterbox bars and an iris-style reveal that open as the sequence begins

Lenis-smoothed scrolling synced to the animation timeline

Full mobile and reduced-motion fallback: the same content re-renders as a static, centered, stacked layout with scroll-triggered reveals instead of the pinned scroll-scrub

Built as a single self-contained HTML file — no build step or framework dependency.