Project Scope

This project involves creating Ma Retreat, an immersive digital experience for a private Japanese onsen retreat. The website features scroll-driven parallax galleries, interactive bathing space filters, and a custom reservation system with dynamic guest-based availability, ensuring a contemplative and visually rich browsing experience. The project focused on blending atmospheric dark UI design with complex GSAP animations, redefining how guests discover and reserve traditional Japanese bathing rituals. Using Webflow, the platform was built to bridge the gap between centuries-old wellness traditions and modern web craftsmanship.

---

Brief Description

Ma Retreat is a luxury wellness website designed for an exclusive Japanese onsen retreat nestled in the mountains. The site guides visitors through a curated journey — from the philosophy of Japanese bathing culture to the individual spaces, each with its own centuries-old tradition. The homepage features a layered scroll experience with pinned parallax sections, horizontal gallery navigation, stacking card reveals, and a before/after craft comparison slider, all driven by GSAP and ScrollTrigger.

The reservation page introduces a two-column split layout — a dark, form-forward left column with pill-based radio selectors for room type, guest count, and date selection, paired with a continuously auto-scrolling image gallery on the right. A dynamic filtering system lets users narrow bathing spaces by setting (indoor, outdoor, cave), experience (soak, waterfall, steam, cold plunge), and temperature, with incompatible options gracefully fading out via GSAP animations based on guest capacity constraints.

The design follows a strict three-tier token system (primitives, semantic aliases, component tokens) and Client-First naming conventions throughout. Typography pairs Cormorant Garamond for headings with Noto Serif JP for body text, set against a dark atmospheric palette of near-black, sand, stone, and driftwood tones. Every animation respects `prefers-reduced-motion`, and the entire site is responsive across all breakpoints using `gsap.matchMedia()` for per-device animation configs.

---

Tech Stack

- Webflow: Design, CMS, hosting

- GSAP + ScrollTrigger: Scroll-driven animations, parallax, pinning

- Client-First: Class naming convention (Finsweet)

- CSS Custom Properties: Three-tier design token system

- HTML/CSS: Custom form inputs, pill selectors, `:checked` states

---

Key Features

Homepage

• ‍Hero entrance animation: staggered fade-in with blur-to-sharp heading reveal‍
• Philosophy slider: scroll-scrubbed background crossfades with card panel switching‍
• Horizontal scroll gallery: pinned section with snap-to-slide navigation‍
• Before/after compare slider: pointer-driven with keyboard accessibility‍
• Stacking card reveals: onsen panels stack on scroll with text switching‍
• Dining parallax: opposing column movement (left up, right down) with pinned section‍
• Section covers: layered parallax transitions with snap thresholds between every section

Reservation Page

• ‍Two-column split layout: dark form on left, auto-scrolling image gallery on right‍
• Pill-based selectors: hidden radio/checkbox inputs with styled labels‍
• Dynamic space filtering: Setting, Experience, Temperature filters disable incompatible bathing spaces‍
• Guest capacity logic: solo-only spaces fade out when 2+ guests selected‍
• Date capsule: grouped check-in/check-out in a rounded container‍
• Luxury form validation: GSAP oscillation + warm copper glow on invalid inputs, gold shimmer on correction‍
• Infinite scroll gallery: two opposing strips (bottom-to-top, top-to-bottom) with duplicated images for seamless loop

---

Design System

Palette

• near-black: `#0d0d0b`
• sand: `#e1d7be`
• stone: `#b4a578`
• driftwood: `#9b8c70`
• ivory: `#c8b99b`
• deep-indigo: `#1c232a`
• void: `#0f1216`

Typography

• Headings: Cormorant Garamond (300, 400)
• Body: Noto Serif JP (300)

Spacing

11-step spacer scale from `0.125rem` (tiny) to `12rem` (xxhuge), mapped through semantic aliases (`margin/*`, `padding/*`, `gap/*`).

---

Performance

• Images served in AVIF format with responsive `srcset`
• Hero image set to eager loading with `fetchpriority="high"`
• `font-display: swap` for non-blocking font rendering
• Animations use only transform + opacity (GPU-composited)
• `prefers-reduced-motion` respected via `gsap.matchMedia()`
• `invalidateOnRefresh: true` on viewport-dependent animations

---

Meta

• ‍Live URL: https://ma-retreat.webflow.io‍
• Platform: Webflow‍
• Animations: GSAP 3.14.2 + ScrollTrigger‍
• Conventions: Client-First (Finsweet)‍
• Responsive: Desktop, Tablet, Mobile