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