Slow Press: when type does the heavy lifting

Slow Press is a speculative UK specialty coffee brand. Concept work. The brief was the simplest of any of our five featured concepts: a single page selling three single-origin coffees. No menu, no shop tour, no subscription mechanics. The interesting choice was what to lead with on first paint.

We led with the wordmark. Oversized, kinetic, filling the viewport before the product photography arrives. The argument the page makes is that the brand is the thing being sold — the coffee is the proof of it. This is what made that work.

The wordmark as hero

On first paint, SLOW PRESS fills the viewport as a single line of uppercase display type. The S of SLOW touches the left edge; the S of PRESS touches the right. The type sets at about 22vw which is larger than most sites would dare to go — it's closer to a brand banner than a website headline.

The kinetic part: as you scroll, the wordmark scales down and translates upward, scrubbed to scroll position via GSAP ScrollTrigger. By the time you've scrolled 80vh, the wordmark has shrunk to about a third of its original size and parked itself as a small fixed mark in the top-left corner. The scrub is linear, no easing — easing on a scrub feels like the page is fighting your scroll.

As the wordmark recedes, the product photography arrives — three coffee bags drop into the cleared viewport from above on staggered delays (60ms apart). The whole choreography is one continuous reveal that treats the wordmark and the products as a single composition rather than two separate hero sections.

The pinned bag drop

The three coffees — Ethiopia, Colombia, Sumatra — are presented as chromakeyed transparent PNGs floating on a cream UI background. Each bag has its origin, varietal, tasting notes, and price. The section is pinned for one viewport of scroll: bags drop in, hold for a beat, then unpin and the page continues.

The pin matters because it forces a single moment of full attention on the products. Without the pin, the bags would scroll up and out of view as the user kept scrolling — robbing the product photography of the time it needs to land. Pinning for one viewport gives that beat. Long pins feel like scroll-jacking; one-viewport pins feel like a held shot.

Chromakey PNGs vs WebGL

We considered building the bags as small 3D models that could rotate slightly on hover. We decided against. Three reasons:

• Weight — three GLB files plus the WebGL runtime would push the page into 1.5MB+ territory. The whole site is currently under 400KB.
• Photographic quality — well-lit photography of a real coffee bag looks better than a procedurally-lit 3D render in most browsers. Real photography has grain, real shadow falloff, real colour. 3D renders look like 3D renders.
• Authentic product — a coffee brand selling on the authenticity of its origin is undercut by a digital rendering of its packaging. The bag should look real.

So: chromakey PNGs with a clean alpha edge (15% feather, 1.2 blur, trim to bounding box). Same recipe we use on every product site. Light enough to ship at q=82 JPEG fallback or transparent PNG.

Typography first, photography second

The design language of the site is: type leads, photography supports. That ordering is unusual for an e-commerce site (photography usually leads everywhere) and it's the right call for specialty coffee. The category is sold on words: tasting notes, origin stories, processing methods. Coffee photography is largely indistinguishable across brands (a bag, a cup, a brew vessel). The differentiator is how you write about the cup.

So the type carries the brand identity (a single display face, set large, set tight) and the photography arrives in a supporting role (small, restrained, never full-bleed except on the bag-drop section). We even kept the cart sidebar pure-type, no thumbnails. It reads like a receipt, which is the right register for coffee being sold by people who care.

Cart, checkout, the boring stuff

The cart slide-in from the right is one of the more conventional parts of the site, by design. Once a visitor is buying, the design should get out of the way. The slide animation is 280ms, no easing, no bounce. Items list in a clean column. Subtotal, shipping, total. One Checkout button. The whole cart is two screens tall on phones.

Free-shipping bar wired to subtotal, dispatch countdown wired to time, standard Stripe checkout route. None of this is interesting design work — it's essential plumbing. Concepts often skip the boring plumbing and look cool but unbuyable. Slow Press is fully buyable on paper (the checkout route is real Stripe test mode, the bag inventory is real Stripe products). If a real client wanted to ship it, they could swap their keys and go live the same day.

What we'd change for a real client

• The 22vw wordmark on small screens— looks great on desktop, swallows the viewport unhelpfully on iPhone SE. For a real client we'd cap the wordmark at 14vw below 480px and shorten the scrub distance to compensate.
• Subscription— Slow Press is one-time-purchase only. Real specialty coffee revenue comes from subscriptions. We'd add a one-click "every 2 weeks" toggle on each bag.
• More products — three is the right concept quantity. Real shops would have eight to fifteen bags rotating. The grid would need a real category system and the bag-drop hero would need to become a featured-bag rotator.

The bigger lesson

Slow Press taught us that when a brand has nothing to hide behind (no heritage story like Yamabe, no atmospheric mood like The Roper, no architectural rigour like Hartwell) — the design should commit completely to the one thing it's actually selling: identity. For a young coffee brand, identity is the typeface, the wordmark, the register of the writing. Let those carry everything; let the photography and the UI defer.

This is the right play for any new brand without a heritage story — coffee, sneakers, candles, branded apparel, anything where you're launching a name and asking the visitor to learn it. Type loud. Photo quiet. The customer will remember the type long after they forget the bag.