E-commerce · Sunglasses & Eyeglasses Store

OCULO

An optical boutique where every frame is drawn to scale and tried on a face first.

Interactive — this is the real build running inside the page. Full screen
OCULO — screen from the live build

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

Product Variant Selection — the feature running live
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.

Try it
Advanced Product Filters — the feature running live
E-commerce

Advanced Product Filters

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.

Try it
Multi-step Checkout — the feature running live
E-commerce

Multi-step Checkout

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.

Try it