Case file 010Scroll-film ordering sites
The problem
“Our customers order on WhatsApp. Can our website take the order for us?”
Solved
- For
- Small businesses that take orders on WhatsApp
- Built
- A repeatable system for cinematic ordering sites
- Stack
- Veo 3 film · WebP frames · static HTML · Vercel · Cloudflare Pages
- Result
- Metric to confirm
01 · The pain
The food is great. The ordering is a chat thread.
- “Price?” asked all day, under a photo of the menu.
- The total worked out by hand, and sometimes worked out wrong.
- “Which area? Cash or card?” One reply at a time.
- A kitchen worth showing that nobody online has ever seen.
02 · The fix
A storefront that looks cinematic.
A sample grill. Pick a dish, add options, and watch the order the customer would send take shape. The real sites add delivery zones, opening hours and a checkout form.
Your order
Pick items from the menu
03 · How it works
Three pieces: film, site, messaging.
An 8-second film, played by the scroll
Each business gets one Veo 3 shot, planned around the text that will sit on it. The film is cut into WebP frames, and scrolling moves through them, so the visitor controls the playback.
A static page, no server
Plain HTML, CSS and JavaScript on Vercel, with the frames on Cloudflare Pages. Until the film exists, the hero runs on a still photo, so the site can ship first.
Orders go to WhatsApp
The site does the part a payment gateway would: a clean, priced, checked order. Then it opens WhatsApp with that order already written, to the business's own number.
The hard part
A film you can scrub before it has finished loading.
Hundreds of frames can’t all arrive before someone starts scrolling. So they don’t load in order. The first and last frames come first, then every 32nd, then every 16th, and so on down to every frame. Scrolling works early and only gets sharper.
A portrait phone sees about a third of a wide film. Each site stores where the subject is at each moment, and the crop pans to follow it.
- 1stfirst + last frame
- 2ndevery 32nd frame
- 3rdevery 16th
- 4thevery 8th, 4th, 2nd
- lastevery frame
04 · What changed
From a chat thread to a storefront.
- Time to launch a site
- —
- Orders through WhatsApp
- —
- Sites built
- 4 samples
Blanks are metrics to confirm. The four sample sites (a grill, a toy shop, a car-detailing studio and a watch wholesaler) are placeholder brands.