Interactive — this is the real build running inside the page.Full screen
What it does
A luxury jewellery storefront in black and champagne gold. Type an engraving and watch it set into a 3D ring band, switch between yellow, white and rose gold on the band and the product photos, then book a private appointment or check out with gift wrapping and a handwritten note.
Signature interaction
Type an inscription and it is engraved live along the inside of a perspective ring band, which you can drag to turn and recolour between yellow, white and rose gold.
What works in it
Live engraving preview on a ring band
Metal selector recolours photos (yellow, white, rose gold)
Hover loupe zoom
Carat, length and strap options with live pricing
Ring size guide with on-screen sizer and printable strip
Filters by category, gold, stone and price
Search and sort
Private appointment calendar with booked slots
Cart drawer with coupon SITESUP10
Four-step checkout with gift wrap and note preview
Editable gift note after ordering
Caseback engraving for watches
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 five-step booking flow for a beauty studio in Achrafieh: choose a service, a specialist and a time on a live availability grid, enter details and get a confirmation. Picking a time that overlaps an existing booking is caught instantly, with the closest free alternatives one tap away.
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.