← All examples

Year Wheel Bake-Off: Month Deck (Rolodex)

Bake-off contender B of 3 — the same Norwegian club årshjul as an honest paged month navigator. One complete focus month card holds ALL of the month’s items grouped by category with full details (timing incl. day-of-month, ownerRole, frist badges on confirmed deadlines, notes) — no fixed card height, no title truncation. Prev/next month cards peek at the edges (10–14% width, capped ~72px, dropped when the focus card would fall below ~326px; peeks are buttons with 44px hit targets). Navigation wraps December→January with an explicit year-seam marker (annual cycle); direct jumps never animate through intervening months. A persistent 12-cell month index doubles as minimap and density strip — short labels, selected state, current-month marker, per-month density bar, count in the accessible name. Motion is a 200ms 2D translate + slight opacity (cubic-bezier(.2,.8,.2,1)); reduced motion swaps instantly; swipe has a horizontal-intent threshold and never intercepts scrolling starting inside event content. Focus stays on the initiating control; a polite live region announces «<Month>, <N> aktiviteter».

Årshjul bake-off — the month deck (rolodex)

One shared dataset — the same realistic Norwegian club årshjul (28 items harvested from Nidelv IL, Drag IL and the NDF/NIF wheel) that drives the radial wheel — presented as contender B of three: an honest paged month navigator. The deck unit is a MONTH, never a category; categories are group headings inside the card. The same data also drives the radial wheel lens and a span-grid lens (their own bake-off cards).

What this contender must prove: focus and drill-down (and mobile). One complete month card holds ALL of the month’s items with full details — timing including day-of-month, owner role, frist badges on confirmed deadlines and notes — with no fixed card height and no title truncation. Neighbor peeks show only the adjacent month’s name and direction; navigation wraps December→January (and back) with an explicit year-seam marker, because an årshjul is an annual cycle. A persistent 12-cell month index doubles as minimap and density strip: short labels, selected state, current-month marker and a per-month density bar (the count lives in each cell’s accessible name). Clicking any cell jumps directly — no animation through intervening months.

Accessibility model: every navigation control is a real button (peeks keep a 44 px hit target even when visually small); ArrowLeft/ArrowRight page the deck wherever focus sits inside it; focus stays on the initiating control after navigation; and a polite live region announces the new month and its activity count. Motion is a 200 ms 2D slide with a slight fade — reduced motion swaps instantly; swiping has a horizontal-intent threshold and never intercepts scrolling that starts inside event content. Density is never color alone — each index cell carries a visible bar plus its count in the accessible name.

Same dataset as the radial wheel (contender A) · landscape note: Årshjulet (NIF) — NIF’s own share view is a month-deck carousel; this contender rebuilds that idea with span semantics, full details on one card and an a11y-first interaction model.

September, 3 activities