Interactive — this is the real build running inside the page.Full screen
What it does
A Beirut perfume and oud house in oud brown, burgundy and gold. Five questions pour an animated notes pyramid tier by tier and land on three matches; a layering lab blends two scents into named accord bars, a discovery box takes five vials, and every cap can be engraved with a live preview. Shop, product pages, bag and a four-step preview checkout with cash on delivery all work end to end.
Signature interaction
Answer five questions and liquid gold pours into a notes pyramid tier by tier, base to heart to top, then three matches drop out of it with their match percentage.
What works in it
Five-question scent finder with a liquid notes pyramid
Three matches with match percentage
Product wheel you can drag or step through
Layering lab with blended accord bars and a generated name
Discovery box: choose five vials that fly into the tray
Live cap engraving preview with lettering and finish
Concentration selector: EDP 50 or 100 ml, oil 12 ml
Sold-out size with notify-me form
Shop filters by family, intensity and price, with sort and search
Bag with two free samples, gift wrap and SITESUP10
Four-step checkout with cash on delivery, Whish Money and OMT
Boutique testing-chair booking on a coast map
Motion preview
Screen recording of the live build, running on sample data.
Features inside this build
E-commerce
Product Variant Selection
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.
Two bundle mechanics in one feature: tier cards for a single product (Single, Duo −15%, Trio −25%) with per-bottle flavour picks, and a build-your-own box where every item moves a progress bar toward the next discount tier, with a live price breakdown and an animated savings counter.
A phone product page with a frequently-bought-together checklist and combined price, a post-add modal offering protection at a one-time price with a live countdown, and a cart drawer that suggests what completes the setup, offers a storage upgrade on the line item and unlocks a free gift above a spend threshold.
A four-step 'Almost yours.' checkout: contact and Lebanese address with inline validation, delivery zones priced by city with speed options, a calendar and time windows, payment by cash on delivery (USD or LBP), card with live brand detection, Luhn check and a flipping card preview, or a simulated Whish link, then a review with edit links and an order confirmation.