iBread
A warm, appetite-first landing page for a Singapore heartland bakery - real bakes wired through a typed image map, a twelve-product counter rail, and motion that stays calm and legible.
- Role
- Design + build
- Services
- UI/UX design · Frontend engineering · Content design · Performance
- Year
- 2026
- Status
- Concept build
Overview
The brief
A neighbourhood bakery lives on feeling fresh and familiar. The page had to make everyday bakes look worth the walk and show real products honestly, while staying fast on a phone and never inventing prices the shop has not published.
An independent, unofficial concept. Business facts were researched from public sources; all photography is licensed placeholder imagery. Not the official site. Reference: iBread on Google Maps.
Approach
How I built it
Wired every section to real photography through a typed asset map, so the build renders genuine bakes with next/image rather than placeholders.
Led with the signature Portuguese egg tart, then a six-category grid and a twelve-product counter rail that scroll-snaps horizontally.
Labelled all pricing as sample data in the UI and linked the three real outlets out to their Google Maps place cards instead of inventing opening hours.
Built the motion from CSS keyframes and one IntersectionObserver reveal component, with from-only entrance frames so hover transforms never fight the load animation.
Key features
What makes it work
- Real bakes wired through a typed image map
- Twelve-product horizontal counter rail
- Honest sample-price labelling with real outlet links
- CSS keyframes + IntersectionObserver reveals, reduced-motion aware
Gallery
A closer look
Build
Under the hood
- next build clean: types valid, 5/5 static pages generated (recorded)
- All section imagery served via next/image; no broken images at 1440 / 768 / 390
- No horizontal overflow at 1440 / 768 / 390, clean console
Reflection
Looking back
The typed asset map is the part I would keep: it makes swapping in a shop's real photography a one-line change. With confirmed prices and permission this shell would go straight to a live heartland-bakery site.