Peg — a day planner where the washing line shows how much you've hung on it
Hang today's tasks on a line. It sags by how much time you've planned, and drags on the ground when you've planned too much.
Image credit: Tink
A runnable web prototype of a day planner where a washing line is the workload meter. Set how much free time you have today, then hang each task on the line with a wooden peg. The rope is a real simulation, and it sags by planned time divided by free time: a readout at its lowest point says "2h 30m of 6h", and at exactly 100% the lowest tag just touches the ground and the readout adds "full". When a new tag lands, the others sway one after another.
Plan more than you have and the rope drags tags onto the ground: the ground turns brick red, "Over by 45m" appears, and one button moves the last task to tomorrow. Drag a tag along the line to change the order, onto the short Tomorrow line to postpone it, or tap its peg to finish it: the tag flies into the Done basket and the rope springs back up. Press E (or Edit) to rename a task or change its length or kind in place. Pull the bare rope to twang it; that never changes your data. "Show the physics" adds a sag scale in hours, a tension colour and the formula. Lengths are 15 minutes to 1h 30m, with Work, Life and Errand tags, up to 12 tasks a day; when the line gets crowded, every second tag hangs a little lower on a short cord so each name stays readable. One-step undo, a new-day hand-over from Tomorrow, an optional synthesised clip sound, full keyboard and screen-reader support, a still curve with the same readout under reduced motion, and phones down to 360 px. Everything stays in your browser.
This is an app design and web prototype, not a native app. There is no account, sync, reminder or calendar import.
Try the live demo: https://boloop-works.pages.dev/works/peg-day-line/
Download the prototype files (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.Sources
Inspired by @vareshmukhekar's spider web you can poke, stretch and tear, https://x.com/vareshmukhekar/status/2114393433242730834 — here the rope is not a toy but a meter, and every visit opens on a bare, taut line and pegs your tasks on one by one. Inspired by @Kubai087's staggered card animation and its explain-the-maths interludes, https://x.com/Kubai087/status/2116198373040759107 — here neighbouring tags sway later and smaller with distance, and "Show the physics" explains the sag. Partial reference: @ismailkestel's one-action hero with a single state colour, https://x.com/ismailkestel/status/2110722208993526230. No code, artwork or copy from any of these posts is used. The rope is a hand-written Verlet simulation, a public general technique.
Fonts: Bricolage Grotesque and JetBrains Mono, SIL Open Font License 1.1, bundled locally.