Stub — split the bill by tearing the receipt
Tap a line on the receipt and it tears off to whoever had it.
Image credit: Tink
A runnable mobile web prototype of a bill-splitting app. Pick who had it, tap a line on the receipt, and that line tears off and flies to their name. Tap the same line with someone else to share it; tap it again to give it back.
Four screens: Receipt (edit lines and tax), Split, Tip and Settle. Money is handled in whole cents. Shared lines split evenly, and tax and tip follow what each person ordered, so the shares always add up to the bill. Settle copies a plain-text summary for the group chat. Everything stays in your browser.
This is an app design and web prototype, not a native app. There is no receipt scanning, payment or backend.
Try the live demo: https://boloop-works.pages.dev/works/stub-bill-split-v1/
Download the prototype files (zip, 134 KB): https://boloop-works.pages.dev/works/stub-bill-split-v1/stub-bill-split.zip
Actual design brief
Design a small, genuinely usable bill-splitting app for a group dinner, delivered as a runnable mobile web prototype (no backend, no native package). Four screens in one flow: Receipt (edit lines and tax), Split (assign each line to people), Tip (pick a percentage), Settle (who owes the payer what, copyable as text).
Core moment: the receipt is the interface. Pick a person, tap a line, and that line tears off the paper with a fresh ragged edge, lifts, and flies into the person's avatar, leaving a torn gap that closes into a coloured stamp. Three readable beats: tear, carry, stamp. Tap the same line with another person to share it; tap it again with the same person to give it back. Tapping a person briefly highlights the lines they own.
Visual language: a quiet warm-grey phone UI so the thermal-paper receipt (monospace, dashed rules, zigzag edges, faint grain) is the only textured object. Person colours are used only for ownership (avatar, stamp, settle stub). Large tabular numbers for money. Instrument Sans for UI, IBM Plex Mono for the receipt.
Maths: integer cents. Shared lines split evenly with largest-remainder rounding. Tax and tip are allocated in proportion to each person's food subtotal, again with largest-remainder rounding, so every share adds up to the bill exactly. Unassigned lines stay visible as unassigned.
Motion: tear ~700 ms (lift 0–30% ease-out, fly ease-in-out), stamp pop 340 ms, chip bump 260 ms. prefers-reduced-motion skips the flight and the stamp just appears. Data stays in the browser (localStorage). Sample receipt is fictional.Sources
Visual and interaction reference (studied, not copied): @Duygu_tpcu's to-do micro-interaction, https://x.com/Duygu_tpcu/status/2115764863922536462 — a neutral list where the core action gets its own three-beat moment. Highlight-on-arrival idea from @elenahuxy's post about Claude's settings search, https://x.com/elenahuxy/status/2114851645767246243 . No code, artwork or copy from either post is used.
Fonts: Instrument Sans and IBM Plex Mono, SIL Open Font License 1.1, bundled locally. Receipt, venue and names are fictional sample content.