Artisanal coffee roastery · bean to cup in five chapters
TERRAL

Problem
Specialty coffee sites show static bags and cups. Nothing explains the path the bean travels or why an artisanal roast costs more.
Solution
An editorial journey driven by scroll: Caparaó, the sun-drying yard, the drum's fire, the grind and the cup, each chapter pairing real video and photography with giant typography. The funnel closes on a blend showcase with tasting notes and WhatsApp ordering. And there's a secret: hold the right button for six seconds and you find the roaster's house.
How it was built
The site tells coffee's path in five scroll-driven chapters: Caparaó, the drying yard, the drum, the grind and the cup. Each chapter splits the screen between living imagery (real footage of farm, drying and roasting) and giant editorial typography, with beans floating in parallax to stitch the transitions. The titles are characters: XÍCARA arrives in stacked layers, VERTENTE opens the blend showcase.
Past the journey the site becomes a real shop: three blends with origin, altitude, SCA score and tasting profile, each with direct WhatsApp ordering. The footer closes with newspaper hierarchy, an edge-to-edge TERRAL letterpress and a marquee of the house words: silence, time, patience, origin, altitude, fire.
And there's the hidden reward: a discreet button asks the visitor to HOLD for six seconds, promising nothing. Whoever waits earns the roaster's house, a page with living footage of the drum, a text about patience and a code that doubles the coffee in the first bag. It's the site's whole thesis in one gesture: coffee is about waiting the right amount of time.
Chapters on scroll
Caparaó, drying yard, drum, grind and cup: half a screen of story, half of real video and photo.
Typography as scene
Giant titles do an image's job: they layer in, anchor chapters and open the showcase.
The house secret
Holding a button for six seconds reveals the roaster's house and a double-coffee code.
More screens
Stack
- Next.js
- TypeScript
- GSAP
- Lenis
- Tailwind


