Sponsors used to get a PDF. Now they get a link.

Before

A 21-page PDF did the selling.

The dossier had everything: the team, the event and four sponsorship plans. But it read like a slideshow and never carried the energy of a coffee championship by the sea.

The original dossier: 21 slides, 1440 × 810.

Timeline

The idea came late. The bar stayed high.

The website was decided days before the championship. From the first commit to launch it took one week, and it went live eleven days before the event.

days from first commit to launch

7

days live before the championship

11

people: one developer, one designer

2

Audiences

One page, four readers.

Each audience arrives looking for something different. The page answers all four in the same scroll, and every one of them ends in a conversation.

The page

Thirteen sections, one scroll.

The coast and the AeroPress, the four chapters, the island, the team, merch, sponsors, plans and FAQ. On mobile, each section keeps its place in the story.

Jump to a section of the page

1. 01Hero
2. 02The four chapters
3. 03The team
4. 04Merch
5. 05Sponsors

3D

An AeroPress modeled in code.

We didn’t download a model: we built it in Three.js. That put the RED logo and its 1–4 marks on the chamber and gave us control of every part, for the scroll and for the coffee game.

1. 01

   Plunger

   Hollow tube, palm grip and silicone piston with its sealing lip.

2. 03

   Paper microfilter

   A separate disc, so it can drop into place on its own.

1. 02

   Chamber

   Brewing chamber with the RED Coffee Club logo and the 1–4 marks.

2. 04

   Filter cap

   56 grip ridges and 37 open holes, modeled one by one.

parts that move on their own

4

canvas shared by the journey and the brew table

1

exported from the code for other uses

GLB

Storytelling

Four chapters, one origin story.

The AeroPress comes apart as you scroll, across four chapters, on a single 3D canvas. Each chapter takes the full screen and is told with a single line.

Interactive

Brew your own coffee, in the browser.

A six-step game built on the same 3D AeroPress: set it up, add the coffee, pour, stir, press, serve. It is the part people screenshot and share.

1. 01Set up the table
2. 02Assemble the AeroPress
3. 03Pour the water
4. 04Let it bloom
5. 05Press slowly
6. 06Serve

First screen

Everything that matters, before the first scroll.

Name, date, place and one way in. The AeroPress turns as you move, and a handwritten line gives it the voice of the club.

1234

1. 01

   Name and edition

   Set in the serif of the brand, nothing else competes with it.

2. 02

   Date and venue

   22 September, Rancho Victorio. Answered in the first second.

3. 03

   3D AeroPress

   Modeled in code with the RED logo. Follows the cursor.

4. 04

   One call to action

   «Be part of it» opens the plans. One button, one decision.

Conversion

From a link to a conversation, in four taps.

The club sends one link. A brand reads the story, picks a plan and lands in WhatsApp with the message already written.

Motion

Small loops that make it feel alive.

Two details people play with: coffee beans that fall and pile up with real physics, and a pour that follows the scroll.

Mobile

Designed for the phone it is sent to.

Most people open the link from WhatsApp. Every chapter, the game and the plans were designed for one thumb first.

System

Coffee, wine and the color of the coast.

A warm dark base for the night of the event, cream for reading, and wine kept for the moments that ask for a decision.

• 42%Coal#141211Base, night sections
• 26%Cream#EEE5D7Reading, light sections
• 14%Sand#C8AE93Labels, details
• 12%Wine#4B151A
• 6%Ivory#F7F0E5

Instrument SerifHeadlines · 96 / 64 / 40

AeroPress Margarita

Instrument Serif ItalicEmphasis inside a headline

a tu ritmo.

ManropeBody and interface · 22 / 16 / 14

Mantén pulsado para llenar. Suelta para pausar.

HandwrittenOne note per screen, the voice of the club

Buenas ideas. Mejor café.

Engineering

Built light, so the 3D never gets in the way.

A rich page that opens fast on a phone in a WhatsApp chat. Every technical choice served that one goal.

The day

Then the day came.

Rancho Victorio, Guarame. Baristas from the east of Venezuela competing for three places in the national final, with the sea behind them.

Photos: RED Coffee Club and @tonyjperdomo

Translated from Spanish

Results

The event now looks like what it is.

The club stopped sending a PDF. Brands now get a link that sells the championship as a premium event, built in one week.

week from brief to launch

1

Lighthouse performance, mobile

92

Accessibility, best practices, SEO

100

sections in one link, instead of a PDF

13

Live atredcoffee.club ↗

Credits

Who did what

Thank you, RED Coffee Club, for the trust and the coffee. Concept and development: Antoni Hidalgo. UX, story structure and shop: Samuel Urbina. Event photography: @tonyjperdomo.

Visit redcoffee.club ↗

Any questions? Write to us at hey@hidra.zip.