Peg：晾衣绳告诉你今天挂了多少事

一个可运行的日程规划网页原型：晾衣绳就是工作量表。先设定今天有多少空闲时间，再用木夹把每个任务挂上绳子。绳子是真实的物理模拟，下垂深度 = 已排时间 ÷ 空闲时间：最低点旁的读数写着「2h 30m of 6h」，正好排满 100% 时，最低的布签刚好碰到地面，读数后面多出「full」（已满）。新布签落下时，其他布签会依次晃动。

排得比空闲时间多，绳子就把布签拖到地上：地面变成砖红色，出现「Over by 45m」（超出 45 分钟），一个按钮可以把最后一项挪到明天。沿绳拖动布签可以调整顺序，拖到右边的 Tomorrow（明天）短绳上就延到明天，点一下夹子就算完成：布签飞进 Done（完成）篮子，绳子弹回去。按 E（或 Edit 按钮）可以原地修改任务的名称、时长和类别。拉一下空绳再松手，它会“嘣”地振动，但不会改动任何数据。「Show the physics」会叠加以小时为单位的下垂刻度、张力颜色和公式。时长从 15 分钟到 1 小时 30 分钟，分 Work / Life / Errand（工作 / 生活 / 杂事）三种布签，每天最多 12 项；绳上挤的时候，每隔一张布签会用短绳挂低一点，让每个名字都看得清。支持单步撤销、跨天时把明天的任务接到今天、可选的合成夹子声、完整的键盘和读屏操作、减少动效时改画同样读数的静态曲线，以及窄到 360 px 的手机。所有数据只保存在你的浏览器里。

这是 App 界面设计和网页原型，不是原生安装包；没有账号、同步、提醒或日历导入。

在线试用：https://boloop-works.pages.dev/works/peg-day-line/

下载原型文件（zip，141 KB）：https://boloop-works.pages.dev/works/peg-day-line/peg-day-line.zip

Actual design brief

Design a small, genuinely usable day planner where a washing line is the workload meter, delivered as a runnable single-page web app (no backend, no build step). Type a task, pick its length (15/30/45/60/90 min) and hang it on the line with a wooden peg; the line is a real rope simulation (Verlet points, distance constraints) and sags by total planned time divided by the free time you set for today (1–12 h, a horizon line marks the limit). Other tags sway in a staggered ripple when a new one lands. Over-plan and the line drags on the ground: the horizon turns brick red and the readout says "Over by 40m". Slide tags along the line to reorder, drag one to a short Tomorrow line, or tap its peg to finish it: the tag flutters into a Done basket and the line springs back. Pull the empty rope to twang it. A "Show the physics" toggle overlays tension and a sag scale. Cool pale grey-blue morning, charcoal cotton line, three muted cloth colours, one warning colour. Keyboard and screen-reader support, reduced motion draws a static curve with the same readout, 360 px phones, optional synthesized clip sound, data in localStorage.

来源

形式启发（研究后改编，未照搬）：@vareshmukhekar 可以戳、拉、撕的蜘蛛网，https://x.com/vareshmukhekar/status/2114393433242730834 ——这里的绳子不是玩具，而是读数；每次打开都从一根绷直的空绳开始，再把任务一张张夹上去。@Kubai087 的层级错峰卡片动效和穿插讲原理的演示，https://x.com/Kubai087/status/2116198373040759107 ——这里改成离落点越远的布签晃得越晚、越轻，「Show the physics」解释下垂的算法。局部参考：@ismailkestel 一屏一个动作、只用一种状态色的 hero，https://x.com/ismailkestel/status/2110722208993526230。没有使用这些帖子的任何代码、图像或文案。绳子是手写的 Verlet 模拟，属于公开的通用算法。

字体：Bricolage Grotesque、JetBrains Mono，SIL Open Font License 1.1，本地打包。