Referencia 07 · Web premium para una marca de café de especialidad
Koffio
Una web premium para una marca colombiana de café de especialidad: abre como una película que se recorre con el scroll, cruza la puerta de la tienda y termina en una tienda que se toca.
Lo que la hace distinta: la película la dibuja un motor propio sobre un canvas, el lienzo de dibujo del navegador. No es un video.
Es un prototipo: el checkout no cobra y los textos legales son un borrador. Los planos de finca y de proceso son imágenes ilustrativas hechas con IA.
Lo quiero para mi proyectoQué resuelve
Que el café se venda con su historia y no como un producto más de plantilla.
El problema: una tienda de plantilla vende el café como cualquier otro artículo, y el café fresco se vende con su historia, del cultivo a la bolsa.
Es para colombianos que toman café a diario y entran desde el celular por redes.
Probador
Mira el recorrido en video.
Qué mirar (3 pasos)
- Mira cómo abre la película: portada y capítulos, del cultivo al empaque.
- Mira la puerta: la cámara acelera hacia el umbral y entra a la tienda.
- Mira la tienda: estantes con puntos tocables, catálogo con filtros y ficha con variantes.
El probador es el video para que veas el recorrido aquí: la película, la puerta y la tienda.
Las imágenes de finca y de proceso son ilustrativas, hechas con IA. No muestro el checkout ni pedidos.
Alternativa en texto
- La película avanza con el scroll por 11 planos y 8 capítulos, con una cámara que nunca se detiene del todo entre plano y plano.
- La puerta es la transición donde la luz se vuelve cálida y aparece la tienda.
- En la tienda tocas un punto y la cámara se acerca a esa estantería.
Funciones
Qué hace, por áreas.
La película
- Recorre con el scroll una portada y 8 capítulos: cultivo, cosecha, beneficio, secado, trilla, tueste, empaque y tienda.
- Mueve 11 planos con cámara, transiciones con nombre y deriva de cámara.
- Respeta el movimiento reducido: la cámara queda fija y solo hay fundidos.
La tienda
- Explora estantes con puntos tocables; en celular son chips.
- Filtra el catálogo, elige variantes y ve promociones.
- Ofrece membresías de 3 meses: Bronce, Plata y Oro.
- Agrega al carrito y pasa a un checkout con validación y confirmación. En el prototipo no cobra.
Extras
- Suena una vitrola con jazz de dominio público de los años 20; no carga nada hasta el primer toque.
- Responde 6 preguntas frecuentes.
- Muestra una barra de pestañas flotante en celular.
- Se lee sin JavaScript ni movimiento.
No incluido hoy
- Cobro real: el checkout no cobra.
- Conexión activa con la tienda real: el cambio queda sujeto a la aprobación del dueño.
- Textos legales definitivos: son un borrador.
Qué tiene detrás
Lo que pasa por dentro, en dos niveles. Elige el tuyo.
- Quien entra ve primero la película, que avanza con el scroll.
- Al cruzar la puerta aparece la tienda, con carrito y checkout.
- Cuando se active la conexión, antes de cada publicación la web baja de Shopify los precios, las existencias y los identificadores de cada variante.
- Una prueba revisa que cada variante de la web exista en Shopify. Si no coincide, no se publica.
- Si el visitante pide menos movimiento, la web se lee igual.
- Astro 7 con salida estática e islas de React 19, Tailwind 4, GSAP, Lenis y Zustand.
- Motor propio de película en src/lib/film.ts (292 líneas) sobre canvas: cámara, tres transiciones con nombre (dissolve, push con zoom-blur de 20 % y door con aceleración cúbica y lavado de luz cálida) y deriva de cámara en mano de menos del 1 % del encuadre. Lo mueve el scroll con Lenis y ScrollTrigger.
- Una curva «glide» (72 % lineal, 28 % seno) evita que la cámara se detenga entre planos. Con prefers-reduced-motion, la cámara queda fija en el encuadre final y solo hay fundidos.
- Catálogo sincronizado con la Storefront API de Shopify antes de cada build, con una prueba que falla si una variante no empareja. La conexión con la tienda real no está activada.
- Pipeline de imágenes: AVIF y WebP en 960, 1536, 1920 y 2560, con un registro de procedencia (real o IA) por imagen.
- Redirecciones de migración en vercel.json: de www a apex y de las rutas típicas de Shopify hacia la web nueva.
- Sentry 11 sin IP, cookies ni cabeceras, cargado en diferido (~53 KB fuera de la carga inicial). Lo configuré así tras detectar que el SDK 11 cambió sus valores por defecto.
Despiece · 3 piezas conectadas
- 01El sitio, con su película y su tienda inmersiva
- 02La sincronización con Shopify en el build
- 03Sentry, para registrar errores
Shopify es la plataforma donde el dueño tiene hoy su tienda. Una API es la puerta por la que un programa le pide datos a otro.
Composición y cuidados
Composición · Nº 07
Composición
- Astro 7: arma el sitio estático.
- React 19: las islas interactivas.
- Tailwind CSS 4: los estilos.
- GSAP y Lenis: movimiento y scroll suave.
- Canvas propio: la película.
- Zustand: el estado del carrito.
- Shopify Storefront API: el catálogo (preparado).
- Sentry: errores sin datos personales.
- sharp: optimiza las imágenes.
Dónde vive
- Vercel, en el proyecto koffio. Es un prototipo del cliente.
Cuidados
- No hay cobro real conectado.
- Los textos legales son un borrador sin revisión de abogado.
- Los planos de finca y de proceso son imágenes ilustrativas hechas con IA, no fotos de las fincas.
- Hay datos del cliente sin confirmar: fincas, envíos y devoluciones.
- Versiones declaradas, no instaladas verificadas: Astro ^7.3.5, React ^19.3.0, Tailwind ^4.3.3, GSAP ^3.15.0, Lenis ^1.3.26, Sentry ^11.2.0 y Node >=22.12.0.
Hecho en Manizales · 2026
Guía de tallas
Talla M: lleva 3 piezas conectadas por dentro. La regla: S de 1 a 2 piezas, M 3, L 4 y XL 5 o más. La letra es una etiqueta; el dato es el conteo.
- El sitio, con su película y su tienda inmersiva.
- La sincronización con Shopify en el build.
- Sentry, para registrar errores.
Cifras de tamaño (verificado en el repositorio el 2026-10-08)
- 9 commits. Además hay 38 entradas de trabajo reciente que aún no están en commits.
- 36 archivos en src/.
- 11 planos y 9 entradas de capítulo en la película.
- 7 fichas de producto propias.
- 463 archivos y 46 MB de medios en public/media.
- 2 películas de 22 MB, en 16:9 y 9:16, no versionadas.
S de 1 a 2 piezas conectadas, M 3, L 4 y XL 5 o más. La letra es una etiqueta; el dato es el conteo.
Certificado
Las pruebas que respaldan esta pieza.
Verificado en el repositorio · 2026-10-08
- 100accesibilidad Lighthouse móvilFuente: .impeccable/review/lighthouse-live/report.json, 2026-09-30
- 33pruebas escritas en 4 archivosFuente: src/lib/*.test.ts
- 9commitsFuente: git rev-list --count HEAD
Evidencia (verificado en el repositorio el 2026-10-08)
- 4 archivos de prueba y 33 pruebas escritas (conteo en el código). No las ejecuté.
- Integración continua en GitHub Actions, el sistema que corre las pruebas cada vez que se sube un cambio: instala, corre pruebas y build en cada push a main y en cada PR. La auditoría de dependencias es informativa. Dependabot también está activo.
- Lighthouse móvil: accesibilidad entre 96 y 100, buenas prácticas 100 y CLS 0 (informes del 2026-09-29 y del 2026-09-30). SEO 100 en el informe local.
- Cabeceras: nosniff, Referrer-Policy, X-Frame-Options DENY y Permissions-Policy.
Lo que no afirmo
- Una CSP: esta pieza no la tiene.
- Rendimiento de Lighthouse: no hay registro en esos informes.
- El SEO 69 del informe en Vercel: coincide con un noindex deliberado que tenía la web en ese momento.
- Cobro real, ni que esté conectado a la tienda real de Shopify: ese cambio no está hecho.
- Cifras de negocio del cliente: no hay datos de ventas ni de tráfico.
- Textos legales definitivos.
pruebas escritas (conteo en el código)
Lo quiero para mi proyectoUna web con historia, para tu marca
Si tu marca vende algo con una historia detrás, como café, artesanía o ropa de autor, y quieres que la compra se gane contándola, esto se parece a lo que necesitas.
Es un prototipo, y la ficha dice qué le falta.