Le Cookie

Every extra click loses someone.

Le Cookie bakes every set to order: wedding favours, birthdays, launches. Its old site spread the studio across several pages, and the owner could see the cost herself: every extra click lost people. Most visitors arrive on a phone from Instagram or a friend’s tip, comparing bakers.

So the brief had one measure of success: more finished inquiries. The feel she asked for was fun, creative, professional and modern, and she already had a picture in mind: a warm oven in the hero, and a cookie that comes out of it and travels down the page.

The little oven.

The page opens with three questions: shape, icing, topping. Then the oven starts. The cookie the visitor just designed rolls out on a belt and follows them down the page: fresh on a rack, iced on a plate, signed with the studio’s JW, sealed in its box. By the time they reach the form, they have already watched their order being made.

Design it in three taps. Watch it bake on the way down.

The look comes from the oven too: soft matte clay, its tan wavy band, an embossed heart and star, a dark glass window. The whole page is made of it.

Five directions, one oven.

1. Five looks, side by sideWe built five full design directions before choosing. The pastel bakery look was dropped first: it is the one any baker down the road could have.
2. Her cookies, not stock onesThe four cookie shapes were traced from photos of her own cookies, and every oven, cookie and prop on the page is a 3D render made for it in Blender.
3. 48 cookies, four stages eachFour shapes, four icings and three toppings make 48 cookies. Each one was rendered plain, iced, decorated and signed, so whatever a visitor picks is what they see.
4. A cookie that rolls with the pageBetween sections the cookie rolls a whole turn or more, so it always lands upright, and settles with a little bounce. On phones it stays in place, and for anyone who prefers less motion the story is told still.
5. One page, one folderPlain HTML, CSS and JavaScript with no build step, so the studio can host it anywhere.

• HTML
• CSS
• JavaScript
• GSAP and ScrollTrigger
• Blender

Not another bakery template.

Details you could almost taste.

• JW, piped for realThe signature on the cookie is drawn from the real outlines of the studio’s script face, so it reads like her hand.
• Sealed with waxThe box closes with a gold-pressed wax seal and a sprig of baby’s breath.
• It talks about your cookieThe page names what you chose: “In the oven: your peach star with a piped bow.”
• A cursor you can eatWith a mouse, the pointer is a chocolate chip cookie. Two clicks take bites, the third finishes it, crumbs fall and a new one pops up.
• Skip, surprise meNot sure yet? One tap skips the questions and the oven picks a cookie for you.
• What happens nextBeside the form, four plain steps: the inquiry, her reply, the retainer, then pickup or delivery. No guessing.

• Cream#F7EFE6
• Clay#FDF9F4
• Tan#CDA67F
• Cocoa#3B2C23
• Oven glow#F2B26C