# Tabs with morphing underline > **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 tab strip for a newsletter publication's settings ("Wren · Morning Dispatch"): nine tabs (some with count pills) in a 720px strip that scrolls horizontally, and a 2px olive underline that morphs rather than jumps. On change the underline first **stretches** to cover both the old and the new tab (180ms, expo-out), then **settles** onto the new tab (200ms, standard ease). The panel below crossfades over 200ms with a 4px rise. Where tabs overflow, the strip's edges fade to transparent via a mask that only appears on the side that actually has more content. Dark warm brown, serif headings, one olive accent. ## Reference behaviour 1. Initial state: "Overview" selected; underline exactly under it; the Overview panel shows three stat tiles (Open rate 58.2 %, Click rate 14.9 %, Net new +1,204). The strip is scrolled to the start: no left fade, a 40px right fade (tabs 7–9 are partly hidden). 2. Click "Revenue" (three tabs to the right): phase 1 — the underline's `left` snaps to Overview's left and its `width` grows to reach Revenue's right edge over 180ms; phase 2 — after 180ms `left` moves to Revenue's left and `width` shrinks to Revenue's width over 200ms. Total 380ms. The Overview panel fades out while Revenue fades in (200ms, the incoming panel also rises from `translateY(4px)`). 3. Click a tab to the left: same two phases; phase 1 grows leftward (left moves, width grows), phase 2 the right edge retracts. 4. Click a partly hidden tab (e.g. "Team"): it scrolls into view (smooth) and the underline morphs across the scrolling strip; the left fade appears once `scrollLeft > 2px`; the right fade disappears when the end is reached. 5. Keyboard: Tab focuses the selected tab only. → / ← move to the next/previous tab (wrapping) and select it immediately (automatic activation); Home / End go to first/last. Selection scrolls the tab into view. Tab again moves focus into the visible panel (`tabindex="0"`). 6. Hover a tab: text brightens to `--ink` and the tab gets a `--panel` background with 8px top radii. The count pill on the selected tab inverts to olive with dark text. 7. Resizing re-measures the underline without animation; fonts loading late also re-place it. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────────┐ │ Wren Publications / Morning Dispatch │ 56 ├──────────────────────────────────────────────────────────────────────────┤ │ PUBLICATION │ 720 column, centred │ Morning Dispatch — weekday letter (Libre Caslon 34) │ │ Sent 06:30 Europe/Oslo · 41,208 subscribers · … │ │ ┌───────────────────── 720 ─────────────────────┐ │ │ │Overview Subscribers 41k Posts 184 Revenue Integ…│ ▒▒│ │ tabs 44 tall, fade 40 │ │▔▔▔▔▔▔▔▔ │ │ 2px underline │ └───────────────────────────────────────────────┘ │ 1px hairline │ ┌ Open rate ┐ ┌ Click rate ┐ ┌ Net new ┐ │ panel, 24 above │ │ 58.2 % +1.4│ │ 14.9 % +0.3│ │ +1,204 │ │ tiles 3-col, 12 gap │ └───────────┘ └───────────┘ └─────────┘ │ └──────────────────────────────────────────────────────────────────────────┘ ``` - `
` — 720px column, 40px top padding: `.kick`, `

`, `.sub`. - `.strip` — `position:relative; width:720px; border-bottom:1px solid --line`, with `data-l` / `data-r` attributes ("0"/"1") driving the masks. - `.scroll` — `overflow-x:auto; overflow-y:hidden`, scrollbar hidden (`scrollbar-width:none` + `::-webkit-scrollbar{display:none}`); this is the element that receives the `mask-image`. - `
` — `display:flex; gap:4px; width:max-content; position:relative; padding-bottom:1px`. - `