# iOS app switcher stack > **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 An iOS-style app switcher on a near-black background. Five 300×600 app cards (Fjord Bank, Nord Post, Orbital, Marrow, Halden — all fictional, each a flat two-tone gradient with real-looking screen content) are laid out as a horizontal fan: each card sits 80px to the right of the previous one, rotated −7° around Y inside a 1400px perspective, so the front card is fully visible and the older ones peek out on the left. Dragging horizontally scrolls the fan; dragging a card upward and releasing past 120px (or faster than 0.6px/ms) flings it off the top and the remaining cards reflow; tapping a card expands it to the full 390×844 frame in 420ms with the radius collapsing from 40px to 0. The detail worth copying is the single-transform layout: every card's position is three custom properties (`--x`, `--y`, `--s`) written by one `layout()` function, so drag, fling, reflow and expand all use the same CSS transition. ## Reference behaviour 1. Initial state: heading "Recent" (Syne 22/600) top-left at y = 76px with "5 apps" at the right; the fan is scrolled to its end so the newest card (Halden, purple) sits at x = 60px and the four older cards peek 80px each to its left; a caption "Drag to browse · swipe up to close · tap to open" sits at 64px from the bottom. 2. Pointer down on a card captures the pointer. After 6px of movement the gesture axis is locked to whichever of |dx|, |dy| is larger; the card gets `.drag`, which disables its transition so it tracks the finger 1:1. 3. Horizontal drag: `scroll = startScroll − dx`, clamped to `[0, (n−1) × 80]`. All cards recompute `--x = 60 + i × 80 − scroll` and move together (no transition while dragging). 4. Vertical drag: only the touched card moves; `--y = min(0, dy)` (cannot be dragged down). 5. Release after a vertical drag with `dy < −120px` or velocity `< −0.6px/ms`: the card gets `.gone` — it flies to `translateY(−900px)`, scales to .9 and fades to 0 over 320ms — and is removed from the list. The remaining cards reflow to their new `--x` over 380ms with `cubic-bezier(.2,.7,.2,1)`. The "N apps" counter updates. 6. Release after any drag that does not meet the fling threshold: the card springs back to `--y: 0` and the fan settles over 380ms. 7. Release with no movement (a tap): the card gets `.full` — `left/top` go to 0, `width/height` to 390×844, `border-radius` 40 → 0, transform to identity (no rotateY, scale 1) — all over 420ms with `cubic-bezier(.32,.72,0,1)`. The app content padding-top grows 28 → 70px on the same clock so the app title clears the status bar. Heading and caption fade out over 160ms. After the expansion, a footer line "Tap anywhere to return to the switcher" fades in. 8. Tapping the expanded card (any tap that arrives more than 400ms after opening) removes `.full`; the card shrinks back into its fan slot over 420ms; heading and caption return. 9. Keyboard: cards are `tabindex="0"`. Enter/Space toggles expand/collapse; Delete or Backspace flings the focused card; ArrowLeft/ArrowRight move focus and scroll that card to x = 60px; Escape collapses. 10. When every card has been flung: a centred "No recent apps" message with a 44px pill "Replay" button fades in over 240ms. Replay restores all five cards, scrolled to the end again. ## Structure ``` 390 × 844 ┌──────────────────────────────────────────┐ │ (54px status bar drawn by the Lounge) │ │ Recent 5 apps │ y 76, Syne 22/600 · Manrope 12/500 │ │ │ ┃┃┃┃┌────────────────────────────┐ │ card top 150, 300 × 600, r 40 │ ┃┃┃┃│ [H] Halden │ │ older cards peek 80px each at │ ┃┃┃┃│ Mira Lindqvist │ │ x = −260, −180, −100, −20; front at 60 │ ┃┃┃┃│ ┌────────────────────────┐ │ │ │ ┃┃┃┃│ │ Did the invoice go out?│ │ │ rows: 14px chat lines, r 14 │ ┃┃┃┃│ └────────────────────────┘ │ │ │ ┃┃┃┃│ ┌────────────────────────┐ │ │ │ ┃┃┃┃│ │ Sent at 08:52, TS-2041.│ │ │ │ ┃┃┃┃│ └────────────────────────┘ │ │ │ ┃┃┃┃│ ... │ │ │ ┃┃┃┃└────────────────────────────┘ │ card bottom 750 │ │ │ Drag to browse · swipe up to close · tap │ caption, bottom 64 └──────────────────────────────────────────┘ perspective 1400px, origin 50% 40%; every card rotateY(−7deg) ``` - `
` — absolute, `top: 54px; padding: 22px 24px 0`; `

` + ``. - `
` — absolute inset 0, `perspective: 1400px; perspective-origin: 50% 40%`. - `
` × 5, each with inline `--c1`/`--c2` (top and bottom of its gradient). - `.app` — flex column, `padding: 28px 24px 24px`, gradient `--c1 → --c2`. - `.id` — 44px rounded icon (initial letter, Syne 18/700) + app name (Syne 18/700) + 12px subtitle. - Optional `.big` (Syne 40/600 figure) + `.sub` (13px), optional `.bars` (7 bars, 80px tall sparkline), `.rows` (14px pills, `rgba(255,255,255,.12)`; `.ghost` rows at `.07`). - `.done` — absolute bottom caption inside the card, visible only in `.full`. - `

` — absolute, `bottom: 64px`, centred, 12px/500 tertiary ink. - `

` — absolute inset 0 grid, hidden until the list is empty; contains `

` and `