Interactive — this is the real build running inside the page.Full screen
What it does
A Beirut and Batroun bike shop built around a live SVG bike builder: pick a road, gravel or e-city frame and watch it weld itself together, then drop on wheels, cockpit, saddle and groupset while weight and price count up. A size guide puts a rider on the bike, Lebanese routes come with elevation profiles you can scrub, and test rides book against real slot availability.
Signature interaction
Pick a frame and the side-view bike welds itself together tube by tube; the wheels roll in, the saddle and cockpit drop into place and the chainring spins on while weight and price count up.
What works in it
Six-step bike builder with an animated SVG bike
Live weight and price that count up with every part
Spec sheet and part call-outs that update as you build
Size guide with a rider on the bike, knee-bend and standover checks
Lebanon routes with scrubbable elevation profiles and contour maps
Test-ride booking with slot availability and clash detection
Category, material, price and stock filters with sort and live search
Product photo hotspots and a geometry view per frame size
Service plans and accessories as add-ons
Bag with free-delivery meter, undo and the SITESUP10 code
Four-step checkout with cash on delivery, Whish Money, OMT and card
Saved builds in a personal garage
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 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 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.