How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Title: two words at 20vw, heavy condensed italic uppercase (line-height 0.9). Both lines share the width of the longer word. The first shifts left by 20% of that width and the second shifts right by 20%.
- Card: it lives in the section below the hero, filling it (32px padding) with a 4px ink border and 32px corners. At rest it is pulled up by 110% of its height, scaled to 0.25 and rotated -15°, so it sits in the middle of the title. - Layering: the first word is behind the card and the second word is in front of it. - It swaps to the next photo every 250ms, looping.
- Scroll: as the card's section travels from the bottom of the screen to the top, the card moves down to its place (-110% → 0), scales 0.25 → 1 and rotates -15° → 0°, all tied directly to the scroll position.
- Footer: three 14px mono uppercase labels along the bottom of the hero with 32px padding. On the left is a row of small shapes, in the centre a credit line and on the right a status line.
- Under 1000px: the shapes hide, the credit moves to the left and the status stays on the right.
- Fallbacks: reduced motion shows the card full size and still (one photo) with no flipbook.