Interactive — this is the real build running inside the page.Full screen
What it does
A minimal sunglasses and eyeglasses store in sand and tortoise. Put any of nine frames on four model faces or on your own photo, drag, resize and tilt them, recolour the frame and lens tint live, then build prescription lenses with a validated form, see the lens edge thickness, and check out with cash on delivery, Whish Money or OMT.
Signature interaction
Pick a face or upload your own photo and the chosen frame, drawn to scale in SVG, lands on the eyes; drag it, resize it from the corner or with a pinch, tilt it, swap frames from the strip and recolour frame and lenses live without losing the fit.
What works in it
Live try-on on four model faces or your own photo, kept on the device
Drag, corner-handle resize, tilt knob, pinch and keyboard control
Frame colour and lens tint recolour live without losing position
Fit check comparing frame width with face width in millimetres
Shop grid that can show every frame on a chosen face
Face-shape guide with recommended frames
Lens builder with edge-thickness cross-section by index
Prescription form validating SPH, CYL, AXIS and PD
Frame drawings with lens, bridge, temple and width dimensions
Home try-on box of four frames
Cart drawer with quantity, undo and coupon SITESUP10
Four-step checkout with cash on delivery, Whish Money and OMT
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.