Steep — a tea timer where the cup is the clock

A runnable web prototype of a tea timer where the cup is the clock. Pick a tin from the shelf (hover one and its lid lifts to show the leaf), then drag the infuser into the glass. The water darkens as it steeps, a gauge beside the glass reads Light, Just right, Strong or Over, and the page picks up a faint tint of the brew. Lift the infuser when the colour looks right.

Eight teas: green, scented green, white, oolong, two blacks, ripe pu-erh and herbal. Each one sets the water temperature, the grams of leaf for your cup size (200, 250, 350 or 500 ml) and the time for each re-steep. Lifting gives a result card with the colour you got and the next infusion: log it, or redo the infusion without using up the leaf. The timer runs off the clock, so it keeps going in a background tab: the tab title switches to ● Lift now and the tab icon changes colour, an optional soft chime plays when the tea is ready, and the screen stays awake while the leaf is in the water where the browser allows it. If the tea is forgotten, the timer stops itself at twice the time. Reload mid-steep and it picks up where it left off. Today keeps every logged cup as its own colour swatch. °C or °F, keyboard and screen-reader support, 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 are no system notifications, account or backend, and the tea settings are starting points, not rules.

Try the live demo: https://boloop-works.pages.dev/works/steep-tea-timer/

Download the prototype files (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.

Sources

Interaction references (studied and adapted, not copied): @CreativeDima's pull-cord lamp, where one physical gesture warms the whole page, https://x.com/CreativeDima/status/2113680801694888095 — here, dragging the infuser into the water starts the timer and tints the room. @ivijaygupta's macOS folder hover, where the papers peek out, https://x.com/ivijaygupta/status/2113611262504608121 — here, a tin's lid lifts to show the leaf. No code, artwork or copy from either post is used.

Brewing starting points: teachapter.com/pages/brewing-guide and frei-style.com/en/how-to-brew-tea (read 2026-10-31). The liquor colours are stylised, not measured.

Fonts: Fraunces and Hanken Grotesk, SIL Open Font License 1.1, bundled locally.