Red Coffee Club
Antes los patrocinadores recibían un PDF. Ahora reciben un enlace.
RED Coffee Club organiza AeroPress Margarita, la clasificatoria regional del campeonato nacional de Venezuela. A pocos días de su segunda edición pidieron una web para presentar el evento, inscribir baristas y conseguir patrocinantes. La diseñamos y la construimos en una semana.
- Cliente
- RED Coffee Club · Isla Margarita
- Alcance
- Concepto, diseño web, 3D, interacción, desarrollo
- Stack
- Astro · Three.js · GSAP · Matter.js
- Cronograma
- 7–14 de septiembre de 2026 · una semana
Antes
Un PDF de 21 páginas hacía la venta.
El dosier lo tenía todo: el equipo, el evento y cuatro planes de patrocinio. Pero se leía como una presentación de diapositivas y nunca transmitía la energía de un campeonato de café frente al mar.
El dosier original: 21 láminas, 1440 × 810.
Cronograma
La idea llegó tarde. La vara se mantuvo alta.
La web se decidió a pocos días del campeonato. Del primer commit al lanzamiento pasó una semana, y salió once días antes del evento.
Septiembre de 2026
Diseño y desarrollo · 14 commits
- Compartida en Instagram · 11 sep
- En línea · 14 sep
- Día del evento
- días del primer commit al lanzamiento
- 7
- días en línea antes del campeonato
- 11
- personas: un desarrollador, un diseñador
- 2
Públicos
Una página, cuatro lectores.
Cada público llega buscando algo distinto. La página responde a los cuatro en un mismo scroll, y todos terminan en una conversación.
01
Marcas
Quieren saber si el evento merece su nombre.
El campeonato, el equipo, los planes de patrocinio, el muro de 26 marcas.
02
Baristas
Necesitan la fecha, el lugar y cómo competir.
22 de septiembre, Rancho Victorio, tres cupos para la final nacional.
03
Público
Quiere una razón para ir.
Entrada libre, 150 personas, café y mar.
04
El club
Necesita un enlace que hable por ellos.
Una página que enviar en lugar del PDF.
La página
Trece secciones, un solo scroll.
La costa y la AeroPress, los cuatro capítulos, la isla, el equipo, el merch, los patrocinantes, los planes y las preguntas frecuentes. En móvil, cada sección conserva su lugar en la historia.
Ir a una sección de la página
3D
Una AeroPress modelada en código.
No descargamos un modelo: lo construimos en Three.js. Así pusimos el logo de RED y sus marcas 1–4 en la cámara, y ganamos control sobre cada pieza, para el scroll y para el juego del café.
- 01
Émbolo
Tubo hueco, agarre para la palma y pistón de silicona con su labio sellador.
- 03
Microfiltro de papel
Un disco aparte, para que pueda caer en su sitio por sí solo.
- 02
Cámara
Cámara de preparación con el logo de RED Coffee Club y las marcas 1–4.
- 04
Tapa del filtro
56 estrías de agarre y 37 orificios abiertos, modelados uno por uno.
- piezas que se mueven solas
- 4
- lienzo compartido por el recorrido y la mesa de preparación
- 1
- exportado desde el código para otros usos
- GLB
Storytelling
Cuatro capítulos, una historia de origen.
La AeroPress se despieza con el scroll, en cuatro capítulos, sobre un único lienzo 3D. Cada capítulo ocupa la pantalla entera y se cuenta con una sola frase.
Interactivo
Prepara tu propio café, en el navegador.
Un juego de seis pasos construido sobre la misma AeroPress 3D: armar, añadir el café, verter, remover, presionar, servir. Es la parte que la gente captura y comparte.
- 01Prepara la mesa
- 02Arma la AeroPress
- 03Vierte el agua
- 04Deja que florezca
- 05Presiona despacio
- 06Sirve
Primera pantalla
Todo lo importante, antes del primer scroll.
Nombre, fecha, lugar y una sola vía de entrada. La AeroPress gira a medida que te mueves, y una frase escrita a mano le da la voz del club.
- 01
Nombre y edición
Compuesto en la serif de la marca, nada compite con él.
- 02
Fecha y sede
22 de septiembre, Rancho Victorio. Respondido en el primer segundo.
- 03
AeroPress 3D
Modelada en código con el logo de RED. Sigue el cursor.
- 04
Un solo llamado a la acción
«Sé parte» abre los planes. Un botón, una decisión.
Conversión
De un enlace a una conversación, en cuatro toques.
El club envía un enlace. Una marca lee la historia, elige un plan y llega a WhatsApp con el mensaje ya escrito.
Movimiento
Pequeños bucles que le dan vida.
Dos detalles con los que la gente juega: granos de café que caen y se apilan con física real, y un vertido que sigue el scroll.
Granos del pie de página
- Hecho con
- Física de Matter.js
- Disparador
- Al entrar en pantalla
- Duración
- Bucle
El vertido
- Hecho con
- GSAP ScrollTrigger
- Disparador
- Ligado al scroll
- Duración
- 1,2 s
Móvil
Diseñada para el teléfono al que se envía.
La mayoría abre el enlace desde WhatsApp. Cada capítulo, el juego y los planes se diseñaron primero para un solo pulgar.
Sistema
Café, vino y el color de la costa.
Una base oscura y cálida para la noche del evento, crema para leer, y el vino reservado para los momentos que piden una decisión.
- 42%Carbón#141211Base, secciones nocturnas
- 26%Crema#EEE5D7Lectura, secciones claras
- 14%Arena#C8AE93Etiquetas, detalles
- 12%Vino#4B151A
- 6%Marfil#F7F0E5
- Instrument SerifTitulares · 96 / 64 / 40
- AeroPress Margarita
- Instrument Serif ItalicÉnfasis dentro de un titular
- a tu ritmo.
- ManropeCuerpo e interfaz · 22 / 16 / 14
- Mantén pulsado para llenar. Suelta para pausar.
- ManuscritaUna nota por pantalla, la voz del club
- Buenas ideas. Mejor café.
Ingeniería
Construida ligera, para que el 3D nunca estorbe.
Una página rica que abre rápido en un teléfono, dentro de un chat de WhatsApp. Cada decisión técnica sirvió a ese único objetivo.
01 · Páginas estáticas
Astro
Envía casi nada de JavaScript por defecto, así que la historia se lee antes de que cargue cualquier otra cosa.
02 · La AeroPress en 3D
React Three Fiber · Three.js
El modelo es nuestro: el logo de RED en la cámara y control total de cada animación.
03 · Scroll y movimiento
GSAP ScrollTrigger
El vertido, los capítulos y las revelaciones siguen el scroll a 60 fps.
04 · Física
Matter.js
Los granos de café del pie de página caen y se apilan como los de verdad.
05 · Rendimiento
Carga bajo demanda
La escena 3D y el juego solo cargan cuando entran en pantalla.
06 · Medido
Lighthouse
92 de rendimiento en móvil, 100 en escritorio. 100 en accesibilidad, buenas prácticas y SEO.
El día
Y llegó el día.
Rancho Victorio, Guarame. Baristas del oriente de Venezuela compitiendo por tres cupos para la final nacional, con el mar detrás.
Fotos: RED Coffee Club y @tonyjperdomo
Traducido del español
Resultados
El evento ahora se ve como lo que es.
El club dejó de enviar un PDF. Ahora las marcas reciben un enlace que vende el campeonato como un evento premium, construido en una semana.
- semana del brief al lanzamiento
- 1
- Rendimiento en Lighthouse, móvil
- 92
- Accesibilidad, buenas prácticas, SEO
- 100
- secciones en un solo enlace, en lugar de un PDF
- 13
En línea enredcoffee.club ↗
Créditos
Quién hizo qué
Gracias, RED Coffee Club, por la confianza y el café. Concepto y desarrollo: Antoni Hidalgo. UX, estructura de la historia y tienda: Samuel Urbina. Fotografía del evento: @tonyjperdomo.
¿Alguna pregunta? Escríbenos a hey@hidra.zip.
