Lantern alarm wheel time picker

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

The edit screen of a fictional bedside alarm app, Lantern, built around a wheel time picker done properly. Three wheels (hour 1–12, minute 00–59, AM/PM) are true 3D cylinders: each row is rotated 18° per step around a 139px radius under a 900px perspective, so rows lean away and foreshorten instead of just fading. You can drag them, fling them and they glide to a stop exactly on a detent; every detent crossed flashes the two small marks at the ends of the selection band in tomato, a visual stand-in for a haptic tick. Below the picker: “Rings tomorrow in 8 h 22 min”, seven repeat-day toggles with a “Weekdays” summary, a label field, sound and snooze rows, and Delete. Warm paper, a book serif for the numerals and a condensed grotesk for labels. The detail worth copying: momentum and snapping are one curve, a cubic ease-out from the release point to the projected detent, so the wheel never coasts and then visibly corrects.

Reference behaviour

1. First frame: 6 : 40 AM in the band; three rows above and below each wheel visible on the curve. “Rings tomorrow in 8 h 22 min” (now is Thursday 22:18). Repeat M T W T F filled, S S outlined, summary “Weekdays”. Label “Ferry to Ilha Verde”. Sound “Harbour bell”. Snooze on.
2. Drag a wheel: pointer capture; position = start − dy / 44 (one row per 44px), drawn every move. Hour and minute wrap; AM/PM rubber-bands past its ends at one-third of the drag.
3. Release: velocity is measured over the last 100ms of moves (rows per ms). Target = round(position + v × 320). Duration = clamp(|target − position| × 70 + 200, 240, 1400)ms, eased 1 − (1 − k)³. AM/PM targets clamp to 0–1. If the finger was still for more than 80ms before release, it just settles to the nearest row in 220ms.
4. Each time the rounded position changes (while dragging or gliding), the band plays a 120ms tick: it squashes to scaleY 0.94 and both end marks turn #B83D27 for 130ms.
5. The centre row is weight 600 in --ink; others are 400 in --dim. Rows past ±66° are hidden.
6. Keyboard on a focused wheel: ↑/↓ one row (170ms), PageUp/PageDown 5 minutes on the minute wheel (one row elsewhere), Home/End first/last value, ←/→ move focus to the neighbouring wheel. Mouse wheel / trackpad: every 40px of deltaY moves one row (160ms).
7. After each settle, the “rings” line recomputes: the next enabled day at the chosen time, phrased “later today”, “tomorrow” or “on Monday”, with hours and minutes. No repeat days means the next occurrence of that time.
8. Repeat toggles flip aria-pressed, press-squash to 0.88 over 260ms, and update the summary: Weekdays, Weekends, Every day, Never, or “Mon Wed Fri”.
9. Sound row cycles Harbour bell → Low reed → Morning gull → Paper chime. Snooze is a switch. Save announces “Alarm saved for 6:40 AM, Weekdays”.

Structure

390 × 844
┌──────────────────────────────────────┐
│ 54px clear                           │
│ Cancel      EDIT ALARM       (SAVE)  │ top 56h: 88 / 1fr / 88
│ ┌──────────────────────────────────┐ │ picker card 284h, r24, #FBF7F0
│ │          3      37               │ │ wheels 264h: hour 96, minute 96,
│ │          4      38               │ │ period 80; colon 14
│ │          5      39               │ │
│ │ ▌        6  :   40     AM      ▐ │ │ band: inset 12, 44h, r14, #E6DCCB
│ │          7      41     PM        │ │ end marks 3px at 8px from edges
│ │          8      42               │ │
│ └──────────────────────────────────┘ │
│ Rings tomorrow in 8 h 22 min         │ 15px, value 600
│ REPEAT                     Weekdays  │ 12px Oswald, 0.16em
│ (S)(M)(T)(W)(T)(F)(S)                │ 44px circles, space-between
│ LABEL                                │
│ [ Ferry to Ilha Verde            ]   │ input 52h r16
│ ┌ Sound            Harbour bell › ┐  │ list rows 56h, r20 card
│ └ Snooze, 9 min            (●══)  ┘  │ switch 52 × 32
│ [          Delete alarm          ]   │ 48h, margin-top auto
└──────────────────────────────────────┘

