Interactive — this is the real build running inside the page.Full screen
What it does
A craftsmanship long-scroll storefront for a Mar Mikhael leather workshop, built from Shopify-style sections. Scroll the making of a wallet chapter by chapter, type your initials and watch a brass die press them in blind, gold or silver foil, then shop, filter, personalise and check out in a one-page Shopify-style checkout with cash on delivery, card or Whish. A live theme editor recolours, retypes and reorders the whole store.
Signature interaction
Type up to three initials and a heated brass die drops onto a grained leather swatch, lays gold or silver foil or debosses blind, lifts away and leaves your monogram pressed in, ready to add to any piece.
What works in it
Scroll-driven making story with a live stitch counter
Brass monogram press: blind, gold or silver foil
Initials preview on the product photo with placement
Cart drawer with free-delivery meter, gift wrap, notes and SITESUP10
One-page checkout with cash on delivery, card and Whish
Customer account with one-time code, orders, buy again and repairs
Motion preview
Screen recording of the live build, running on sample data.
Features inside this build
E-commerce
Product Configurator
A step-by-step builder for a made-to-order desk from a Beirut workshop: size, top, base, colour and extras, with a 3D preview that redraws on every choice and turns under your finger. Price, lead time, ready date and SKU update live, build rules explain what can't be combined, and every design gets a shareable code.
A 24-product catalogue with faceted filters for category, price (dual slider over a price histogram), colour swatches, size, rating and in-stock. Active filters show as removable chips, counts update live, the grid re-sorts with smooth FLIP animation and the whole state lives in the URL so a filtered view can be shared.
A product grid where Quick view zooms the card image straight into a modal (shared-element transition) with a gallery, colour and size selection, quantity and add to bag. It is fully keyboard driven: Enter opens, arrows browse images, Tab is trapped inside and Esc returns focus to the card.
A phone product page where colour swatches swap the gallery with a circular colour-wipe, storage options show price differences and low or sold-out stock per colour, an availability matrix shows every colour × storage combination at a glance, and the SKU, price and URL update with each choice.