# Usage slider that picks your plan > **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 The plans screen of Postwick, a fictional transactional email API, on a phone. One slider sets how many emails you send a month; all three plans re-price at that volume, including their overage, and a mint frame glides to the cheapest one with a "Best fit" badge. A Monthly / Annual control shows the real saving in euros, a plain comparison table sits below, and one full-width button says exactly what you will pay: "Start Growth · €37.50 / mo". The language is iOS 26 dark: graphite cards on near-black, 20px radii, a sliding segmented control, Inter at tight tracking. The detail worth copying is that the screen does the arithmetic for the buyer and admits when a cheaper plan costs more at their volume. ## Reference behaviour 1. Initial state: 200,000 emails a month, Annual selected. Rows read Starter €72.50 "incl. €60 extra", Growth €37.50 "a month, yearly" with **Best fit** and the mint frame, Scale €91.67 "a month, yearly". The header line shows "€0.19 per 1,000". The button reads "Start Growth · €37.50 / mo" and below it "€450 billed yearly · you save €90". 2. The slider has 12 stops: 10k, 25k, 50k, 100k, 200k, 300k, 500k, 750k, 1M, 1.5M, 2M, 3M. Ticks label 10k, 100k, 500k, 1M and 3M at their stop positions. 3. Drag the slider (or use arrow keys): the big volume number updates, the mint fill follows the thumb, each row's price changes with a 260ms drop-in tick, and the cheapest plan becomes selected. The frame slides to it (420ms expo) and the Best fit badge pops in on that row (scale .8 → 1) and out of the old one. 4. Crossovers in this demo: Starter is best up to 100k, Growth from 200k to 500k, Scale from 750k. At 750k monthly Scale is €110 and Growth €157.50 "incl. €112.50 extra". 5. Tap **Monthly**: the segmented thumb slides left (320ms sheet curve). Base prices return to full (Starter €15, Growth €45, Scale €110); the line under the button reads "Billed monthly · annual would save €90 a year". 6. Tap a plan row to choose it yourself: the frame moves there and the button and table follow; the badge stays on the cheapest plan. Moving the slider again hands selection back to the best fit. 7. The comparison table colours the selected plan's column mint: emails included, extra per 1,000, log retention, dedicated IP, team seats, support. 8. Tap the button: it reads "Starting your trial" for 1.4s. ## Structure ``` 390 × 844, page scrolls under a fixed bottom bar ┌──────────────────────────────────────┐ │ 54 safe area │ │ (x) [✉] Postwick Restore │ nav 44 │ Pay for the email you 27px │ │ actually send │ │ Slide to your volume. We pick … │ 14px lede │ ╭──────────────────────────────────╮ │ │ │ Emails a month €0.19 per 1,000│ │ 13px │ │ 200,000 emails 46px │ │ │ │ ━━━━━━━━━●─────────────────── │ │ input 44 tall, track 6, thumb 30 │ │ 10k 100k 500k 1M 3M │ │ 12px ticks │ ╰──────────────────────────────────╯ │ │ ( Monthly )( Annual 2 months free )│ segmented 52, thumb slides │ ╭ Starter €72.50 ╮ │ rows 66, gap 8, r16 │ ╭ Growth [BEST FIT] €37.50 ╮ │ mint frame overlay │ ╭ Scale €91.67 ╮ │ │ What each plan includes │ │ Feature Starter Growth Scale │ table, columns 74 │ ... │ │ [ Start Growth · €37.50 / mo ] │ 56 tall, r16, mint │ €450 billed yearly · you save €90 │ 13px └──────────────────────────────────────┘ ``` - `
`: Close `