Website Design & Development
Horizon Estates
Live beyond ordinary.
Overview
Horizon Estates is an interaction-design exercise built around a luxury real-estate brand. It isn't a booking platform — it's a deliberate push on what scroll-driven motion can communicate: exclusivity, pacing, and craft, without leaning on the generic real-estate template of a map and a card grid.
Challenge
Luxury real-estate sites tend to rely on photography alone to carry the brand. The challenge here was to make the interaction itself — not just the imagery — feel considered enough to belong next to the properties it's showing.
Approach
A multi-layer parallax system moves the photo, a glow layer, foreground framing, and text at independently tuned depths in response to both scroll and cursor position. A title card lifts like a curtain on entry, a chaptered progress indicator tracks position through the page, and a magnetic cursor adds weight to key interactions — all gated behind a reduced-motion check so the experience degrades gracefully.
Design
A near-black palette with a champagne/gold accent, a serif display face (Cormorant Garamond) paired with a geometric sans (Manrope), and full-bleed photography throughout.
Development
Built with React 19 and Vite, styled with Tailwind CSS v4, and driven by Framer Motion — motion values and springs for the parallax and cursor, and scroll-linked transforms for the section-progress indicator. Media-query hooks detect touch/reduced-motion contexts and scale the immersive effects back accordingly.
Responsive Experience
Immersive cursor and parallax effects are explicitly gated behind a media-query check, so touch devices and reduced-motion preferences get a calmer, still-complete version of the same layout rather than a degraded one.
Final Result
Deployed and live at horizon-estates-tau.vercel.app as a motion-design case study demonstrating scroll-linked animation, layered parallax, and accessibility-aware motion — a portfolio piece, not a real estate business.
Key Features
- Multi-layer scroll- and cursor-driven parallax hero
- Curtain-lift intro sequence
- Chaptered scroll-progress indicator
- Estate, interior, and lifestyle showcase sections
- Reduced-motion and touch-aware fallbacks
Technology Stack
Want something like this?
Let's talk about what you're building.