Food / Hospitality · Studio demo
ZHAR — Interactive Product Storytelling
A studio build that shows the scroll-story format on an everyday product. The burger separates into bun, sauce, cheese, patty and onion as you scroll, the process is told in numbers, and a full ordering flow sits underneath. Not a client project: a live demo of the format.
A studio demo built to show the format. There is no restaurant behind it and orders do not reach a kitchen.
Studio demoFood / Hospitality
ZHAR — Interactive Product Storytelling
A burger taken apart layer by layer as the page scrolls: composition, ingredients, process.
- Format
- Scroll story · exploded layers
- Chapters
- 4
- Devices
- Desktop · Mobile
- Status
- Live demo
- Year
- 2026
- Formats
- Scroll Product Story · Exploded Product Experience
Problem
A grid of dish photographs says nothing about what is inside or how it was made. The same is true of most physical products: the composition is the argument, and a photo hides it.
Idea
Treat the burger as an assembly. The page is built as chapters pinned to the viewport; scrolling lifts the layers apart and names them, then lays out the process — temperature, blend, hours — as a spec sheet. The visitor sets the pace of the disassembly.
Experience
- Scroll to take the product apart and put it back together
- Read the composition layer by layer
- See the process as numbers, not adjectives
- Order from the same page: menu, modifiers, cart, table service
Result
A live, bilingual product page where the product's composition is the interface. The same structure works for any product that is assembled from parts.
Screens
Technology
- Next.js and TypeScript
- Pinned chapters with scroll-mapped sequences that run forwards and backwards
- Lighter media served to phones; nothing loads until the visitor moves
- Menu, cart and table service on the same stack
