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，本地打包。