Interactive — this is the real build running inside the page.Full screen
What it does
A romantic botanical store for a Gemmayzeh florist. Its signature bouquet builder flies every stem you tap into a hand-drawn paper cone, layered like a burger builder, with wrap paper, ribbon, a handwritten card and a live price. Same-day delivery is checked against the visitor's clock by Beirut area with a live cut-off countdown, and the shop, product pages, trees and plant finder, garden visit booking, basket and four-step checkout with cash on delivery, Whish and OMT all work end to end.
Signature interaction
Tap a peony, a rose or a sprig of eucalyptus and the stem flies into a hand-drawn paper cone and settles into the bouquet layer by layer; switch the wrap, ribbon and colour story, write the card in handwriting, and the size tag and price update as you go.
What works in it
Bouquet builder with stems that fly into a layered SVG bouquet
Wrap paper, ribbon and colour story that restyle the bouquet live
Card message previewed in handwriting
Same-day delivery checker by Beirut area with a live cut-off countdown
Delivery date and time-slot picker that respects the cut-off
Shop filters by occasion, budget, same-day and pet-safe, with sort and search
Product sizes, add-ons, size guide and close-up view
Plant care finder that ranks plants by light, watering and pets
Garden consultation booking with validation
Flower Letter subscriptions: weekly, every 2 weeks or monthly
Basket drawer with free-delivery progress, undo and SITESUP10 code
Four-step checkout with cash on delivery, Whish, OMT or card
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.
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 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.