How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Pinning: every card except the last sticks to the top of the screen and stays pinned until the last card arrives.
- Shrink and tilt: while the next card travels from the bottom of the screen to the top, the card underneath scales from 1 to 0.75. It rotates to +5° (odd cards) or −5° (even cards), and a 50% black overlay fades in. All of this is tied directly to the scroll position.
- Card layout: a light panel the full size of the screen with 24px padding and a 48px gap between two columns: - Left (a third): the index number in huge type (clamp(40px, 5.75vw + 29px, 144px)). - Right (two thirds, 24px down): a column 75% wide holding the title (same huge size, 75% wide), a 5:3 photo, and a row with a small uppercase note and the description.
- Under 1000px: the columns stack and the copy row stacks too, with the same pinning and shrinking.
- Fallbacks: reduced motion keeps the pinning but not the shrink and tilt. Without JavaScript the cards still stack.