5 de octubre de 2026 · 2 min de lectura
Bodega Araujo: una tienda de vinos donde el film del hero se maneja con el scroll
Cómo reconstruimos la tienda online de una bodega familiar orgánica como un sitio editorial oscuro: un film de Veo recorrido con el scroll, botellas reales compuestas sobre sets de IA y una API Laravel con cuentas, checkout y admin detrás.
Read in English
El punto de partida
Bodega Araujo es una bodega familiar orgánica de Villa Atuel, Mendoza. Vendían desde una plantilla genérica que no decía nada del lugar, de los álamos ni de la familia, y las fotos de producto tenían etiquetas que nadie quería que un modelo redibujara.
El pedido fue una tienda que se sintiera como la bodega y vendiera como una tienda, con el mismo catálogo que la familia ya administraba.
Lo que construimos
Un diseño de tres colores y dos tipografías. Tinta casi negra, hueso y un solo acento vino. Todo otro tono es una opacidad de esos tres. Fraunces para los títulos, Jost para el texto, sin radios, bordes finos.
Un film del hero recorrido con el scroll. En lugar de un loop en autoplay, un film de 8 segundos generado con Veo 3.1 queda fijado durante cuatro pantallas y avanza con el scroll, así bajar se lee como entrar al viñedo. El último cuadro es un push-in sobre la botella insignia real. El film se descarga como blob, cada seek espera al seeked anterior, y nunca se carga en dispositivos táctiles ni con reduced motion, donde queda un poster fijo.
Productos reales sobre sets generados. Los recortes de producto de las fotos de la bodega se componen sobre sets vacíos generados con IA, con sombra de contacto, reflejo de plinto y grano. Las etiquetas quedan exactas porque ningún modelo las vuelve a pintar.
Comercio detrás. Una API Laravel sirve catálogo, carrito, checkout con Mercado Pago, cuentas de cliente e historial de pedidos. Un admin aparte le permite a la familia cargar productos, precios y promociones. Los cambios de ruta usan view transitions de React, así la botella de la tarjeta se transforma en la página de producto.
Lo que hizo falta para mantenerlo honesto
Vitest cubre el sistema de movimiento, incluido que las instancias de ScrollTrigger se limpian al desmontar y que no se pide ningún .mp4 con reduced motion. Playwright verifica que el film llega a su estado listo en desktop, que los títulos quedan totalmente visibles después del reveal y que nada desborda horizontalmente en las páginas clave.
Stack
Next.js 16, React 19, Tailwind 4, GSAP, Lenis, Laravel, PostgreSQL, Mercado Pago, Veo 3.1 y modelos de imagen de Gemini a través de un pequeño pipeline de medios, ffmpeg.