The Roper: a barbershop with a razor in its hero

The Roper is a speculative East London barbershop on Pollard Row. Concept work. We've built more than half a dozen barbershop sites for real clients (Mr Klass, Mix N Grill adjacent, Island, Top Chop, Maryland) and at some point during that run we decided to design the version we'd build if the brief were exactly to our taste — no compromise for printer-friendly menus or wholesale loyalty card integration. Just atmosphere.

The Roper is that brief. This is what landed and why we keep going back to look at it.

The sideways loader

Most loaders we've built drop from the top. The Roper's slides in from the right and hands off to the left as the page reveals — a single bone-coloured panel moving horizontally for about one second. The handoff is the moment the loader hits its leftmost extent and the hero appears in the gap behind it.

The horizontal direction matters. A vertical drop feels formal, almost theatrical (which is right for Yamabe). A horizontal slide feels more like turning a page, more like walking into a room. That's the register a barbershop wants — informal, low-ceremony, friendly. Same loader pattern, opposite tone, just by rotating the axis.

A straight razor in front of an oversized wordmark

The hero is a single composition: a photographic straight razor floats mid-air in front of an oversized THE ROPER wordmark set tight against the right edge. The razor is lit warm; the wordmark is set in a heavy condensed display face in deep cream against an almost-black ground. The razor has subtle vertical drift on a long loop.

The reason this works: the razor and the wordmark are competing for centre stage, but the razor is closer to camera and the wordmark is tight against the right edge, so the eye reads razor first, wordmark second. The text isn't backing up the image — the image is interrupting the text. That tension is what makes the hero hold attention longer than a straightforward product hero would.

Depth on the hero comes from a mix-blend-lighten layer carrying drifting embers and a warm haze. The embers are CSS-only (about 14 small radial gradients with staggered animation delays). The haze is a single large radial gradient with a slow opacity pulse. Together they push the razor forward visually without anyone noticing they're there.

The pinned five-cut showcase

The middle of the page pins for a horizontal scroll through five signature cuts. Each cut sits at 78vh — deliberately not full-height — so the next cut peeks in from the right edge and the previous one is still partly visible on the left. That overlap is the whole trick: it makes the section feel like flicking through a portfolio, not navigating a slideshow.

Each cut has one photograph, one name ("The Pollard", "The Tradesman", etc.), one duration in minutes, and one price. That's it. No before-and-after. No styling notes. Barbershops that show too much in their cut portfolio look like surgeons; the right amount of information looks like an artist.

The live OPEN NOW indicator

On the Visit panel near the bottom, there's a small pulsing dot beside the text "OPEN NOW" — but only if the shop is actually open. The component reads the current time client-side, checks the opening hours (kept in one data file), and renders one of three states: OPEN NOW (green pulse), OPENS IN 2H (amber), or CLOSED (grey).

This is the kind of detail every shop website should have and almost none do. Open-hour status is the question the visitor is actually trying to answer at the moment they land. Putting it in the visitor's eye-line as a live signal — not a static "Tuesday: 9-6" row in a table — moves the booking conversation forward by removing one question. It cost us four hours of build time and we'd ship it on every shop site if we could.

Cursor, type, palette

The cursor is a small bone-coloured ring that follows the mouse with a tight easing. On any interactive element it expands and fills with the same amber accent used on hovers throughout the site. The fill happens quickly (180ms) so it reads as a tap, not a smear.

Typography is one heavy condensed display face for headlines (very tight tracking, set bold throughout — there's no light weight on the site) and one body sans at 16px / 1.6 line-height. Numerals on prices are tabular so the columns align in the cut list. Small but feels professional.

Palette is three colours: a deep ink near-black #0F0D0C, a warm bone #EDE5D8, and a single amber accent#C97F3A. Everything else is photography — the razor, the cuts, the shop interior. The amber accent is used sparingly, almost exclusively on the OPEN NOW dot and the booking CTA.

What we'd change for a real shop

• The horizontal scroll on small screens — same lesson as Yamabe, same fix. Vertical stack below 768px.
• The booking flow— The Roper's booking is a single "Book" button that opens an external scheduler. A real barbershop would want the scheduler embedded inline (better conversion, fewer drop-offs at the handoff). We'd swap to an iframed widget like Koalendar or Square.
• Pricing transparency— we show cut prices openly, which most barbershops actually appreciate (it filters out time-wasters) but a few resist on the principle that "price isn't the conversation". For a real shop, we'd ask whether to show or hide and respect the answer. The concept just defaults to transparent.

The bigger lesson

The Roper taught us that the difference between a generic local-business template and a site that reads as a real place is mostly atmosphere per square inch. The embers, the warm haze, the lighten-blend depth, the bone-coloured cursor, the live OPEN NOW dot — none of these features change what the site does. They change what itfeels like to use it. For local hospitality and grooming businesses, that feeling is the conversion. Customers walk through a door because the door looks inviting from the street. Same logic online.