# Shared element expand > **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 3 × 2 grid of project cards for an architecture studio's portfolio page. Clicking a card does not open a new panel: the card *itself* appears to grow into a 1040 × 688 detail dialog using the FLIP technique (First, Last, Invert, Play) — one Web Animations call on `transform` and `border-radius`, 420ms, expo-out. The other five cards and the page header fade to 18 % / 35 % so the expanded element owns the frame. Esc, the close button, or a click outside reverses the same animation back into the grid slot. The palette is warm paper with one terracotta accent; titles are a light-weight serif. The detail worth copying is that the reverse animation is computed from the live rects, so it always lands exactly on the card even if the page has resized. ## Reference behaviour 1. Initial state: header (72px) with brand, four nav links ("Projects" is current), and a right-aligned meta line. Below, an h1 "Houses we *finished*" with a 380px-wide lede, then six cards in a 3-column grid with 20px gaps. Each card: a 172px flat colour swatch with an uppercase tag top-left, then a serif title (21px) and a "location · year" caption. 2. Hover a card: it lifts 2px (`translateY(-2px)`) and gains a soft shadow, 160ms. 3. Click a card: the hidden detail dialog is filled with that card's data and its `--c` swatch colour, then shown at its final fixed position (`inset: 56px 120px`). The dialog is immediately transformed to overlay the card's rect (translate + non-uniform scale, radius corrected so it still reads as 14px on screen) and animates to identity over 420ms `cubic-bezier(.16,1,.3,1)`. The source card becomes `visibility: hidden` for the duration. 4. While the dialog grows: the other five cards fade to opacity 0.18 and the header and lede to 0.35 (320ms). The dialog's body copy (paragraphs, facts list, CTA) fades in over 260ms after a 200ms delay, so text never appears stretched mid-scale. 5. When the open animation finishes, focus moves to the round close button in the hero's top-right. 6. Press Esc, click the close button, or click outside the dialog: the body copy fades out in 120ms, the fade-outs on the grid reverse, and the dialog animates from identity back to the card's *current* rect over 420ms with the same easing. On finish the dialog is hidden, the source card is made visible again and refocused. 7. Clicks during an in-flight animation are ignored (a guard flag), so double-clicks cannot leave the UI half-open. 8. With `prefers-reduced-motion: reduce`, all durations are 1ms: the dialog appears and disappears in place. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ header 72 ⌂ Halden Studio Projects Studio Journal Contact meta │ ├──────────────────────────────────────────────────────────────────────┤ │ 28px │ │ h1 Houses we finished lede (380px) ───────── │ │ 22px │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ x=48, 3 cols │ │ │ swatch 172 │ │ swatch 172 │ │ swatch 172 │ gap 20 │ │ │ title / cap │ │ title / cap │ │ title / cap │ card ≈ 381×254 │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ │ │ │ │ │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ hint: Click a house to expand · Esc to close │ └──────────────────────────────────────────────────────────────────────┘ dialog when open: fixed, inset 56px 120px → 1040 × 688 ┌───────────────────────────────────────────┐ │ hero 300 (swatch colour, tag, 46px title) ⊗ close 40 │ │ body: 1.4fr copy │ 1fr

facts + CTA │ └───────────────────────────────────────────┘ ``` - `

` — `.brand` (22px SVG house glyph + serif name), `