MORI
A contemplative multi-page platform for MORI ryokan — three rooms, one chef, an ancient volcanic spring, and a digital presence that breathes at the same pace as a forest in Hakone.
MORI is a three-room ryokan hidden in the forested hills of Hakone, Japan. A volcanic hot spring, a single kaiseki chef, and 80-year-old hinoki cedar framing every room. They needed a website that communicated the same unhurried intentionality as the property itself — not a booking engine, but a digital threshold that made visitors slow down before they even arrived.
The
Challenge
Marketing a three-room ryokan is the opposite of marketing a hotel chain. The platform needed to translate tactile, sensory experiences — the warmth of a 42°C spring, the smell of hinoki, the silence of snow on basalt — into pixels. Three constraints defined the project:
The property's value is atmospheric, not amenity-based — there are no infinity pools, no spas, no room service. The site must convey exclusivity through restraint, not feature lists
Bilingual content (English and Japanese) with culturally appropriate tone — formal yet intimate for Japanese guests, evocative yet informative for international travelers
Seasonal rotation is core to the experience — the menu, the garden, the onsen rituals all change — requiring a living site that reflects the current moment, not a static brochure
The
Solution
We built a multi-page Next.js 16 application structured around the property's five pillars: rooms, dining, experience, philosophy, and gallery. The design language draws from Japanese editorial typography and wabi-sabi principles — warm neutrals, generous whitespace, and slow-reveal animations that reward patience.
A near-black #0C0A09 canvas with a warm gold #C4976A accent evoking aged hinoki and lantern glow. Display serif typography for headings, light-weight sans-serif for body. Full-bleed photography with gradient overlays creates depth without competing with the imagery. Every transition is slow, deliberate — 700ms minimum.
Next.js 16 with React 19, Tailwind CSS v4, and Framer Motion for viewport-triggered reveals. Six dedicated pages — rooms, dining, experience, philosophy, gallery, contact — each a self-contained editorial spread. A bilingual context provider switches between English and Japanese without page reload. Deployed to Cloudflare Pages for global edge performance.
Inside
the Build
Three words, staggered with Framer Motion reveals, over a full-viewport photograph of the ryokan at twilight. No navigation overlay, no booking widget — just warm lantern glow through shoji screens and a single gold accent line. The hero sets the pace for the entire experience: slow, deliberate, atmospheric.
Six metrics distilled into a horizontal stat bar — 3 rooms, 42°C volcanic spring, 4km sourcing radius, one chef, 森 (Mori), 2+ nights minimum. Each stat carries a subtle sub-label. The bar serves as a transition between the cinematic hero and the editorial gallery below.
An asymmetric editorial grid showcasing three pillars of the MORI experience — the Hinoki Onsen, Kaiseki Dining, and the Cedar Suite. Each card uses full-bleed photography with dark gradient overlays and hover-to-reveal CTAs. A pull quote from the founding architect anchors the composition.
A split-panel module pairing a snow-covered rotenburo photograph with the current season's offerings — yuzu-infused baths, mountain mushroom kaiseki, and ice-edged moss gardens. The content rotates with the calendar, ensuring the site always reflects the present moment at the property.
The
Results
A platform built with the same precision as an 80-year hinoki beam. Every metric reflects the care MORI applies to every detail of the guest experience.
Final
Reflection
MORI was designed on a single principle: the website should breathe at the same pace as the property. We stripped away every convention of hospitality web design — no hero carousels, no star ratings, no availability calendars above the fold. Instead, we built an editorial experience that rewards the same patience the ryokan demands of its guests. Three words on the hero. One chef. One spring. The restraint is the luxury. Next.js 16 with React 19 delivers sub-300ms page loads while Framer Motion's viewport-triggered reveals create a sense of discovery that mirrors walking through the property itself. Five weeks, zero compromise on atmosphere.
Want a site like this?
We build premium websites for businesses that refuse to blend in. Let us know about your project and we will get back to you within 24 hours.