Florent Le Page
Pink macaron

Online pastry shop

Macarons Studio

Pre-ordering artisan macarons in Phuket.

Rollout in progress

4 languages, 342 translation keys
35 product visuals in use
3 depth layers in the macaron rain

The store of an artisan pastry shop, started as an interactive mock-up and now being rolled out: customers order on live-computed baking batches, for pickup or delivery by zone, in four languages including Thai and Russian. Businesses get their own estimator and quote.

Stack: HTML, CSS, JavaScript, Web Animations API, Intl.

Macarons Studio mock-up home page

Physics-based rain with the Web Animations API

Ordering

  • Batches computed live, orders close Wednesday at 6 pm.
  • Pickup or delivery by zone, cart kept in the browser.
  • A single page with no framework, hash routing.

For businesses

  • Estimator from 10 to 500 guests, two-step quote.

Motion

  • Macaron rain with the Web Animations API: three depth layers, physics-based fall.
  • It plays once and fades out if the device asks for less motion.

Languages

  • English, Thai, Russian and French; dates and plurals handled by Intl.

Rollout

  • Being set up on the client's own Shopify store.