# Testimonials quote carousel > **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 mid-page testimonials section for **Fieldnote**, a B2B field-research tool. One quote fills the viewport at a time: a 72px decorative opening mark, a 48px Newsreader sentence (one italic clay word), then a 40px initials disc and a name/role line. Controls sit on a single row: 44px prev/next squares and four 8px dots. It is a carousel, not a wall — the point is the scale of a single sentence and the quiet wrap from 04 back to 01. The first frame already shows quote 01. ## Reference behaviour 1. Initial state: paper page, 56px nav (Fieldnote mark + Product / Methods / Pricing + “Request a seat”), then the section. Index reads **01 / 04**. Kicker on the right: “WHAT TEAMS WRITE BACK”. Quote 01 is on: “We stopped losing the week *after* the site visit.” Author Priya Sen, Research lead · Northline Labs, pine disc “PS”. Dot 1 has `aria-current="true"`. 2. Click Next (or press ArrowRight): quote 01 fades and slides 28px left over 420ms; quote 02 enters from 28px right. Index becomes **02 / 04**. Live region announces “Quote 2 of 4, Tomas Brekke”. 3. Click Prev (or press ArrowLeft) from 01: wraps to 04 (Jonah Ndiaye) with a reverse 28px slide. Index **04 / 04**. 4. Click a dot: jump to that quote. Direction is `back` if the target index is lower, `fwd` if higher. 5. Clicks during the 420ms lock are ignored so slides cannot stack. 6. Hover a nav square: fill `--ink`, icon `--bg`, border `--ink`. Hover a closed dot: `--ink-2`. Active dot is `--pine` at scale 1.15. 7. Hover “Request a seat”: invert to `--ink` fill, `--bg` text. 8. With `prefers-reduced-motion: reduce`, the slide duration is 1ms and transforms are forced to none; state still updates. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ ● Fieldnote Product Methods Pricing Request a seat │ 56 ├──────────────────────────────────────────────────────────────────────┤ │ 01 / 04 WHAT TEAMS WRITE BACK │ 36 pad │ │ │ “ │ 72 mark │ We stopped losing the week after │ │ the site visit. │ 48 / 1.12 │ │ │ (PS) Priya Sen │ │ Research lead · Northline Labs │ │ │ │ [←] [→] ● ○ ○ ○ │ 44 btns └──────────────────────────────────────────────────────────────────────┘ pad 72 ``` - `