Steep：杯子就是時鐘的泡茶計時器

一個可執行的泡茶計時器網頁原型：杯子就是時鐘。先從茶架上挑一罐茶（滑鼠懸停時罐蓋會抬起，露出茶葉），再把濾茶球拖進玻璃杯。茶湯隨時間變深，杯旁的刻度顯示 Light（淡）、Just right（剛好）、Strong（濃）或 Over（過頭），頁面也會染上一層淡淡的茶色。顏色合適時把濾茶球提起來。

共八種茶：綠茶、花茶、白茶、烏龍、兩種紅茶、熟普洱和花草茶。每種茶會設定水溫、依杯量（200、250、350 或 500 ml）換算的茶葉克數，以及每一泡的時間。提起濾茶球後會出現結果卡，顯示這杯的顏色和下一泡：可以記錄，也可以重泡這一泡，不會白白用掉一泡。計時按真實時間走，切到背景分頁也不停：到點時分頁標題變成「● Lift now」，分頁圖示換色；可選開啟一聲輕柔的提示音；泡茶期間在瀏覽器允許時保持螢幕常亮。忘了提起來的話，到兩倍時間會自動停下。泡到一半重新整理頁面，也能接著剛才的進度。Today（今日）把記錄下的每一杯保存成各自顏色的色塊。支援 °C/°F 切換、鍵盤和讀屏操作、減少動態效果設定，以及窄到 360 px 的手機。所有資料只保存在你的瀏覽器裡。

這是 App 介面設計和網頁原型，不是原生安裝包；沒有系統通知、帳號或後台，茶的參數只是起點，不是標準。

線上試用：https://boloop-works.pages.dev/works/steep-tea-timer/

下載原型檔案（zip，328 KB）：https://boloop-works.pages.dev/works/steep-tea-timer/steep-tea-timer.zip

Actual design brief

Design a small, genuinely usable tea timer where the cup is the clock, delivered as a runnable web prototype (no backend, no native package). Shelf: eight tins (green, scented green, white, oolong, two blacks, ripe pu-erh, herbal); hovering a tin lifts its lid to show the leaf, picking one sets water temperature, grams of leaf for the chosen cup size (200/250/350/500 ml) and time for each re-steep. Brew: a glass cup with an infuser you drag into the water (or press Enter/Space/arrows); the water's colour deepens with time and is the timer, a side gauge reads Light / Just right / Strong / Over, and the room picks up a faint tint of the brew. Lifting the infuser gives a result card (colour swatch, verdict, next infusion). Today: every cup logged as its own colour. °C/°F, keyboard and screen-reader support, reduced motion, 360 px phones. Neutral warm paper and ink; the tea is the only colour. Data stays in localStorage.

來源

互動參考（研究後改編，未照搬）：@CreativeDima 的拉繩檯燈，一個實體動作讓整頁變暖，https://x.com/CreativeDima/status/2113680801694888095 ——這裡改成把濾茶球拖進水裡開始計時，房間隨茶色微微染色。@ivijaygupta 的 macOS 資料夾懸停，紙張從裡面探出來，https://x.com/ivijaygupta/status/2113611262504608121 ——這裡改成懸停時茶罐蓋子抬起，露出茶葉。沒有使用兩篇貼文的任何程式碼、圖像或文案。

沖泡參數起點：teachapter.com/pages/brewing-guide 與 frei-style.com/en/how-to-brew-tea（2026-10-31 查閱）。茶湯顏色是風格化處理，不是實測值。

字體：Fraunces、Hanken Grotesk，SIL Open Font License 1.1，本地打包。