Proyecto 7 de 8
Koffio
Hacer sentir la frescura del café, de la finca a la bolsa, antes de vender.
Prototipo entregado
Las imágenes de finca y proceso estún hechas con IA.
Y termina en la tienda.
Imágenes hechas con IA
Lo mismo, en texto
Esta demo necesita JavaScript. Aquí va en texto.
- Arrastra a la derecha o a la izquierda para moverte por el recorrido.
- Mira cómo cambia el plano: cultivo, cosecha, beneficio, secado, trilla, tueste y empaque.
- Sigue hasta la puerta de la tienda.
Video: nueve capítulos desde el cultivo hasta la tienda, con transiciones entre planos y una tienda de estantes que se tocan.
Qué es
Una web de café de especialidad que cuenta el recorrido del grano, del cultivo al empaque, antes de mostrar la tienda.
Para quién es
Para quienes toman café a diario y entran desde el celular por redes.
Tareas que te quita
- Copiar a mano el catálogo de la tienda a la web: está preparada para sincronizarse antes de cada publicación.
- Preparar versiones del recorrido para redes: el proyecto genera la película en horizontal y en vertical.
- Anotar de dónde sale cada imagen: cada una lleva su procedencia, real o hecha con IA.
Qué hay detrás
- 1
La película cambia de plano con el scroll.
- 2
La puerta lleva a estantes interactivos; en celular se recorren con chips.
- 3
El catúlogo estú preparado para sincronizarse antes de cada publicación.
- 4
El visitante arma el carrito; el checkout del prototipo no cobra.
- 5
La procedencia registrada permite cambiar ilustraciones de IA por fotos reales.
- Motor propio de película sobre canvas, el lienzo de dibujo del navegador: una cámara, tres transiciones con nombre (disolver, empujar y puerta) y una deriva de cámara de menos del 1 % del encuadre. Lo mueven Lenis, que suaviza el scroll, y ScrollTrigger, de GSAP.
- Astro con islas de React y Tailwind, y Zustand para el estado del carrito.
- El catálogo se baja de la Storefront API de Shopify en el build. Una prueba falla si una variante de la web no empareja con Shopify.
- Imágenes en AVIF y WebP a cuatro tamaños. Otros scripts generan favicons y las películas en 16:9 y 9:16.
- Sentry, que reporta errores, se carga en diferido y está configurado sin IP, cookies ni cabeceras.
- Con movimiento reducido, la cámara queda fija en el encuadre final y solo hay fundidos.
- Astro
Cuidados y límites reales
- El cambio a la tienda real del cliente está por aprobar.
- Los textos legales del prototipo son borradores.
Qué prueba hay de que es robusto
Verificado el 2026-10-08. Pruebas escritas no son pruebas ejecutadas.
- 100accesibilidad Lighthouse móvil.impeccable/review/lighthouse-live/report.json, 2026-09-30
- 33pruebas escritas en 4 archivossrc/lib/*.test.ts
- 9commitsgit rev-list --count HEAD
Cómo cuento
Cada cifra lleva su método, su fuente y su fecha. Un conteo de pruebas es un conteo de texto: pruebas escritas (conteo en el código), no pruebas ejecutadas.
Lo que no afirmo
- Conexión en vivo con Shopify: el cambio a la tienda real está por aprobar.
- Cobro real: el checkout es del prototipo.
- Una política de seguridad de contenido (CSP): no tiene.
- Fotos reales de las fincas: son ilustraciones hechas con IA.
- Pruebas ejecutadas: el conteo es de pruebas escritas.
Una web así, para tu marca
Quiero una web asíAl pulsar Enviar en WhatsApp me autorizas a usar tu número y tu mensaje para responderte. Política de datos
Siguiente proyectoClaudia Franco Accesorios