Blue Bottle Coffee, slowed down.

The question

Blue Bottle’s story is patience: a cup poured by hand, one at a time. Most coffee sites tell you that. We asked how a page could let you feel it.

The idea

Scroll to brew. Halfway down, the page turns navy and becomes a pour over. A timer runs, a scale fills to 350 g, the footage pours, and each step of their cafe recipe lights up as the water goes in. The page moves at the pace of the brew.

Craft details

The brew, timed to your scroll

Timer, scale and footage all follow one number: how far you’ve scrolled. Bloom at 0:00, then pours at 0:40, 1:10 and 1:40.

A sentence with moving pictures in it

Sourced, roasted, brewed, served: each verb carries a small looping clip inside the line of text.

Coffee you can taste on screen

Each card leads with its tasting notes, set large, in a colour drawn from them.

The opposite of our drone study, on purpose

Light, slow and warm, with one navy moment. Same studio, a different mood for a different brand.

On a phone

The arch photo leads, the brew keeps its timer over the pour, and only the current step shows.

Every fact, checked

The recipe (20–27 g of coffee, 350 g of water at 195–205ºF, pours at 0:40, 1:10 and 1:40), the cart at the Old Oakland Farmers Market, the 70 dripper prototypes, the coffees, their tasting notes and prices all come from bluebottlecoffee.com, read in November 2026. The footage is licensed stock, and the page says so.

What it means for your product

If your product comes with a process, like a recipe, a fitting or a setup, your page can let people try it instead of reading about it. We find that one moment and build the page around it. Websites →

Next piece: the Yuno website →

Blue Bottle Coffee is a trademark of its owner, and Kinto of its owner. They’re used here only to name the brand in an unofficial study.