Yamabe: telling a whisky brand as a magazine

Yamabe — 山辺 — is a speculative single-malt whisky house we built as a concept piece. The brand brief was deliberately the opposite of every spirits site we'd ever opened: no glossy bottle on black, no scroll-jacked tasting flight, no "watch the founders pour" video block. Instead, treat the whole site like a quarterly magazine that happens to also sell one bottle. Editorial first. Product second.

This is what changed when we made that one decision.

Stage-curtain loader, not a spinner

The site opens with a vertical bone-white curtain that drops from the top of the viewport over about 1.2 seconds. As it falls, a typeset wordmark settles into place above the fold. Then the curtain lifts and reveals the hero. The whole sequence reads less like "loading" and more like taking your seat in a small theatre.

We've used the same pattern on later builds (AXIRYA, The Roper, others) and the lesson keeps repeating: loaders are an opportunity, not a tax. A loader that does brand work earns its 1-2 seconds of cover. A loader that exists to mask hydration jank wastes them. The Yamabe curtain announces the tone before a single product detail is visible.

Layered parallax depth on the hero

The hero stacks five layers, each scrolling at a different rate: a photographic mountain plate at the back, a soft mist gradient one layer forward, the wordmark Aged in the still of the mountain in tight italic, a foreground tree silhouette, and a near-camera grain overlay. Each one moves at a different speed on scroll so the camera appears to be physically present in the scene rather than panning across a flat photo.

The mountain plate moves at 0.30 of scroll speed (it barely shifts), the mist gradient at 0.55, the wordmark at 0.85, the foreground tree at 1.15, and the grain at 1.35. The numerical detail isn't the point — what matters is that picking those numbers by feel, against the actual content, is most of the work. We tried four different speed sets before the depth felt right at every scroll position.

The cooperage horizontal scroll

The middle of the page is a pinned horizontal scroll telling the cask life cycle: oak felling, stave drying, coopering, charring, filling, warehousing, decanting. Seven stages, one big camera-pan. Vertical scroll input gets translated into horizontal motion via GSAP ScrollTrigger; each stage gets a single editorial paragraph and a full-bleed photograph.

Horizontal scroll sections are easy to make and brutally easy to make badly. The three rules we landed on for this one:

• Total horizontal travel must equal the user's vertical input, with no acceleration trickery. If you scroll fast, the stages move fast. Anything else feels like you've lost control of the page.
• One full-viewport-width "stage" per slide, never two-and-a-half. Half-visible content is the most reliable way to make a horizontal scroll feel cheap.
• Always exit cleanly. The pin must release at the exact moment the last stage finishes. We had a 70px overshoot bug for two days before we caught it on a 1080p Windows machine.

Four eras crossfading behind one bottle

Further down, the Time section is a pinned section where the bottle itself stays perfectly static at the centre of the viewport, while the background behind it crossfades through four eras: 1923 (the original still), 1971 (post-war revival), 1998 (a fire in the warehouse), 2024 (the modern release). Captions cycle with the imagery in a small editorial column at the bottom.

The reason the bottle stays still is the point. The era is what changes around the brand, not the brand itself. That is the whole positioning argument the page is making. A worse version of this would have rotated a 3D bottle through different label generations — flashy, but it would have argued the opposite (we keep changing). Holding the bottle still and animating the world around it is the design telling the brand story, not just illustrating it.

Type, palette, restraint

Typography is one display serif (italic, very tight kerning, tracking set at -0.025em on the hero and tighter still on pull quotes) and one body sans. No third face. Display weight is 900; body weight is 400. The italic across the entire display setting is unusual for spirits branding — most go upright bold — and that's exactly why it lands.

Palette is three colours: #F4EFE6 bone, #1A1614ink, and #8B5A2B a single warm tobacco accent used only on underlines and the buy CTA. Backgrounds are photographic — mountain scenes, cooperage interiors, oak grain — never flat fills. Flat fills would have flattened the brand.

What we'd change for a shipping brand

Yamabe is a showpiece, and a couple of choices are deliberately heavier than we'd ship for a real client:

• The horizontal scroll on mobile— we kept it on phones, scrubbed by vertical input. For a real client we'd swap to a simple vertical stack of stages below 768px. Pinned horizontal scrolls don't survive small viewports gracefully and the data backs it up (engagement drops measurably).
• The era crossfade timing — we hold each era for 1.5s. For a brand selling a £140 bottle to a 50-year-old whisky drinker, 2.5s per era would feel more dignified and let the captions settle. Showpiece pace is faster than client pace.
• Buy CTA prominence— Yamabe has one Buy button below the fold. A real client would want that button pinned in the nav after the hero scrolls past. We'd add it.

The bigger lesson

Yamabe taught us that the magazine-as-product-site approach works when the brand has something to saybeyond "here is the product, here is the price". Whisky has decades of provenance to draw from; that is content. A new SaaS or DTC brand with no heritage can't do this — the magazine-page format would expose the lack of story. Picking this structure starts with the question: does the brand have a story long enough to fill the spread?If yes, the magazine format will sell harder than any conventional template can. If no, don't fake it.