Grind & Pour

Most online coffee shops look alike: a grid of bags on a plain page. The goal was a store with the presence of a product-launch film, and a brewing guide people would actually enjoy, without giving up the speed, accessibility and clarity a real shop needs.

The hard constraint was the film itself: 768 frames of video that had to follow the scroll smoothly on a laptop trackpad, a mouse wheel and a phone, and never show a blank frame.

Treat the home page as one continuous film rather than separate sections. Four clips (grind, dial in, pour, sip) play on a single pinned canvas and crossfade into each other, while the copy for each brewing step rises and masks in on top.

Keep the store calm and familiar underneath the spectacle: clear product cards, filters, a cart drawer and a checkout that follows patterns shoppers already trust.

A warm cream palette sampled from the film's own frames, a heavy retro serif (Fraunces) for the huge step words and DM Sans for reading. Every coffee has its own label colour, which carries through to its card accents and to its cup.

The visuals were directed with AI image and video tools: four film clips, ten coffee bags and ten matching cups in one consistent studio style, then cleaned up and converted into optimised WebP frame sequences and product images.

Product cards use a “Brew Reveal”: hovering a bag opens a circle from the cursor to show that coffee served in its own cup, with tasting notes floating in and steam rising. On phones, the centred card in the carousel reveals itself on its own.

Next.js App Router with TypeScript. The film engine draws frames on a canvas driven by Motion's scroll progress, Lenis smooths the scroll, and the displayed frame eases toward its target and blends the two nearest frames, so 24 fps footage plays like 60 fps. Frames preload coarse-to-fine, and a missing frame always falls back to the nearest loaded one.

The store has ten coffees with size and grind options, roast and style filters kept in the URL, sorting, a cart drawer, a promo code and a three-step checkout validated with React Hook Form and Zod. The cart and past orders persist with Zustand, and the demo card step only accepts the test card, so no real card details are ever taken.

The steam is a small particle system on its own canvas — soft puffs that rise, grow and drift on noise-based turbulence — started only for the card being revealed and stopped when it closes.

The hardest problem was making scroll-driven video feel smooth instead of steppy. Mapping scroll position straight to a frame jumps several frames per mouse-wheel notch, and separate sticky sections created hard cuts between the scenes.

The fix was to merge all the clips into one pinned stage with weighted scroll lengths and crossfades, add Lenis for smooth scrolling, and decouple the drawn frame from the scroll: on every animation frame the displayed position eases toward the target, and the two nearest frames are blended by the fractional part. Scripted checks in headless Chrome then confirmed that the frame position no longer jumps and that frame times stay around 16.7 ms.

The whole film is about 19 MB of 1248 px WebP frames, loaded progressively after the first paint, and the canvas resolution is capped at what the frames can actually show. Only the revealed card animates. With reduced motion turned on, the film becomes still frames with simple fades. Playwright end-to-end tests cover the product carousel, the cart, promo codes and both checkout paths.

A store people scroll through on purpose: it teaches how to brew a better cup, then lets them buy the beans for it. It is live on Vercel, and its code is public on GitHub together with the build briefs that guided each stage.