An Editorial Hair Studio Website
The live hero of the real site, running inside this page. Hit "Refresh" to replay the intro animation. The rest of the site is shown below.
Mori is a men's hair studio and barbershop, positioned as an editorial, high-art take on grooming. I designed and built the website end to end, from the branding-led wordmark and hero motion down to a working booking flow.
The site covers:
One long page that moves from the hero through the story, menu and gallery to a live booking form.
The same flow, rebuilt for a phone.
A deep rose on cream and near-black, one friendly sans and one expressive ease-out.
ease
expressive ease-out, used for the intro and reveals
The tools I picked, and why each one fits a single-page brand site.
HTML & CSSMori is one long brand page with a booking form, so plain HTML and CSS were enough. No framework to load, and it is simple to host and edit.
Tailwind CSSThe editorial layout and its breakpoints came together quickly straight from the Figma design, with spacing and type kept consistent.
JavaScriptPowers the live queue, availability check and booking form. It is a front-end prototype in plain JavaScript, with no backend and nothing to install.
GSAP + ScrollTriggerThe pinned hero, where the carousel card grows as you scroll, needs motion tied exactly to scroll position. CSS alone cannot do that cleanly.
FigmaThe wordmark, colours and layout were designed here first, so the build follows a decided system instead of being improvised in code.
