# Onboarding 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 The first-run screen of "Mira", a sleep app. Three full-width slides scroll horizontally with mandatory snap; each has a 380px illustration card drawn entirely in CSS (a moon over hills, a sleep-stage bar chart that rises in, a readiness ring that sweeps to 72%), an italic-accented serif headline and one short paragraph. Below, three page dots: the active one stretches from an 8px circle to a 24px pill in the accent colour. A full-width "Continue" button advances; on the last slide its label swaps to "Get started" and "Skip" disappears. The mood is night-time and quiet: deep navy surfaces, a warm apricot accent, an old-style serif for the headings. ## Reference behaviour 1. Initial state: slide 1 ("Fall asleep on purpose") is centred, dot 1 is a 24px apricot pill, the button reads "Continue", "Skip" is top-right. The moon illustration is static with a three-ring halo. 2. Swipe or drag the track horizontally (mouse drag also works via native scroll): slides snap one at a time (`scroll-snap-stop: always`). 3. When the scroll position crosses the midpoint of a slide, the dot for that slide grows to 24px over 320ms `cubic-bezier(.32,.72,0,1)` and turns apricot; the previous one shrinks to 8px and returns to `--ink-3`. 4. Arriving on slide 2 replays its chart: 18 bars scale up from `scaleY(0)` over 700ms `cubic-bezier(.16,1,.3,1)`, staggered 40ms each. 5. Arriving on slide 3 replays the ring: the conic sweep goes 0% → 72% over 1200ms with the same expo-out curve. "Skip" hides. The button text fades out (160ms, 6px downward) and "Get started" fades in. 6. Tap "Continue": smooth-scrolls to the next slide. Tap "Get started": returns to slide 1 (the Lounge demo loops; in a product it dismisses onboarding). 7. Tap "Skip": jumps to slide 3. 8. ArrowRight / ArrowLeft anywhere move one slide. 9. Pressing the button scales it to 0.97 for 160ms. ## Structure ``` 390 × 844 ┌────────────────────────────────────────┐ │ (54 status) │ │ 98 Mira (italic serif 22) Skip │ header, bottom-aligned │ ┌────────────────────────────────────┐ │ │ │ art card 334×380, r24, #161B2E │ │ │ │ ✦ ◐ moon 120 │ │ │ │ ✦ ╭────╮ ✦ │ │ │ │ ╭───────────╯ ╰──────╮ │ │ hills = large circles │ └────────────────────────────────────┘ │ │ 34 │ │ Fall asleep on purpose (serif 36) │ │ Mira builds a wind-down for the hour │ paragraph 15/1.55, max 300 │ before bed from your own patterns… │ │ │ │ ▬ · · dots 24/8/8 │ │ ┌────────────────────────────────────┐ │ │ │ Continue (56) │ │ bottom 44 │ └────────────────────────────────────┘ │ └────────────────────────────────────────┘ ``` - `` is a flex column: `

` 98px → `.track` (flex 1) → `