• div.pick[role=group][aria-label="Alarm time"] with div.band[aria-hidden], three div.wheel[role=spinbutton][tabindex=0] and an aria-hidden colon.
• Each wheel holds a pool of 11 div.it[aria-hidden] rows that are re-labelled and re-transformed every frame (slot −5…+5 around the rounded position).
• p.rings[aria-live=polite], h2 labels, div.days[role=group] of seven button[aria-pressed], a labelled input, div.list with a button.row and a button.sw[role=switch], button.del.

Tokens

:root {
  --bg: #F4EEE4;        /* page */
  --card: #FBF7F0;      /* picker card, list, input */
  --band: #E6DCCB;      /* selection band */
  --band-tick: #D3C3A8; /* band end marks at rest */
  --line: #DDD2C1;      /* card borders, row dividers */
  --ink: #2A2320;       /* centre row, filled days, switch on */
  --ink-2: #5E534A;     /* labels, secondary */
  --dim: #6A5F55;       /* off-centre rows, 5.0:1 on the card */
  --tom: #B83D27;       /* Save, Cancel, ticks, focus */
  --tom-ink: #FFFFFF;
  --edge: #8C7F70;      /* input, day and switch borders, 3.4:1 */
  --serif: "Literata", Georgia, serif;
  --cond: "Oswald", "Arial Narrow", sans-serif;
  --fs-wheel: 27px; --fs-period: 20px; --fs-colon: 28px; --fs-body: 16px; --fs-input: 17px; --fs-rings: 15px; --fs-label: 12px;
  --item: 44px; --step: 18deg; --radius: 139px;   /* 22 / tan(9deg) */
  --perspective: 900px; --wheel-h: 264px; --hide-beyond: 66deg;
  --r-card: 24px; --r-band: 14px; --r-input: 16px; --r-list: 20px; --r-pill: 999px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --expo: cubic-bezier(.16,1,.3,1);
  --glide: cubic(1 - (1-k)^3); --t-tick: 120ms; --t-key: 170ms; --t-settle: 220ms;
  --fling-gain: 320; --ms-per-row: 70;
}

Typography

Role	Family	Size	Weight	Notes
Wheel numerals	Literata, opsz 40	27px	400; centre 600	lining tabular figures
Colon	Literata	28px	600	nudged up 2px
AM / PM	Oswald	20px	500	0.08em
Title EDIT ALARM, SAVE	Oswald	15px	500 / 600	0.16em / 0.08em, upper
Section labels	Oswald	12px	500	0.16em, upper; summary 13px 0.06em
Day letters	Oswald	15px	500	0.04em
Body, rows, input	Literata	16–17px	400–500	1.35

Motion

What	Trigger	From → to	Duration / easing	Reduced motion
Wheel drag	pointer move	1 row per 44px, 18° per row	1:1	same
Fling + snap	release	position → round(pos + v × 320)	clamp(Δ × 70 + 200, 240, 1400)ms, cubic out	jumps to the nearest row, no fling
Key / wheel step	keys, mouse wheel	±1 or ±5 rows	170ms / 160ms cubic out	instant
Detent tick	each row crossed	band scaleY .94, end marks tomato	120ms --ease	none
Day toggle	press	scale .88 → 1, fill 160ms	260ms --expo	fill only
Switch	press	knob translateX 0 → 20px	240ms --expo	instant

States

• Resting: band marks --band-tick; centre row bold.
• Moving: marks flash per detent; the bold row changes as each row crosses centre.
• AM/PM edge: dragging past AM or PM resists at one third and glides back.
• Repeat on / off: --ink fill with --bg letter / 1.5px --edge outline.
• Snooze on / off: --ink track, knob right / #CFC4B4 track, knob left.
• Focus-visible: 3px --tom outline (inset 2px on wheels so it stays inside the card).

