Cafe · Scroll experience · Vancouver, BC

Cafe Website

A scroll-driven cinematic website for a specialty coffee brand. As you scroll, a single macro film plays frame by frame — a coffee bean fractures, brews under pressure, and arrives as a finished cup. Motion carries the story; nothing is hurried.

View the live site Want one for your cafe?

Macro shot of a single coffee bean above a grinder — Cafe Website scroll concept hero

The concept

Most cafe websites are a menu, a photo, and a map. This one is a short film you steer with your scroll. A single macro shot follows one bean from its first fracture, through the pressure of extraction, to a finished cup on a sunlit table — five chapters, one continuous take.

The point is feel. A specialty roaster sells a ritual, so the site is built as one. Motion does the talking, and every second of the film is tied to a step a barista would recognise.

Target buyer

Cafes, specialty roasters, and hospitality brands that sell a feeling, not just a product. Owners who want a website that feels like an experience the moment it loads — the opposite of a template.

Why this concept for IshaanEx

Scroll-driven video is the hardest kind of website to build well — most agencies reach for a template because motion like this is fiddly. This concept shows we can do the cinematic end of the market, not just clean and fast.

Design notes

What makes this concept different.

The hero film scrubs to scroll — scroll down and it plays forward, scroll up and it reverses, so the visitor controls the pace

Five chapters — Origin, Fracture, Pressure, Pour, Arrival — mapped to the real coffee ritual

Smooth inertia scrolling (Lenis) gives the motion weight, so it feels considered rather than jumpy

An Auto Tour button walks the whole story hands-free for visitors who would rather watch than scroll

One continuous macro shot end to end — no stock food photography anywhere

Respects a visitor’s reduced-motion setting — the film holds still instead of animating when the system asks it to

Tech stack

React + Vite, GSAP ScrollTrigger and Lenis smooth scroll, driving a single frame-scrubbed video. The heavy film is hosted separately so it never adds weight to the main site — the page only loads it when someone opens the experience.

If this were a real client

Here’s what we’d change.

A concept site isn’t the finish line — it’s the starting frame. These are the real-client shifts we’d make on day one of a paid engagement.

1 Shoot a real macro film of the client’s own beans, grinder, and espresso pour instead of a concept scene
2 Add a live menu, hours, and an online-ordering or table-reservation integration
3 Pre-render the film into a scroll-optimised frame sequence so it loads fast on older phones
4 Add LocalBusiness and Menu schema plus proper meta so the cafe shows up in local and AI search

Want one like this?

We build cinematic sites custom.

Custom-coded for speed, WordPress or Wix if that fits better. We meet you where you are.

Book a free consultation View live site

Or call 250-271-7055 — sometimes it’s faster to just talk.

Cafe Website

What makes this concept different.

Four colours. Warm and low-lit.

Here’s what we’d change.

We build cinematic sites custom.