Café-bakery website
A café-bakery site that lives by the oven clock: a header with a live “open / opens in”, a hero with an oven timer and a batch ribbon, a draggable shelf with stock, a coffee strength slider with a filling cup, a morning box builder, a “36 hours to a loaf” scroll story from night to morning, people with notes, a punch card with stamps, a bento gallery, receipt reviews, a map with an hourly queue, a bread alarm and a footer with a day bar. Light theme: milk, crust and poppy, Playfair Display and Caveat.
A site that runs on oven time: visitors see whether it's open now and what's left on the shelf, pick a coffee, build a box for the morning and subscribe to fresh bread. The bakery in the demo is fictional; the blocks fit any café or patisserie.
What it is made of
13 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
Café header with a live “open now” chipnavbar-028
Wordmark, sections, a live “open · until 21:00” chip on the visitor's clock, glass on scroll.
2. First screen
Bakery hero with a live oven timerhero-028
A shop photo, a headline rising like dough, an oven timer and the day's batch ribbon.
3. Shelf
Pastry shelf with drag-to-scroll and stock countsbakery-001
A draggable shelf, “baked at”, stock, an “add to box” button.
4. Coffee
Coffee strength slider with a filling cupbakery-002
A strength slider, the cup fills with layers, the bean of the week.
5. Morning box
Breakfast box builderbakery-003
Four cells, a stamped lid, an order form for the chosen time.
6. 36 hours to a loaf
Scroll story “36 hours to a loaf”bakery-004
A sticky scroll story: frames, a clock board, night and morning.
7. People
Team as bento tiles with a note on the backpeople-012
Baker and barista tiles, a “what's at 5 a.m.” note on hover.
8. Regulars
Punch card with stamps and a bread subscriptionbakery-005
A punch card with stamps and a Saturday bread subscription.
9. Gallery
Bento gallery with scribbled captionsportfolio-011
A bento of ten shots from one morning with hover captions.
10. Reviews
Reviews on thermal receipts printed line by linetestimonials-023
Receipts that print line by line as they appear.
11. Find us
Map with hours and an hourly queue chartmap-010
A map, hours and an hourly queue with a “now” highlight.
12. Bread alarm
Bread alarm on a kraft bagsubscribe-007
Pick a pastry and get a reminder five minutes before it's out, on a kraft bag.
13. Footer
Footer with a working-day barfooter-027
Link columns and a working-day bar filled to the current hour.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Café-bakery website” page made of?
- 13 catalog sections in order: Café header with a live “open now” chip, Bakery hero with a live oven timer, Pastry shelf with drag-to-scroll and stock counts, Coffee strength slider with a filling cup, Breakfast box builder, Scroll story “36 hours to a loaf”, Team as bento tiles with a note on the back, Punch card with stamps and a bread subscription, Bento gallery with scribbled captions, Reviews on thermal receipts printed line by line, Map with hours and an hourly queue chart, Bread alarm on a kraft bag, Footer with a working-day bar. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.