# Roadmap swimlanes > **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 A one-screen product roadmap for an invented logistics company ("Wayfare roadmap FY27"). Twelve months run left to right in four quarters; five team swimlanes run top to bottom, each with one or two rows of initiative bars. Bars are filled by status (shipped green, in progress amber, at risk coral, planned as an outlined dark bar), a chartreuse today line cuts through every lane, and a hatched "peak freeze" band marks weeks nobody should ship. Every bar can be dragged along time and snaps to whole weeks, with a date bubble that reads the new range as you drag. The detail worth copying is that every position is a percentage of the track, so the same data lays out at 1280 and inside a 1000px horizontal scroller on a phone. ## Reference behaviour 1. Initial state: "All teams 21" filter pressed; five lanes visible (Platform, Mobile, Payments, Growth, Design systems); today line at Oct 28 (month 3.87 of 12); freeze band from Nov 20 to Jan 6. 2. Hover a bar: it lifts 1px and gains a soft drop shadow (140ms). 3. Pointer-down on a bar: it gains a 2px light ring and a deep shadow, cursor becomes `grabbing`, and a dark-on-light bubble appears centred above it reading the range ("Feb 22 to Apr 30"). 4. Drag horizontally: the bar follows the pointer, snapping to 0.25-month steps (one week); it cannot start before Jul 1 or end after Jun 30. The bubble text and position update on every snap. 5. Pointer-up: ring, shadow and bubble go away; the bar keeps its new position; its `aria-label` now states the new range. 6. Keyboard: focus a bar with Tab and press ← or → to move it one week; the bubble appears while it moves and disappears on blur. 7. Click a team chip: only that lane stays visible, and it fades in from 6px above (280ms). The chip turns solid light; "All teams" restores every lane. 8. Below 760px: the timeline sits in a horizontal scroller (min-width 1000px), the team column sticks to the left, and the scroller opens at October so the today line is in view. ## Structure ``` 1280 × 800 ┌───────────────────────────────────────────────────────────────────────────┐ │ WAYFARE ROADMAP FY27 (Bebas 64) [All teams 21][Platform 5]…[Design 3]│ │ Jul 2026 to Jun 2027 · 21 initiatives · updated… │ │ ■ Shipped ■ In progress ■ At risk □ Planned Drag a bar… (hint) │ │ ┌────────────┬──────────────┬──────────────┬──────────────┬──────────────┐ │ │ │ TEAM │ Q1 Jul to Sep│ Q2 Oct to Dec│ Q3 Jan to Mar│ Q4 Apr to Jun│ │ head 66 │ │ │ Jul Aug Sep │ Oct Nov Dec │ … │ │ │ │ ├────────────┼──────────[TODAY OCT 28]─[PEAK FREEZE]─────────────────────┤ │ │ │ PLATFORM │ [Event bus v2] [Multi-region failover] [SOC 2…] │ │ lane: 2 rows × 46 │ │ Lead · … │ [Rate limiter] [Audit log export] │ │ │ ├────────────┼────────────────┃──////────────────────────────────────────┤ │ │ │ MOBILE … │ … ┃ //// │ │ │ └────────────┴────────────────┸──────────────────────────────────────────┘ │ │ 184px track = 12 equal months, bars at s/12 × 100% │ └───────────────────────────────────────────────────────────────────────────┘ ``` - `
`: `

` (Bebas, with "FY27" in the today colour), a `.sub` meta line, and `.filters` (`role="group" aria-label="Filter by team"`) of `