sitesup.
عربي Start a project

E-commerce · Coffee Roasters

HOUR & BEAN

A cinematic coffee roaster where a 12-hour dial pours the right cup for your hour

Explore it live Request this project
Interactive — this is the real build running inside the page. Full screen
HOUR & BEAN — screen from the live build

What it does

A chapter-by-chapter storefront for a Mar Mikhael roastery. Drag the hand of a 12-hour dial and the cup in its centre pours the drink for that hour, with the matching bean ready to add. A flavour wheel finds beans by taste, every bag label reprints live as you change roast and grind, and subscriptions, timed brew guides and a four-step checkout with cash on delivery all work end to end.

Signature interaction

Drag the golden hand round a 12-hour dial, tap an hour or use the arrow keys: the centre cup pours the drink for that time — a double espresso at 7, a flat white at 11, cold brew at 3, decaf at 8 — while the light shifts from dawn to night and the matching bean appears below.

What works in it

  • 12-hour coffee dial with drag, tap and arrow keys
  • Animated pour into SVG cups for every hour
  • Flavour wheel bean finder with match scores
  • Bag labels that reprint live with roast and grind
  • Category, flavour, roast and price filters with sort and search
  • Subscribe and save with delivery rhythm per bean
  • Subscription builder with cups-per-day guide and delivery calendar
  • Brew guides with step timers that scale by cups
  • Café locations with open-now status and pickup
  • Bag drawer with free-delivery meter, undo and SITESUP10
  • Four-step checkout with cash on delivery, Whish and OMT
  • Reviews you can post, kept on the product

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
Product Bundles — the feature running live
E-commerce

Product Bundles

Two bundle mechanics in one feature: tier cards for a single product (Single, Duo −15%, Trio −25%) with per-bottle flavour picks, and a build-your-own box where every item moves a progress bar toward the next discount tier, with a live price breakdown and an animated savings counter.

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
Next build DRIVEN Car Rental & Sales