Choose the bean.
Eight beans, each with an origin mark, tasting notes and a roast scale. Pick one and the glass hopper fills with beans in the colour of the roast.
← RESOURCE LAB
Sidra
LIVE DEMO / CASE STUDY
Sidra
Coffee
Landing.
An Arabic-first specialty-coffee landing page built as a roastery counter. You order the way you would at a roaster: pick the bean, the roast, the flavours, the grind and the weight, then watch your bag get filled, sealed and packed.
- TYPE
- Concept landing page
- ROLE
- UX, UI, motion, front-end
- STACK
- HTML · CSS · JS · SVG · Canvas
- LANGUAGE
- Arabic (RTL)
- DEVICES
- Mobile-first, desktop
- STATUS
- Demo: placeholder brand & data
Try it, don’t
just read it.
Switch between a phone mockup, a desktop window and full width. Everything inside the frame is the real page.
The opening sequence plays once per session. Press Replay to see it again.
A product page that behaves like a counter.
Most coffee shops online show a grid of bags and a dropdown for grind size. In a roastery the order is a conversation: which bean, how dark, anything added, how fine, how much.
Sidra turns that conversation into six steps and a single illustration that reacts to every answer, so the customer sees the order being made instead of filling in a form.
- One scene, many states. The hopper, grinder, scale and bag are one drawing that changes with each choice.
- Warn only when it matters. Advice appears, in colloquial Saudi Arabic, only when a combination is unsuitable.
- Never choose the grind for the customer. A line can’t enter the cart without an explicit grind.
- Motion with a job. Every animation explains a state change: filling, sealing, packing.
Order the way
you would at a roaster.
Set the roast.
Five levels from light to dark. The bean colour, the roast dots on the bag label and the taste bars all follow the choice.
Add flavours.
Cardamom, saffron, clove, ginger: drawn as icons, lit up on the shelf, and ground together with the beans.
Pick the grind.
By brewing method, with a sample of the particle size. The dial on the grinder moves to match, and whole beans are blocked when flavours are added.
Weigh it.
250 g, 500 g or 1 kg on a scale whose display counts up, with the price per cup shown on each option.
Fill the bag.
A pour, a swell, a heat seal, a stamp. Then the pouch lifts off the scale into a kraft bag that flies to the cart.
The experience,
frame by frame.
What makes it
feel real.
The opening.
Anticipation, squash and stretch, then a burst. The bean’s gravity, bounce and spin run on a fixed time step, so it looks the same on every device.
The fill choreography.
Pour, swell, heat seal, stamp, pack. The stage never moves or resizes while it plays, so nothing jumps.
Advice, only when needed.
No praise, no filler. A thin strip appears under the scene when a roast, flavour or grind is a poor match.
Origins and Sadu.
Every bean carries an origin mark. Woven bands borrow the geometry of Sadu as an abstract graphic language, not a reproduction of the craft.
Journey of the bean.
A scroll-driven timeline from tree to cup: a bean rolls down the line and each station lights up as it arrives.
A cart that remembers.
Cart lines show a miniature of the pouch you built: origin mark, roast bean, label and all.
Built plain.
Tested properly.
BUILD
No framework and no build step: ES modules, one SVG scene driven by classes and attributes, Canvas for the intro physics, the Web Animations API for choreography. The cart lives in localStorage and the journey in sessionStorage.
ACCESSIBLE & RESPONSIVE
Reduced-motion visitors skip the intro and get the finished result at once. Fill stages are announced through a live region, the scene has a live label, focus moves with each step, and the intro can be skipped by tap or Escape. On phones the scene stays pinned and re-frames for every step.
TESTED
Scripted real-browser tests (Chrome, via DevTools Protocol): the six-step journey at seven widths, rapid-click and double-submit protection, reload persistence, reduced motion, the cart, and frame-by-frame capture of the fill animation. The production URL was checked visually after deploy.
Not verified: real devices, Safari and Firefox, screen readers.
Brand, products, prices and roast dates in the demo are placeholders. There are no real reviews, certifications or payments.