Bakery Design
A showcase site for a fictional bakery designed like a dark shop window: an intro that opens with a spotlight, the journey of bread told as you scroll and a product showcase that opens by growing.
Concept design and development · 2026
Demo admin panel: admin / admin123, via the “Yönetim” link at the bottom of the page.
The brief
A local bakery’s presence online is often just a map pin and a few photos. Yet it has a story to tell: wheat, flour, dough, stone oven, shop window. The goal was to tell this story not like a product list, but as if you were standing in front of a bakery window in the evening.
What I did
The page opens dark; a spotlight slowly widens and lights up the bread on the counter. Below, a five-stage journey from wheat to table is told in a single pinned scene. The showcase has ten products: they catch the light on hover, and on click the photo grows open from where the card was. The first version was light and illustrated and didn’t show the product; I rebuilt the second version from scratch and put the products under the spotlight with real photos.
Result
The concept can be explored live inside this portfolio. The brand is fictional (BB Fırın), but the structure is ready for a real bakery: once phone numbers, addresses and photos are replaced it can go live.
Technical decisions
The spotlight is made with a CSS mask; JavaScript only changes the size and position of the light, so it runs without stutter. The journey scene is pinned with GSAP ScrollTrigger; on phones the browser’s own scrolling is kept. For visitors who choose reduced motion, the light is on from the start and the scenes are stacked.
- HTML / CSS
- JavaScript
- GSAP
- ScrollTrigger
Highlights
- An intro that opens with a spotlight, flour dust glowing in the light
- A five-stage journey with dark transitions in a single scene
- Product photos that grow from the card on click
- A dark-themed admin panel built into the site
Thinking of something similar?
