Self-directed concept build for an invented business. This project was not commissioned, and the company described here does not exist.
MORI
A multi-page site for MORI, a Hakone ryokan with three rooms, one chef and a volcanic hot spring, designed to feel as slow and quiet as the forest around it.
MORI is a three-room ryokan in the forested hills of Hakone, with a volcanic hot spring, a single kaiseki chef and 80-year-old hinoki cedar framing every room. The website had to feel as unhurried as the property. Instead of leading with a booking engine, it asks visitors to slow down before they arrive.
The
Challenge
Marketing a three-room ryokan has little in common with marketing a hotel chain. The site had to put sensory things into pixels: the warmth of a 42°C spring, the smell of hinoki, snow settling on basalt. Three constraints shaped the project:
The property has no infinity pool, spa or room service, so its value lies in the atmosphere. The site had to feel exclusive through restraint instead of a list of features.
Write the English and Japanese content in a tone suited to each audience, formal but warm for Japanese guests and more descriptive for international travelers.
The menu, the garden and the onsen rituals all change with the seasons, so the site had to be easy to update for whichever season it is.
The
Constraints
What the build was answering, and where we stopped on purpose.
- THE BRIEF
- Self-directed, for an invented three-room ryokan. We ruled out stock hospitality language and amenity carousels, and put nothing on the page that the property couldn't actually deliver.
- SCOPE
- Six routes, statically exported, with English and Japanese handled by a hand-rolled React context. The site is small enough that a locale router would have added more machinery than content.
- NOT CONNECTED
- The availability check confirms in the browser and stores nothing. A three-room property takes bookings through conversation, so a real calendar would need to sync with the one the okami already keeps. A fake one would have looked impressive for the wrong reasons.
The
Solution
We built a multi-page Next.js 16 application around five parts of a stay: rooms, dining, experience, philosophy and gallery. The design borrows from Japanese editorial typography and wabi-sabi, with warm neutrals, plenty of whitespace and animations that reveal content slowly.
A near-black background (#0C0A09) with a warm gold accent (#C4976A) that recalls aged hinoki and lantern light. Headings use a display serif and body text a light sans-serif. Full-bleed photographs sit under gradient overlays for depth, and every transition takes at least 700ms.
Next.js 16 with React 19, Tailwind CSS v4 and Framer Motion, which reveals each section as it enters the viewport. Six pages (rooms, dining, experience, philosophy, gallery and contact) each work as a self-contained editorial spread. A bilingual context provider switches between English and Japanese without a page reload, and the site is deployed to Cloudflare Pages.
Inside
the Build
The first screen has three words and a photograph and no booking widget. Its only job is to set a slow pace, because a property that sells stillness shouldn't open with a form.
A row of stats replaces the usual paragraph of amenities: three rooms, a 42°C spring, a 4km sourcing radius, one chef and a two-night minimum. Each one is a limit the ryokan chose, so the row also explains how the place runs.
The gallery is an asymmetric grid, not a carousel. The onsen, the kaiseki and the cedar suite take up different amounts of space because they aren't equally the reason people come. Nothing advances on its own, so guests look at their own speed.
Only one season appears at a time. Showing the whole year would have been easier to build and harder to read, since a guest deciding in February wants to see February. The section is written to be replaced when the season changes.
The
Results
The site is a static export, with images served as WebP through next/image and a hand-rolled i18n context in place of a routing library. Most of the weight is the gallery. Full-bleed photographs of cedar and still water are what the property sells, so the page was always going to be heavy, and that shows most on mobile.
Measured against the live build with Lighthouse 13.0.3, median of three runs per preset.
Final
Reflection
We designed MORI so the website would move at the same pace as the property. That meant dropping the usual hospitality conventions (hero carousels, star ratings, availability calendars above the fold) and building something closer to an editorial spread, one that asks for the patience the ryokan asks of its guests. The hero has three words, the property has one chef and one spring, and Framer Motion reveals each section as you reach it, a little like walking through the building. The cost is weight. The photography that makes the site feel like MORI also makes it slow on a phone, and that is what we would fix first.
Want a site like this?
We design and build websites for small businesses in English and Japanese. Tell us about your project and we'll reply within 24 hours.