# Case Stack (Moonarc)

Case studies as a deck: on a wide screen each card holds at the top of the screen while the next slides up over it, and the one underneath shrinks and darkens a little on a scroll-driven timeline; on a phone they follow one another. Each card paints a colour block: its number and field, its name (the card's link), a line, the work it took as chips and a "View case" cue, beside a picture or a drawing in a second block (Motif). Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/case-stack` (license key required)
- Tier B · category section · trigger scroll, hover
- Readout: `<CaseStack cases={[{ href, title, text, tags, meta }]} />`
- Browser support: limited (Chrome 115 · not Firefox · Safari 26); elsewhere: the cards still stack (sticky) without shrinking or darkening
- Measured cost: 0 B JS (CSS 18.0 kB raw)
- Page: https://moonarc.dev/components/case-stack/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `cases` | `{ href, title, text?, meta?, tags?, block?, art?, motif?, caption?, image? }[]` | none | The cases, in order. block is the card's colour (the five in turn when unset), art the drawing's (the next block when unset); image ({ src, alt, srcset?, sizes? }) replaces the drawing. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>. |
| `more` | `{ href: string; label: string }` | none | A link beside the heading, e.g. to all the work. |
| `cue` | `string` | `'View case'` | The cue at the foot of each card, beside the round arrow (hidden from a screen reader: the name is the link). |
| `tagsLabel` | `string` | `'Services'` | Accessible name of each card's chips. |
| `level` | `2 | 3` | `2` | Heading level of the section's heading; the cases' names are one below. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import CaseStack from '@/components/moonarc/pro/CaseStack.astro';
---
<CaseStack
  eyebrow="Work"
  more={{ href: '/work/', label: 'All work' }}
  cases={[
    { href: '/work/one/', title: 'A menu that sold out', text: 'A new menu shot in a day and posted for a month.', meta: 'Restaurant', tags: ['Photo', 'Social'], motif: 'plate' },
    { href: '/work/two/', title: 'Rooms booked by June', text: 'A villa\'s rooms, filmed for the season.', meta: 'Villa', tags: ['Video', 'Ads'], motif: 'gate' },
  ]}
>
  <span slot="headline">Selected <em>work</em></span>
</CaseStack>
```

## Reduced motion

The cards still hold and stack; none shrinks or darkens, the arrow and the picture stay put.

## With ClientRouter

CSS only (a view timeline); nothing to rebind.

## Craft

- Each card sticks 1.125rem lower than the one before, so the edges of the cards beneath show as a stack.
- The card underneath shrinks by 4 % and darkens by a tenth for every card above it, over the stretch in which the next one crosses it: the deck reads as depth rather than as a slide show.
- The sticky top reads --ma-casestack-top (5.75rem by default): set it to the height of your bar so a card never slides under it.
- The timeline is the list's own view timeline cut into one range per card, so the cards need no script and no scroll listener.
- No tone: the deck covers nearly all of the section, so a painted ground would show only between the cards. Put it on the page's own ground, or in a band of your own.

## Replaces

- Sticky card stacks (GSAP ScrollTrigger)
- Stacking cards (Framer templates)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/case-stack` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: motif.