# Tabbed feature preview > **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 features section for a SaaS landing page (the fictional support platform "Northdesk"). A two-line 60px headline sits above a split: on the left, four vertical tabs; on the right, a large preview stage showing a product window built entirely from divs. The tabs autoplay: each active tab grows a 1px mint hairline under itself over 6 seconds, then hands off to the next. The preview crossfades with a 4px blur and a 10px rise, so changing tabs feels like focusing a lens, not swapping slides. A 200px outlined numeral ("01"…"04") in the bottom-left corner counts the active step. The detail worth copying: the progress is a CSS animation, and JS only listens for `animationend`, so pause-on-hover is one line of CSS. ## Reference behaviour 1. Initial state: tab 01 "Triage that reads first" is selected, its description is expanded, its hairline starts filling left → right. The stage shows the Inbox window with a highlighted ticket and a dashed "Suggested reply" box with a blinking 7×14px mint caret. 2. After 6000ms the hairline is full; the next tab becomes selected. Its description expands (grid-rows 0fr → 1fr, 420ms) while the previous collapses; the pane crossfades; the giant numeral changes to "02". After tab 04 it wraps to 01. 3. Hovering anywhere over the section pauses the hairline where it is (`animation-play-state: paused`). Moving the pointer out resumes from the same point. 4. Clicking a tab selects it immediately and restarts its hairline from 0. 5. Keyboard: when a tab has focus, autoplay is paused; Up/Left and Down/Right move selection (and focus) with wrap-around, Home/End jump to first/last. 6. A 32px square pause button top-right (label "Autoplay" / "Paused" in mono to its left) toggles autoplay. Its icon swaps between two bars and a play triangle; `aria-pressed` mirrors the state. 7. The four panes are: **Inbox** (5 ticket rows, sentiment chips, a suggested reply), **Shared view** (filter chips, a 5-row SLA table with health meters, two live-cursor name tags), **Automation rule** (When → If → Then nodes joined by marching dashed wires, plus a 4-cell run stats strip), **Audit log** (6 timestamped entries on a dotted timeline). 8. With reduced motion, autoplay is off from the start (button shows "Paused"), panes switch instantly, wires and caret stop. ## Structure ``` 1280 × 800, padding 56 / 64 ┌───────────────────────────────────────────────────────────────────────┐ │ ● NORTHDESK · PLATFORM Autoplay [❚❚] │ │ Every ticket arrives Northdesk reads, routes │ │ already half-solved. (60px, line 2 muted) … 340px paragraph │ │ ↕ 40px │ │ ┌ 392px tablist ──────┐ 48px ┌ stage (1fr, radius 14) ───────────┐ │ │ │01 Triage that reads │ │ ┌ window (panel-2, radius 10) ┐ │ │ │ │ description… │ │ │ 40px header · chips │ │ │ │ │ ━━━━━━━────────── │ │ │ rows / table / flow / log │ │ │ │ │02 Shared views, live│ │ └──────────────────────────────┘ │ │ │ │03 Automations… │ │ pane: inset 28px, v-centred │ │ │ │04 An audit trail… │ │ │ │ │ └─────────────────────┘ │ │ │ │ 01 /04 (200px outline) └───────────────────────────────────┘ │ └───────────────────────────────────────────────────────────────────────┘ ``` - `
` — CSS grid `392px 1fr`, rows `auto 1fr`, column gap 48px. - `.head` spans both columns: grid `1fr 340px`, `align-items:end`. Eyebrow (6px mint dot with 4px tinted ring + mono label), `

` with a `` for the muted second line, and a `

`. - `.ctrl` absolutely positioned at `right:64px; top:62px`. - `.tabs[role=tablist][aria-orientation=vertical]` — four `