The licence says cold and hot

Cafe demo — a menu and ordering site for a UAE cafe

So the whole site has a temperature.

StatusLive
ClientUAE cafe · single branch
Shipped2026
TypeWebsite

Cafe demo — Build a drink — Build a drink

What it is

One switch changes the accent ramp, the atmosphere layer, the hero image, the default menu tab and the drink standing on the 3D stage. It opens cold between 10:00 and 19:00 and hot otherwise. Every option in the drink studio mutates real geometry — liquid layers, ice raft, foam cap, straw, steam — and the price, calories and caffeine ease to their new values so a change pours rather than snaps.

The numbers

Menu items: 36
Loyalty: 6 stamps → free drink
Order ticket speed: 20× real time, stated
Everything the client edits: One file

What is inside

Drink studio: geometry, price, kcal and caffeine all live
The taste matcher is a dot product, and says so
One seeded hash drives the counter, wait and demand — nothing contradicts

In more detail

How the drink studio builds a price

From the parts, not from a menu row. You pick a base — espresso, filter, matcha or chocolate — then milk or none, one of three sizes, and a syrup. Sliders set the shots and the sweetness; ice appears only when the drink is cold, and foam only when there is milk in it. Price, calories and caffeine are recalculated on every move, so a large oat matcha costs what its parts cost.

How the drink gets its name

From a fixed table, never generated. Espresso with no milk and two shots is a doppio. Add milk, push the foam past 60%, and the same base comes back a cappuccino — an iced cappuccino if it is served cold. Because the naming is a table rather than a model, the same build always returns the same name, in English and in Arabic.

Choosing a drink without knowing the names

Four sliders — sweet, bitter, creamy, strong — are measured against a small trait table covering five drinks, and the list re-ranks on every move. Set the sliders back where they were and the same order comes out, which is the point of not using a model. The screen shows the score each drink was given rather than calling itself a recommendation engine.

Why the counter and the owner's view can never disagree

Order tickets move from queued to on the bar to ready, at twenty times real time, and the panel states that it is doing so. Behind them sits one seed, not four: the queue length, the quoted wait, the demand-by-hour bars and the barista board are all read off the same hash, so the customer and the owner are never looking at two different shops.

Built with

Three.js r160 Static EN/AR RTL

Open the live demo Talk to us on WhatsApp

It boots in your browser and runs the real logic — no form, no sales call.

Common questions

Is this cafe site actually live?

Yes. It runs for a cafe in the UAE and shipped in 2026. The panel on this page is the same logic in a smaller frame — the drink studio, the taste matcher and the live counter all run in your browser.

Who changes the menu after handover?

The owner does. Everything the client edits sits in one file that holds all 36 menu items, so a price change or a new drink is one edit in one place. The site is bilingual, so each item carries its English and its Arabic name in the same row.

How does the loyalty stamp work?

Six stamps earn a free drink — the cheapest one in the order, not the dearest. The site says so at the moment a drink is added, so the condition is visible while the stamps are being collected rather than discovered at the counter.

What does a cafe site like this cost?

The scope decides it, so we quote per project in writing after a call rather than publish a figure. What moves it is how much actually runs — a menu, an ordering flow, a 3D drink studio and a properly mirrored bilingual layout are different amounts of work.

More of the work

JD Software Solutions — a four-person software studio in the United Arab Emirates. We build the system, hand over the code, and stay on to run it.

All of the work