The Pie Wheel
Five pies on the rim of one giant wheel. Every scroll turns it: the next pie rolls up into the middle from the edge, the last rolls off the other side, and the table beneath changes to that pie's props and colour.
A bakery with five pies does not need a menu grid, it needs a way to make each one the star for a moment. This concept puts the pies on a wheel and lets the visitor turn it. The pie in front is huge and cropped by the bottom of the screen like a plate pushed toward you, the next one rolls in when you scroll, and the whole table dresses itself for whatever arrives.
How it works
The five pies are placed on the rim of a ring whose centre sits far below the page, so only the top of the ring is ever on screen. One turn rotates the whole ring by the spacing of one pie: the pie in front slides down and off one edge while the next rises from the other, and because each pie also spins on itself as it travels, it reads as a wheel rolling rather than a slideshow. A pie that has to jump from one far edge to the other is moved without a transition, since both edges are out of view. At the same moment the table photograph crossfades to the one styled for that pie, the flavour name swaps, the dots on the gold arc drawn round the crust slide so the current flavour sits at the top, the counter updates, and the cards and the order form further down mark the pie that is on the wheel. Scrolling is stepped: one flick turns one pie and further input is ignored until the wheel settles, and after the fifth pie the page scrolls on as normal. Arrows, the keyboard, a swipe and a click on any flavour dot do the same. The five pie photographs and the five styled tables were supplied by the client and matched by their props.
Who it fits
The demo is a fictional pie house, MAISON ORBE, with five seasonal pies: brown butter pear, dark chocolate, sour cherry, salted maple and lemon curd. The wheel fills the hero with a gold arc of flavours around the crust; below it are the five cards with prices, the story of the shophouse oven and an order form that preselects the pie left on the wheel.
Why it sells
For food, the photograph is the argument, so the effect exists to serve it: nothing covers the pie, the type stays small and high, and the motion only ever brings the next dish forward. It suits any counter with a short menu, a cake shop, a coffee roaster with five origins, a mooncake or festive collection, a restaurant's tasting menus. It is CSS transforms on cut out images, so it is light and it runs on a phone.
Recommended for
- Bakeries and pie shops
- Cake and dessert counters
- Seasonal and festive collections
- Any menu of five to eight hero items
Common questions
Is the pie really rolling?
Yes, in the sense that matters. Each pie sits on the rim of one ring and the ring itself rotates, so the pie follows a real arc across the screen. A second rotation on the pie makes it spin as it goes, the way a wheel turns as it travels.
How does the table know which pie is in front?
Each pie has its own table photograph, styled with its ingredients: pears and hazelnuts for the pear pie, chocolate shards for the chocolate, a lemon for the lemon curd. When the wheel turns, the table for the new pie fades in over the old one at the same speed.
Why does scrolling stop at each pie?
So a fast scroll cannot skip one. While the wheel is on screen a flick turns exactly one pie and the next flick is ignored until it has settled. After the last pie the page scrolls normally to the menu, the story and the order form.
Does the wheel work on a phone?
Yes. The pie is larger and sits lower so the flavour arc has room above it, a swipe in either direction turns the wheel, and the two round arrows at the bottom do the same for anyone who prefers to tap.