← All projects
Scroll-driven experience · Hospitality
Zhar Burger
A restaurant site where the cooking is the interface: video scrubbed frame by frame as you scroll, with a full ordering flow underneath.
- Status
- Live
- Year
- 2026
Context
A burger brand competes on appetite, and a grid of dish photographs does not create any. The site had to make the food the experience rather than the illustration, and then still let someone order without friction.
Approach
The page is built as chapters. Each one pins to the viewport and plays a cooking sequence tied directly to scroll position, so the visitor sets the pace of the cooking themselves. A camera-style HUD carries temperature, stage and frame, which turns a food video into something closer to a document.
Design decisions
- Near-black cinematic stage with a single acid-green accent
- Condensed display type against a technical monospace HUD
- Chapters numbered like a reel rather than named like a menu
- Bilingual interface with UA as the default for a Kyiv audience
Engineering
- Scroll position mapped to video currentTime through baked per-frame density tables
- Seek-friendly encodes so scrubbing lands on a frame instead of stalling
- Smaller clips served to phones, and media deferred until the visitor moves
- The whole ordering flow — menu, modifiers, cart, table, waiter call — behind the same interface
Visual story
Key interactions
- Scroll-scrubbed cooking sequences that run forwards and backwards
- Menu with modifiers, cart and upsell
- Table selection and waiter call for in-venue use
- UA / EN switching across the whole interface
Technology
- Next.js
- TypeScript
- Scroll-driven video
- PostgreSQL
- Telegram Bot API
- Render
