How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Header: 160px of space above a small muted "Featured work" label, 32px gap, then a 56px statement half the page wide, centered.
- Cards: each card is a full screen tall and sticks to the top, inside a section with 16px padding. The inner panel is 100% − 32px tall with 32px corners and 16px padding. It holds two equal halves: text on the left, and a photo with 24px corners on the right.
- Text: a 16px muted info line (40% wide, 32px padding) at the top, and at the bottom the 56px title and an 20px description (75% wide).
- Tip back: while the next card travels from the bottom of the screen until its top is 75% of a screen above the top, the current panel moves up 50%, back 250px and rotates 45° around its bottom edge (perspective: 1000px). All of this is tied to the scroll position, on an ease-out curve so the tilt starts quickly and settles.
- Fade: while the next card's top travels from 75% down the screen to the top, a dark overlay on the current panel fades from 0 to 1.
- Last card: it simply stays put.
- Under 1000px: the panel stacks (text over photo), the text is centered and the description is hidden. The tip-back starts when the next card is 85% down the screen.
- Fallbacks: reduced motion keeps the pinned stack without tilting. Without JavaScript the cards still stack.