Stub：撕收據來分帳

一個可執行的分帳 App 網頁原型。先選是誰點的，再點收據上的一行，這一行就會從收據上撕下來，飛到這個人的頭像裡。換一個人再點同一行就是兩人分攤，同一個人再點一次就退回。

共四屏：收據（編輯品項和稅）、分帳、小費、結算。金額按整數分計算；分攤的品項平均分，稅和小費按每人實際點的金額比例分配，所以各人份額加起來正好等於總額。結算頁可以複製一段純文字貼到群組。所有資料只保存在你的瀏覽器裡。

這是 App 介面設計和網頁原型，不是原生安裝檔；沒有收據辨識、付款或後台。

線上試用：https://boloop-works.pages.dev/works/stub-bill-split-v1/

下載原型檔案（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.

來源

視覺與互動參考（只研究方法，未複製）：@Duygu_tpcu 的待辦微互動 https://x.com/Duygu_tpcu/status/2115764863922536462 ——中性清單裡讓核心動作擁有自己的三拍時刻；「到達即高亮」的想法來自 @elenahuxy 關於 Claude 設定搜尋的貼文 https://x.com/elenahuxy/status/2114851645767246243 。未使用兩者的程式碼、畫面或文案。

字體：Instrument Sans 與 IBM Plex Mono，SIL Open Font License 1.1，已本地打包。收據、店名和人名均為虛構範例。