BelArosa Chalet Luxury Hospitality Site

Overview

This high-end luxury hospitality website uses a sophisticated dark-themed aesthetic to provide an immersive digital experience for premium lodging. It serves as an excellent reference for builders looking to implement GSAP-driven scroll animations, horizontal slider components, and a custom-curated interactive UI.

Design System

• Color Palette & Visual Hierarchy: The site uses a "Petrol" and "Beige" theme. Deep slate/charcoal backgrounds create a sense of exclusivity, while gold and off-white typography provide high-contrast readability. A unique "variable color switch" script suggests a theme-switching system based on page sections.
• Typography: The system balances a classic serif for large expressive headings (e.g., "Nestled in nature") with a clean, spaced-out sans-serif (Grotesk) for toplines and secondary headers. Small caps are used for navigation and labels to maintain a formal, structured feel.
• Page Structure: The layout follows a modular storytelling flow: a full-screen video hero, followed by a vertical sticky anchor navigation on the left, alternating media/text blocks (Teaser Moduls), and specialized slider sections for "Chalets" and "Gallery."
• Reusable Components:
  • Interactive Buttons: Dots that expand or shift on hover to reveal text within a consistent circular frame.
  • Sticky Anchor Nav: A minimalist vertical sidebar that tracks scroll progress and allows quick jumps between sections.
  • Custom Cursor: A subtle dot-based cursor wrapper that enhances the premium feel.
  • Master Nav Slider: A horizontal Swiper.js-powered card navigation at the footer for deep-linking.
• Motion Patterns: The site relies heavily on GSAP for text staggers (characters/words sliding up into view), image parallax triggers that shift media within frames, and smooth page transitions using a colored overlay (Petrol/Beige) during navigation.
• Clues from HTML: The site is built with a utility-first mindset featuring a main-wrapper and section-wrapper architecture. It integrates Swiper.js for horizontal movement and includes specific embed blocks for GSAP-based logic like gsap-text-stagger and gsap-stagger-master-nav.

Use Cases

• Who should clone this: Developers creating high-ticket service sites, boutique hotels, luxury real estate portfolios, or high-end architectural firms.
• Effective Remixes: This pattern works well for any "experience-first" product where high-resolution photography and video take center stage over dense text.
• Remix Directions: Swap the dark "Petrol" theme for a "High-Key" white/light-grey palette for a modern spa or fashion brand. The interactive horizontal footer can be adapted into a product category nav for e-commerce.
• Recommended Scope: The hero-main_section and teaser-modul blocks are perfect for quick section clones. The full-page transition logic and sticky anchor navigation are better suited for a full-project clone to maintain the intended user flow.