Accessibility

• Each wheel is role="spinbutton" with aria-label (Hour, Minute, AM or PM), aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext (“40”, “AM”). Rows are aria-hidden.
• Keys as in Reference behaviour 6; ←/→ hop between wheels so the whole time can be set without Tab.
• The live region says “Minute 52” after each settle, the sound change and the save; “Rings…” is its own polite region.
• Days have full names as labels (“Monday”) and aria-pressed; the group is labelled by “Repeat”.
• The snooze switch is labelled by its row text.
• Contrast: off-centre rows use a solid colour, not opacity, so every visible row is at least 5:1; white on --tom 5.6:1; borders 3.4:1.
• Hit targets: wheels 96 × 264, days 44px, switch 52 × 32 inside a 56px row, Save 40px tall, Delete 48px.

Responsive rules

• The column caps at 440px; the picker card fills it and the wheels stay 96 / 96 / 80 centred.
• At 360 wide the days stay 44px and the gaps shrink; the wheels keep their widths (total 288px).
• If height is short (under 740px), drop the list card above Delete, not the picker.
• For a 24-hour locale, render 00–23 in the hour wheel and remove the period wheel.

Acceptance checklist

Always

• Rows are placed with translateZ(−R) rotateX(a) translateZ(R) at 18° per row under a 900px perspective, R = 22 / tan 9°.
• A pool of 11 row nodes per wheel is reused; hour and minute wrap.
• Release projects velocity (last 100ms) to a target detent and glides there in one cubic-out curve.
• Every detent crossed triggers a visible tick on the band.
• The period wheel rubber-bands at its ends and clamps.
• Off-centre rows are dimmed with colour, never opacity, and hidden past 66°.
• ↑ ↓ PageUp PageDown Home End and ← → work; wheel events step one row per 40px.
• Each wheel exposes spinbutton value and text.
• Repeat summary covers Weekdays, Weekends, Every day, Never and lists.
• Reduced motion: no glide, no tick; values still change.
• Scroll width is 390 and nothing fixed sits in the top 54px.

This demo

• Opens at 6:40 AM, “Rings tomorrow in 8 h 22 min” with now Thursday 22:18.
• Repeat Monday to Friday, label “Ferry to Ilha Verde”, sound “Harbour bell”, snooze 9 min on.

Implementation notes

Draw a wheel from a fractional position. Slots −5…+5 around the rounded position, each placed on the cylinder by its angle from the true position:

const R = 22 / Math.tan(9 * Math.PI / 180);   // 138.9px for 44px rows at 18deg
function draw(w) {
  const base = Math.round(w.pos), n = w.vals.length;
  w.nodes.forEach((d, s) => {
    const i = base + s - 5, a = (i - w.pos) * 18, ok = w.loop || (i >= 0 && i < n);
    if (!ok || Math.abs(a) > 66) { d.style.visibility = 'hidden'; return; }
    d.style.visibility = ''; d.textContent = w.vals[((i % n) + n) % n];
    d.style.transform = `translateZ(${-R}px) rotateX(${-a}deg) translateZ(${R}px)`;
  });
  if (base !== w.last) { w.last = base; tick(); }
}

Momentum and snap as one curve.

const v = (last.pos - first.pos) / Math.max(16, last.t - first.t);   // rows per ms over 100ms
const to = Math.round(w.pos + v * 320);
const ms = Math.max(240, Math.min(1400, Math.abs(to - w.pos) * 70 + 200));
glide(w, to, ms);   // rAF, pos = from + (to - from) * (1 - (1 - k) ** 3)

The tick needs a restart. Remove the class, force a reflow, add it again, or fast flings only flash once:

band.classList.remove('tk'); void band.offsetWidth; band.classList.add('tk');

Common mistakes: a CSS scroll-snap list with a gradient mask (no real curvature, and the masked rows fail contrast), simulating friction and then snapping separately (a visible correction at the end), creating 60 DOM rows per wheel, and forgetting user-select: none so a drag selects the numbers.