E-commerce · Bicycle Store & Bike Builder

RIDGE CYCLES

Adventure bike store where you build your bike part by part, from sea to cedars.

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

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

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
Appointment Booking — the feature running live
Business

Appointment Booking

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.

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