Bodega Araujo: a wine storefront where the hero film is driven by the scroll

Where it started

Bodega Araujo is an organic family winery in Villa Atuel, Mendoza. They were selling through a generic store template that said nothing about the place, the poplars or the family, and the product photos carried labels nobody wanted a model to redraw.

The brief was a storefront that felt like the winery and sold like a shop, with the same catalogue the family already managed.

What we built

A three-colour, two-typeface design. Near-black ink, bone and a single wine accent. Every other shade is an opacity of those three. Fraunces for display, Jost for text, no radii, hairline borders.

A hero film scrubbed by the scroll. Instead of an autoplay loop, an 8-second film generated with Veo 3.1 is pinned for four screens and advances with the scroll, so scrolling down reads as walking into the vineyard. The last frame is a Ken Burns push-in on the real flagship bottle. The film is fetched as a blob, seeks are gated on the previous seeked event, and the whole thing never loads on touch devices or under reduced motion, where a still poster takes its place.

Real products on generated sets. Product cut-outs from the winery's own photos are composited onto AI-generated empty sets with contact shadows, a plinth reflection and film grain. Labels stay pixel-exact because no model ever repaints them.

Commerce behind it. A Laravel API serves the catalogue, cart, Mercado Pago checkout, customer accounts and order history. A separate admin app lets the family load products, prices and promotions. Route changes use React view transitions so the bottle on the card morphs into the product page.

What it took to keep it honest

Vitest covers the motion system, including that ScrollTrigger instances are cleaned up on unmount and that no .mp4 is requested under reduced motion. Playwright checks the film reaches its ready state on desktop, that headings become fully visible after reveal, and that nothing overflows horizontally on the key pages.

Stack

Next.js 16, React 19, Tailwind 4, GSAP, Lenis, Laravel, PostgreSQL, Mercado Pago, Veo 3.1 and Gemini image models through a small media pipeline, ffmpeg.