MilWebWhatsApp
Back to projects

Artisanal coffee roastery · bean to cup in five chapters

TERRAL

5 chapters · real video and photographyPersonal project · live
Screenshot do projeto 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

Drying-yard chapter: the sun does half the work, with drying beds and a paddle turning the beansBlend showcase: VERTENTE in giant type with the bag, fire and tasting notesThe roaster's house: the reward page for holding the button six seconds

Stack

  • Next.js
  • TypeScript
  • GSAP
  • Lenis
  • Tailwind

Ready to turn your idea into a digital product?

Tell me what you need. I reply fast and send a free quote, no strings attached.

  • Service contract
  • Post-launch support
  • You own the code
  • Free quote