Ten stamps, one free drink
A loyalty card for a made-up café, Brewlane Coffee. Customers collect stamps on their phone and staff add them with a PIN.
Demo PIN: 1234
How it works
Customer side
- Read your member code to the barista when you order.
- They add a stamp and it presses onto your card straight away.
- At ten stamps a free drink unlocks. Tap Redeem and the card starts again.
Staff side
- Tap Staff: add stamp on the customer’s phone.
- Enter the shop’s 4-digit PIN. A wrong PIN is refused with a message.
- A correct PIN adds one stamp and logs it in History with the time.
Jump to a state
Skip the waiting and put the phone straight into a state.
Loading the card.
Demo PIN 1234
Everything runs in your browser and saves to this device with localStorage. In a real build the PIN would be checked on a server, and the card would follow the customer across phones.
Lab demo
What this demonstrates
Mobile-first apps that bring customers back.
- A mobile-first app screen: a framed phone on desktop, full width on a real phone
- A tactile stamp animation and a CSS confetti reward, with plain fades for reduced motion
- A staff mode behind a 4-digit PIN pad, with a shake or a static message on a wrong PIN
- Card and history saved in the browser with localStorage, plus a reset
- Scope check: the PIN is checked in the browser here; a real build checks it on a server
Mobile appLoyaltyHospitalityAnimation
Want something like this?
Everything in the Lab is hand-built — and a real version for your business starts with a free, no-obligation 20-minute call.
Stamp Card — a Lab demo, not a real business