Vale

Vale is a curated-luxury real-estate template for boutique agencies that represent a handful of properties rather than a whole market. Eleven routes cover the home, a property archive and per-property pages with an eight-row spec panel, features list, gallery and enquiry CTA, a neighbourhoods index and detail pages, a journal, about, services, contact and 404. The hero is a 300vh sticky sequence: three featured residences cross-fade on a smoothstep curve tied to scroll progress, each with an editorial panel whose asking price counts up in USD. Further down, the neighbourhoods section pins and scrolls horizontally with containerAnimation-linked parallax on every panel. Three skins, Parchment & Brass, Midnight Estate and Slate Modern, switch from a floating control and persist in localStorage.

What’s inside

• 11 routes, Home, Properties, Property detail, Neighbourhoods, Neighbourhood detail, Journal, Journal post, About, Services, Contact, 404
• 300vh sticky hero, three featured residences cross-fade on a hand-written smoothstep curve driven by ScrollTrigger progress at scrub 0.6
• Asking prices count up to their real value with a GSAP tween formatted live through Intl.NumberFormat USD
• Pinned horizontal neighbourhoods rail, panels scroll sideways while each image scales down through a containerAnimation-linked ScrollTrigger
• SplitText line reveals on the agency statement, philosophy strip, testimonial and closing CTA band
• Featured listings with clip-path inset(0 0 100% 0) card reveals plus scrub parallax on every image

The signature

The home page opens on a 300vh sticky stage holding three featured residences. Instead of a hard swap, each layer’s opacity is computed from a smoothstep curve against the ScrollTrigger progress value, so the properties dissolve into one another across overlapping 0.28–0.36 and 0.62–0.70 windows while their images drift in opposite directions. When a layer crosses 80% opacity its editorial panel fires a GSAP tween that counts the asking price up from zero, formatted live as USD.

See it live

The demo is public: https://fpsjago.github.io/vale/. 11 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.